alt

TypeScript: 3 simple ways to get started

1. Vite

This is probably the fastest and easiest way to set up a TypeScript app. Vite is an amazing tool that makes it a breeze to get a project up and running, whether it be React, Vue, or plain vanilla. If you have Node.js installed, all you have to do is run

npm create vite

It will provide a simple interface with several options to choose from. Assuming you don't want to use a frontend library, you can just choose 'Vanilla'. The next option will be either JavaScript or TypeScript. Select TypeScript, hit enter, and voila, you have a TypeScript app set up.

2. esbuild

Esbuild is an extremely fast bundler, and has built-in support for TypeScript. To add it to your project, you can set up a basic package.json by running the command

npm init -y

After this, install esbuild with

npm install esbuild --save-dev

You can also install it globally by adding the -g flag.

If esbuild is installed globally, you can bundle your code by typing a simple command into your terminal:

esbuild index.ts --bundle --outfile=dist/index.js

This will provide a file in the dist folder that contains all your TypeScript converted into plain JavaScript. (This is assuming that your entry point file is called index.ts, but it can be anything you want.)

If esbuild is only installed via the package.json, it will be best to define a build script that contains the above command.

3. I'm going to bed

This way is to use webpack and babel, but it's not simple so 1.) it doesn't meed the criteria of this article, and 2.) I don't feel like writing more right now. The 2 ways above are better xD