Vite with TypeScript - Robin Wieruch

A brief walkthrough on how to upgrade Vite from JavaScript to TypeScript. The tutorial assumes that you have already created a React project with Vite in JavaScript. To use TypeScript in React (with Vite), install TypeScript and its dependencies into your application using the command line:

Add three TypeScript configuration files; one for the browser environment, one for the Node environment, and one to merge both configurations:

In the TypeScript file for the browser environment ( tsconfig.app.json ) include the following configuration:

Then In the TypeScript file for the Node environment ( tsconfig.node.json ) include some more configuration:

Finally merge both configurations into the main TypeScript configuration file:

Next, rename all JavaScript files ( .jsx ) to TypeScript files ( .tsx ).

And in your index.html file, reference the new TypeScript file instead of a JavaScript file:

You may also need a new vite-env.d.ts file in your project’s root with the following content:

You may also need to adjust your eslint.config.js file to include TypeScript:

Optionally if you want to resolve absolute paths from your tsconfig.json file, use the following vite-tsconfig-paths plugin:

Restart your development server on the command line. You may encounter compile errors in the browser and editor/IDE. If you don’t see any errors in your editor/IDE when opening the renamed TypeScript files (e.g. src/App.tsx ), try installing a TypeScript plugin for your editor or a TypeScript extension for your IDE. Usually you should see red lines under all the values where TypeScript definitions are missing. That’s it. You should have a running TypeScript in Vite project now.