Migrate a React App to TypeScript

TypeScript is a superset of JavaScript, meaning all valid JavaScript code is also valid TypeScript code. As the name says Type+Script, adds optional static typing to the language.

TypeScript saves you time catching errors and providing fixes before you run code, which makes this a great framework to write your lambda function.

Well, for me is a must use TypeScript instead of pure JavaScript.

Hands-on coding

Add TypeScript to the Project

To add TypeScript to an existing Create React App project, first install it:

npm install — save typescript @types/node @types/react @types/react-dom @types/jest

Rename any file to be a TypeScript

Rename each file from .js to .tsx and restart your development server!

Generate TypeScript configuration

npx tsc --init

Fix the type errors before you continue

Some examples:

If you have images you can use this instead of the import statement

const carouselItemExample = require(“../../assets/images/900x350.png”);
const gameBoxItemExample = require(“../../assets/images/400x400.png”);

Convert from class to className

For the input parameters you can use the quick fix

Ready to run the application 🚀

References

• https://create-react-app.dev/docs/adding-typescript/#installation