For the statically typed crowd, you may want auto-completion, compiler errors in your IDE, and a simple zero-config compilation. For anything related to the IDE use VSCode and you will be golden.
To satisfy everyone, let's go over simple ways to set up a TypeScript project.
If you want to learn the fundamentals of TypeScript go ahead and check out the official handbook.
# Locally in your project. npm install -D typescript npm install -D ts-node # Or globally with TypeScript. npm install -g typescript npm install -g ts-node # Execute a script as `node` + `tsc`. ts-node script.ts
There is another simple way to start a project for experimenting or for platform-agnostic libraries.
The simple way is by using a zero-config CLI called TSDX.
With this, you'll create a library with TSDX which will set up everything you need to run, build, lint, and test your project or library.
npx tsdx create mylib cd mylib yarn start yarn build yarn lint yarn test
I found out about TSDX via TailwindCSS's TailwindLabs GitHub where they have a tailwindcss-intellisense project (a VSCode extension for Tailwind autocomplete, syntax highlighting, and linting). This project contains a "language service" package that is agnostic to the platform it is being used in hence TSDX being a good use case for the library.
TSDX also works with React but I have not tried using it for that yet. I would usually rely on the CLI that comes with whatever framework I am using.
If you are starting a TypeScript project with a framework you are in luck, most if not all of the frameworks support TypeScript now.
Let's go over a few frameworks to show the support and provide some useful links.
Angular uses TypeScript as the primary language for development. So for Angular, all you have to do is continue to use the Angular CLI as usual.
If you've been using Angular you are probably way ahead of the game on using TypeScript.
For React we have some frameworks in our frameworks.
Here are the most popular React frameworks and links about adding or their support for TypeScript.
Vue 3 is written in TypeScript so there is no additional tooling needed to use TypeScript with Vue 3.
If you are still using Vue 2 for some reason, the Vue CLI still had support for TypeScript so you are all good.
Getting TypeScript set up with some Node.js frameworks has been a bit of a pain here and there but that is a larger discussion.
The issue is really with getting these frameworks to be very strict with TypeScript.
Fastify has Typescript support and I've recently used this generator package to get a project started quickly. There were some small changes I made to the generated project to fit my TypeScript style.
Lastly, take a look at NestJS because this framework is doing a lot of cool stuff. It has full TypeScript support, is built like Angular, and unfortunately has a learning curve.
I'm interested to hear about your experience with Node frameworks and TypeScript so let me know!
Those are some of the simple ways to start a project in TypeScript. TypeScript and web tooling can be scary and cumbersome as you are starting out. Especially if you are used to all-in-one platforms.
TypeScript enables a great new way to develop web applications and can help a lot with some of the confusion for new developers jumping into web development. (Of course, that always comes with tradeoffs 😅)
Remember to not get bogged down about a tool or tools to work correctly at first and don't try to do everything at once for your first TypeScript project.
Most importantly, have fun!
If you like what you read also check out my brother and my blog where we post this and tons of other content!
👉 https://koalatea.io/ 👈
You are at the end of the post so legally you have to:
🌟 Follow me on Twitter 🌟