DEV Community

Cover image for Migrating a Vite / React app from JavaScript to TypeScript
Rashid Shamloo
Rashid Shamloo

Posted on

Migrating a Vite / React app from JavaScript to TypeScript

#vite #javascript #typescript #tutorial

When you first make a React app with Vite, you have the option to choose either JavaScript or TypeScript as your preferred language. but what if you start your app in JavaScript and midway through, change your mind and want to use TypeScript instead? well in that case you have two options:

1. Make a new TypeScript app and copy everything from your old app to the new one

  • Copy any changes you've made and the lines for any package you've installed under dependencies and devDependencies from the package.json file in your old app to your new app's package.json file and run npm install to install them.

  • Copy your App.jsx and main.jsx files to your new app and change the extension to .tsx

  • In main.tsx add as HTMLElement after document.getElementById('root')

...
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
...
Enter fullscreen mode Exit fullscreen mode

  • Copy everything else like utility functions and static resources to the new app

  • Copy all the changes you've made to the config files of any other package you've installed over to the config files in your new project

  • Copy the component files, change the file extension from .jsx to .tsx, and modify them to work with TypeScript

2. Make a new TypeScript app but copy the needed files back to your old app instead

  • Change the extension of your App.jsx and main.jsx to .tsx

  • In main.tsx add as HTMLElement after document.getElementById('root')

...
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
...
Enter fullscreen mode Exit fullscreen mode

  • In the index.html file, find the line <script type="module" src="/src/main.jsx"></script> and change main.jsx to main.tsx

  • Install TypeScript packages

npm install -D typescript @types/react @types/react-dom
Enter fullscreen mode Exit fullscreen mode
  • Copy these files from your new app to your old one 
tsconfig.json
tsconfig.node.json
src/vite-env.d.ts
Enter fullscreen mode Exit fullscreen mode

  • Change the extension of the vite.config.js file from .js to .ts

  • Change the extension of your components from .jsx to .tsx and modify them to work with TypeScript

🎉 In the end, cross your fingers, run your app, and hope everything works!

Source: Discussion on Vite GitHub

Top comments (5)

Collapse
 
duriandan profile image
Huy Vu Nguyen •

Thank you ! This is the most concise migration guide I found !

Collapse
 
rashidshamloo profile image
Rashid Shamloo •

You're welcome :)

Collapse
 
heionnn_ profile image
Heion. •

How about if I want the typescript go back to javascript? is it possbile?

Collapse
 
rashidshamloo profile image
Rashid Shamloo •

You can try doing the reverse for each step (e.g. tsx extension to jsx), but your main problem will be modifying your files and removing all the type definitions.
Also, There's no reason for wanting to go back to JavaScript :)

Collapse
 
parthjadhao1 profile image
Parth Jadhao • • Edited

i followed second method and i get given beleow error what should i do please help me
Image description