Integrate TypeScript into a React Project with Vite 🚀

Vite is a fast and modern build tool that has quickly become a popular choice for building web applications. It provides lightning-fast development startup and hot module replacement (HMR) for React applications. In this tutorial, I will guide you through how to set up TypeScript in a React project created with Vite.

Requirements

Before we begin, make sure you have the following:

1. Node.js: You need Node.js installed. You can download the latest version from the official Node.js website.
2. Vite: Vite simplifies the process of building modern web applications, including React with TypeScript.

Step 1: Create a New React Project with Vite

If you're starting from scratch, the easiest way to create a React project with TypeScript using Vite is to use the following commands:

1.1. Create a Vite Project
Open your terminal and run the following command to create a new React + TypeScript project using Vite:

npm create vite@latest my-vite-app --template react-ts

• my-vite-app is the name of your project (you can change this to whatever you prefer).
• --template react-ts specifies that you want to use React with TypeScript.

1.2. Navigate to the Project Directory
After the project is created, move into the project directory:

cd my-vite-app

1.3. Install Dependencies
Now, install the required dependencies:

npm install

1.4. Run the Development Server
Finally, run the development server to check if everything is working:

npm run dev

Your React app should now be running at http://localhost:3000 with TypeScript support out of the box!

What the Vite React Template Provides
The react-ts template provided by Vite sets up the necessary TypeScript configuration and installs the required dependencies for a React app. The essential files you'll see include:

• tsconfig.json: TypeScript configuration file.
• vite.config.ts: Vite configuration file for building your app.
• .tsx extension support for React components.
• Preconfigured support for JSX with TypeScript.

Step 2: Adding TypeScript to an Existing React + Vite Project

If you already have a React project created with Vite and you want to add TypeScript, follow these steps:

2.1. Install TypeScript and Type Definitions
In your existing Vite React project, run the following commands to install TypeScript and type definitions for React:

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

These packages provide TypeScript itself and type definitions for React and React DOM.

2.2. Create or Update the tsconfig.json file
After installing TypeScript, create or update the tsconfig.json file in the root directory. You can use the following basic configuration:

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "lib": ["dom", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

2.3. Rename Your Files to .tsx
In a TypeScript React project, the component files need to have the .tsx extension (since they include JSX syntax). If you have any .jsx or .js files in your project, rename them to .tsx or .ts (if they don’t contain JSX).
For example:

• App.jsx → App.tsx
• index.jsx → index.tsx

2.4. Update Your React Components with TypeScript
Now that TypeScript is set up, you can start adding types to your React components. Here’s how to use TypeScript with functional components and typed props.
Example: Functional Component with Typed Props

import React from 'react';

// Define the prop types using an interface
interface GreetingProps {
  name: string;
  age: number;
}

const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
};

export default Greeting;

In this example:

• GreetingProps defines the types of the props passed into the component.
• React.FC<GreetingProps> is used to specify that this is a React functional component with props of type GreetingProps.

Step 3: Run and Verify the Project

After setting everything up, run the development server to ensure that TypeScript is properly integrated into your Vite React app:

npm run dev

Visit http://localhost:3000 in your browser, and you should see your React app running with TypeScript. If you open your code editor, you’ll get full TypeScript support, including type checking and autocompletion.

Step 4: Optional Configuration for TypeScript

If you want to further configure TypeScript for your project, there are a few options in the tsconfig.json file that you can tweak depending on your needs:
1. Strict Mode: If you want TypeScript to enforce stricter type checks, make sure "strict": true is enabled. This will help catch potential bugs and improve code quality.
2. Path Aliases: You can use path aliases to make imports cleaner and avoid relative import paths (e.g., ../../components/Button). Here's an example of how to configure it:

"compilerOptions": {
  "baseUrl": "./src",
  "paths": {
    "@components/*": ["components/*"]
  }
}

After setting this up, you can import components like this:

import Button from '@components/Button';

3. ESLint and Prettier: For linting and code formatting, you can integrate ESLint and Prettier to ensure consistent code style and quality. There are various plugins available for TypeScript and React.

Conclusion

Integrating TypeScript into your React project using Vite is straightforward and gives you the benefit of type safety and enhanced tooling. By using TypeScript, you get features like type inference, type checking, and better developer experience through autocompletion and error catching at compile time.
In this guide, I’ve covered how to:

• Set up a new React project with TypeScript using Vite.
• Add TypeScript to an existing React + Vite project.
• Write React components with TypeScript.
• Run and verify your TypeScript React app.

Now you’re ready to build more scalable, maintainable React apps with TypeScript!

---

Hope you success in integrating TypeScript into your React project using Vite! If you have any questions, don't hesitate to ask for more help 🤗.