<aside> 💡

When adding TypeScript to an existing Vite React project, you'll need to install a few specific packages to ensure TypeScript works correctly with your setup.

Here's a step-by-step guide:

</aside>

1. Install TypeScript

TypeScript is the main package you'll need. Install it with:

npm install typescript --save-dev

2. Install TypeScript Types for React

React needs its type definitions, so install them with:

npm install @types/react @types/react-dom --save-dev

These provide the TypeScript definitions for React and React DOM.

3. Optional: Install ESLint for TypeScript (if using ESLint)

If you want to lint your TypeScript code, make sure you have ESLint and add the TypeScript plugin:

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

4. Check Your Vite Plugin

If you're using the default Vite plugin for React, it supports TypeScript out of the box. No extra plugins are necessary. However, if you're using other plugins, ensure they work with TypeScript.

5. Update Configuration

After installing the dependencies: