One of my biggest annoyances with JavaScript is its lack of a strong type system. We’ve all seen the crazy memes around it – 0 == [], new Array(5).join("a"-10) + " Batman!", and more. Trying to develop with libraries gets really frustrating when you don’t know, until runtime, whether a function wants a String, a number, or an object of some sort.

TypeScript is an attempt by Microsoft to make JavaScript easier to develop, and it’s good. It’s really good. The only hitch is that browsers don’t understand it, so how do you get something from a TypeScript source file to a JavaScript file? That’s where you normally would use something like Babel with Webpack, or Gulp in order to process the .ts files.

So why Vite?

Vite is a development server that transparently serves your TypeScript files during development, so you never have to continually rebuild your codebase in order to test your TypeScript. When you make a change to a source file, it automatically is applied to your rendered version in the browser! It’s really handy.

One of the big strengths of Vite is that it natively handles ES6 development (so, access to modules and import maps), and automatically converts your TypeScript into JavaScript. Oh, and did I mention that you can import your CSS into your source files so it’s automatically compiled into your project? It helps reduce the number of HTTP requests made during production.

How Do I Get Vite?

npm create vite@latest -- --template=vanilla-ts project-name-here
cd project-name-here && npm i
npm run dev

That will use the Vanilla TypeScript template to create a project, install the dependencies and launch your application at localhost:5173. Any changes you make to src/main.ts will immediately be shown in your browser tab.