How to start a TypeScript project [2021]

If you are learning TypeScript you can have a hard time finding out a simple way to start TypeScript projects from scratch. Depending on if you are coming from JavaScript or a statically typed language like Go, Swift, or Kotlin you may have an expectation for how your project should work.

For my JavaScript friends, you may just want something to start working right now.

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.

Keep in mind

TypeScript is a statically typed language that is a superset of JavaScript. Because of this TypeScript transcompiles to JavaScript.

How? Well with a compiler of course. TypeScript compiler (TSC) or Babel to be exact.

No matter what platform or tool you are using, at some point, they will use a TypeScript compiler because at the end of the day we still have to execute JavaScript.

If you want to learn the fundamentals of TypeScript go ahead and check out the official handbook.

Setting up a TypeScript Project (The absolute simplest way)

In my opinion, the simplest way to execute JavaScript is by installing Node and running node coolfile.js.

So in my opinion, the easiest way to compile and execute TypeScript is by installed Node and a package called ts-node and using ts-node to execute your TypeScript the same way you would with node.

The short of what ts-node does is run node and tsc together to compile then run the compiled JavaScript in a single command.

# 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

Setting up a TypeScript Project (Libraries)

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.

Setting up a TypeScript Project (Frameworks)

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

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.

https://angular.io/guide/typescript-configuration

React

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.

Create React App

Gatsby

Next.js

Vue

Vue 3 is written in TypeScript so there is no additional tooling needed to use TypeScript with Vue 3.

https://v3.vuejs.org/guide/typescript-support.html#official-declaration-in-npm-packages

If you are still using Vue 2 for some reason, the Vue CLI still had support for TypeScript so you are all good.

https://vuejs.org/v2/guide/typescript.html

Node

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.

Either way, you should be able to set up TypeScript for Express or Fastify fine.

Here's a quick Typescript with Express tutorial from LogRocket.

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!

Wrapping Up

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/ 👈

And here is this post on our blog!

Resources

TypeScript Handbook

TypeScript Bootstrap (Lots of links to different tools and platforms)

VSCode

ts-node

TSDX

TailwindCSS

Angular

Create React App

Gatsby

Next.js

Express

Fastify

NestJS

---

You are at the end of the post so legally you have to:
🌟 Follow me on Twitter 🌟

Comments

[Junxiao Shi]

It ain't 2021 edition if TypeScript is not configured to emit ES Modules.
The leading JavaScript coder, @sindresorhus , is switching all the packages to ESM-only.
If you create CommonJS project, you can't import his packages anymore.

[Peter Franken]

The leading JavaScript coder [...] you can't import his packages anymore

Businesses don't care about this at all, not even a little bit.

Dev wants to convert to ES Modules only > manager requests time/cost estimate > dev puts together gigantic list of internal codebases that would have to be converted > manager asks "and all that work only so you can write import x from x, instead of x = require(x) and use packages from your internet hero? No..."

[Craig Holliday]

What’s a good post from them showing how to configure ESM-only and what does backwards compatibility look like?

[Junxiao Shi]

I wish I know!
My own library is ESM only since (almost) the beginning, but all my dependencies are either ESM+CJS or CJS-only.

I went through significant efforts making all these things happy:

• Node
• TypeScript
• Jest
• webpack
• Parcel bundler
• Puppeteer

Now @sindresorhus went ESM-only, and Jest is throwing errors.

[Daniil]

In addition, there's tooling called Vite. Supports TS for templates

[Christos Dimitroulas]

No matter what platform or tool you are using, at some point, they will use a TypeScript compiler because at the end of the day we still have to execute JavaScript.

Unless you use deno! In that case you can execute Typescript directly :D

[QuaOs]

Or you can try Deno. It supports TypeScript out of the box.