Learn how to configure ViteJS and enable Type Checking
4 snippets
11 mins
Fabio Biondi
Google Developer Expert Microsoft MVP
This is a step-by-step tutorial so you can try to reproduce it on your machine.
The only requirement is the latest LTS version of Node or, at least, it should be greater than 18.0.0.
In this book you can try all the examples directly using the code playgrounds that you will find in the lessons.
However, in case you prefer a better experience using your favorite IDE, below is a guide that will help you set up a TypeScript project in less than a minute using Vite .
Vite is a next-generation frontend build tool that offers an incredibly fast and lean development experience.
It’s built with speed and simplicity in mind, using ES modules for fast hot module replacement (HMR) in development and optimized builds with Rollup.
For TypeScript projects, ViteJS is a great tool to learn and work with because it integrates smoothly, allowing you to transpile TypeScript efficiently while keeping your dev environment lightning-fast.
ViteJS doesn't emit TypeScript errors during development mode because it's designed to prioritize speed by skipping type-checking during the dev server process.
In dev mode, Vite leverages esbuild for its ultra-fast bundling and transformation, which doesn't handle TypeScript type-checking but only transpiles the code.
Type errors are only caught during the actual build process when Vite uses the TypeScript compiler (tsc) for type-checking, ensuring that any type issues are flagged before the production build is created.
The problem
In fact, you can see there are no notifications in your terminal if there are TypeScript errors.
You can try it opening src/main.ts and replacing the current code with the following one:
src/main.ts
The image below shows how my IDE, Webstorm , highlights the error in the editor while the terminal does not display any warning:
Although the most modern IDEs and code editors highlight the TypeScript errors, a code change could affect many files and you might not always notice the errors.
This separation allows for a faster feedback loop during development but honestly I prefer to see compile errors while I write code: they provide a lot of information about my mistakes and save me bad surprises at the build phase.
It's a personal choice and you are free not to follow the same approach.
The Fix
There are several ways to type-check your code:
1
manual run tsc (the TypeScript compiler) in a completely new terminal
2
configure your editor to run TypeScript compiler
3
run a build with npm run build (since Vite is configured to type check the code at build time)
4
or, my favorite one: you can install the vite-plugin-checker to enable type checking in both, "Vite Serve" and "Build Mode":
