[SOLVED] Adding TypeScript to existing create-react-app app

Issue

I’m having difficulties adding TypeScript to an already existing create-react-app application. Previously I’ve always added it before starting the project, simply by create-react-app my-app --scripts-version=react-scripts-ts, but that doesn’t work now.

The only “solution” I found here is:

1. Create a temporary project with react-scripts-ts
2. Copy tsconfig.json, tsconfig.test.json
   , tslint.json from the temporary project src folder to your project’s src folder.
3. In package.json, change all the references to react-scripts to react-scripts-ts in the scripts section.

This just seems like a weird workaround, and not very efficient. Does anyone know if it’s possible to add it in a better way than this?

Solution

As of react-scripts 2.10 you can add TypeScript to an existing project or when creating a new project.

existing project

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

…then rename your .js files to .tsx

new project

yarn create react-app my-app --template typescript

You can read more here.

Answered By – user1843640

Answer Checked By – Robin (BugsFixing Admin)