CODEWITHSUNDEEP
reactjstypescriptvite
NetYogi
NetYogi

Reputation: 601

How do I add TypeScript to my existing Vite (React) application?

I have an existing react app which I created using Vite. I used the react template in Vite-

yarn create vite my-react-app --template react

As the project progressed, it seemed a good idea to include TypeScript for stricter type checking. I had earlier included TypeScript in one of my existing projects using create-react-app with the help of this clear documentation. I tried incorporating the same in my Vite app. I executed the following code in my terminal -

yarn add typescript @types/node @types/react @types/react-dom @types/jest

I renamed my .jsx files to .tsx and my vite.config.js to vite.config.ts and restarted my vite server.

But to my utter dismay, the app stopped working. I couldn't find any documentation in the vite docs for adding TypeScript to an existing app. I also searched in the Vite Github community, but couldn't find anything relatable there. I couldn't find anything related to this on the web too. Most of the stuff is on CRA and Typescript.

Any help on this would be appreciated. Thanks!

Upvotes: 8

Views: 18231

Answers (4)

Dominik Bisiakowski
Dominik Bisiakowski

Reputation: 399

You just need to add typescript and tsconfig.json file

and

npm install -D typescript


        {
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

Vite support ts by default

Upvotes: 1

juanqp
juanqp

Reputation: 11

Adding to what NetYogi said before, it's also important to mention that main.jsx must be renamed to main.tsx as well.

Full description with details of the 6 involved steps are in the comment I posted in Vite repo

https://github.com/vitejs/vite/discussions/6799#discussioncomment-5393727

Upvotes: 0

lithion
lithion

Reputation: 109

Also a tip: anything related with typescript installs should be put into devDependencies. Install all packages with -D flag. After all - all the ts and tsx files get compiled into .js

Upvotes: 1

NetYogi
NetYogi

Reputation: 601

I asked the question in various other forums as well. I arrived at the correct answer a few days back and would like to share it here.

Firstly, install TypeScript and types for react and react-dom,

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

Next, rename the vite.config.js file to vite.config.ts.

Thirdly, configure your tsconfig.json as follows,

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

,and a tsconfig.node.json,

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

Next, create a file named vite-env.d.ts inside your src/ folder and copy and paste the following (with the three slashes at the beginning):

/// <reference types="vite/client" />

This creates a type file for the vite client.

Lastly, in your index.html, change the name of your index.jsx to index.tsx as,

<script type="module" src="/src/index.tsx"></script>

TypeScript should now work on your Vite React project.

Click on this link for the Q&A in Vite's GitHub

Upvotes: 27

Related Questions