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:
npm install typescript @types/react @types/react-dom --save-devnpm install @typescript-eslint/eslint-plugin --save-devnpm install @typescript-eslint/parser --save-dev
Add three TypeScript configuration files; one for the browser environment, one for the Node environment, and one to merge both configurations:
touch tsconfig.json tsconfig.app.json tsconfig.node.json
In the TypeScript file for the browser environment (tsconfig.app.json) include the following configuration:
{"compilerOptions": {"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo","target": "ES2020","useDefineForClassFields": true,"lib": ["ES2020", "DOM", "DOM.Iterable"],"module": "ESNext","skipLibCheck": true,/* Bundler mode */"moduleResolution": "bundler","allowImportingTsExtensions": true,"isolatedModules": true,"moduleDetection": "force","noEmit": true,"jsx": "react-jsx",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true,"noUncheckedSideEffectImports": true},"include": ["src"]}
Then In the TypeScript file for the Node environment (tsconfig.node.json) include some more configuration:
{"compilerOptions": {"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo","target": "ES2022","lib": ["ES2023"],"module": "ESNext","skipLibCheck": true,/* Bundler mode */"moduleResolution": "bundler","allowImportingTsExtensions": true,"isolatedModules": true,"moduleDetection": "force","noEmit": true,/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true,"noUncheckedSideEffectImports": true},"include": ["vite.config.ts"]}
Finally merge both configurations into the main TypeScript configuration file:
{"files": [],"references": [{ "path": "./tsconfig.app.json" },{ "path": "./tsconfig.node.json" }]}
Next, rename all JavaScript files (.jsx) to TypeScript files (.tsx).
mv src/main.jsx src/main.tsxmv src/App.jsx src/App.tsx
And in your index.html file, reference the new TypeScript file instead of a JavaScript file:
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + React + TS</title></head><body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body></html>
You may also need a new vite-env.d.ts file in your project's root with the following content:
/// <reference types="vite/client" />
You may also need to adjust your eslint.config.js file to include TypeScript:
import js from '@eslint/js';import globals from 'globals';import reactHooks from 'eslint-plugin-react-hooks';import reactRefresh from 'eslint-plugin-react-refresh';import tseslint from 'typescript-eslint';export default tseslint.config({ ignores: ['dist'] },{extends: [js.configs.recommended,...tseslint.configs.recommended,],files: ['**/*.{ts,tsx}'],languageOptions: {ecmaVersion: 2020,globals: globals.browser,},plugins: {'react-hooks': reactHooks,'react-refresh': reactRefresh,},rules: {...reactHooks.configs.recommended.rules,'react/prop-types': 'off','react-refresh/only-export-components': ['warn',{ allowConstantExport: true },],},});
Optionally if you want to resolve absolute paths from your tsconfig.json file, use the following vite-tsconfig-paths plugin:
import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';import viteTsconfigPaths from 'vite-tsconfig-paths';export default defineConfig({plugins: [react(), viteTsconfigPaths()],});
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.
