How to Migrate Your React Project to TypeScript
Bekah Hawrot Weigel
As developers, one of the most important parts of the process is to ensure the reliability of the software that you’re creating. If you’re working with a team, it’s important to maintain readability, consistency, and dependability. One way to do this is to use TypeScript.
Now if you’re like me, you might already have a project written with a frontend framework that doesn’t use TypeScript. Never fear, TypeScript allows you to incrementally migrate your project. Today, we’re going to begin migrating my React project, Affirmation, to TypeScript.
5 Reasons to Migrate to TypeScript
There are a lot of reasons–including the ones above–to migrate to TypeScript, but in case those didn’t convince you, here are five more:
Decreases bugs in your code
Improves onboarding of new contributors
Decreases the need for tests
Often makes projects easier to maintain
Allows you to remove technical debt more quickly
Getting Started
Since we’re building on an existing project, here are some resources to familiarize yourself with:
The first thing we want to do is get the app running as is so we can ensure that as we upgrade, we won’t be making any breaking changes.
Run the React Project
Clone the repository.
Create a Deepgram API Key with an admin or owner role - get it here.
Create a file called .env and add DG_KEY='your-API-key' Run npm i in your terminal.
Run npm run start in your terminal.
Run node server/server.js in your terminal.
If it doesn’t automatically open, navigate to http://localhost:3000/. You should see the project running.
Adding TypeScript
In your terminal run npm install --save typescript @types/node @types/react @types/react-dom @types/websocket.
At the project root level, create a new file called tsconfig.json. The tsconfig.json file allows you to add specifications and compiler options for the project. You can either create the file yourself or run npx tsc --init in your terminal. With the second option, you’ll see that there are some active default options and a lot of options commented out that you can uncomment as needed.
Within our tsconfig.json you’ll see that we’re using "strict": true. When using this within the compilerOptions, TypeScript will validate as much as it can. This means there will be more checking, and more to update as you migrate your React project to TypeScript. But this also means you’ll get the most benefit from using TypeScript.
Migrate React to TypeScript
Now that everything is up and running, we can start our migration. Because the main file we’re working with is Affirmation.js, we’re going to start there. Rename this file to Affirmation.tsx and then open the file.
We should immediately see three lines that need to be updated, lines 9 and 12 should have an indication that the e needs to be typed, and line 58 should also indicate that socketRef.current needs to be addressed.
If you’re working in VSCode, you can hover over each of these areas to get more details about the problem. Let’s take them one at a time.
If we hover over the e on line 9, we see this message:
Now, we want to avoid having an any type. That doesn’t give us the protection that we want from TypeScript. So let’s take a look at the code to help us understand what this event is doing.