Adding TypeScript to existing create-react-app app

Question

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?

Saskatoon

create-react-app.dev/docs/adding-typescript – Passerine

Answer 1

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 in the docs.

If you are having trouble, the following from the troubleshooting section of the docs might help:

Troubleshooting

If your project is not created with TypeScript enabled, npx may be using a cached version of create-react-app. Remove previously installed versions with npm uninstall -g create-react-app or yarn global remove create-react-app (see #6119).

Ephod

This works pretty smooth. One thing I experienced when moving from a pre-existing ES-CRA to TS-CRA is having to change ESLINT settings: robertcooper.me/… – Defrost

What about tsconfig file? Don't we need to add that? – Whiteman

@iRohitBhatia the documentation says "You are not required to make a tsconfig.json file, one will be made for you", but this is only true for new projects as the file is not created for existing projects. what should we do for existing projects... just create one? – Priggish

digging a litter deeper, "CRA automatically creates an tsconfig.json file for you when it notices a .ts file in your source folder", it will automatically create that file for you. – Priggish

it doesn't work, Module not found: Error: Can't resolve show up – Aekerly

@Aekerly yes it isn't work – Circumlunar

@Aekerly See Neisam's answer. I had the same issue. CRA doesn't seem to consistently create a tsconfig.json file, so you might just have to manually add it. – Pulverable

Answer 2

If you want to add TypeScript to the existing react app use below command

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

Rename at least one file from js/jsx to .ts/tsx. For example, rename index.js to index.ts or index.tsx and then start the server. This will generate the tsconfig.json file automatically and you are ready to write React in TypeScript.

Linkwork

if I rename index.js, no error happened, but if I do it to other files, this error show up Module not found: Error: Can't resolve .... Also there is notsconfig.json file generated – Aekerly

@Aekerly you need to manually initialize typescript npx tsc --init and set "jsx": "react" in tsconfig.json – Ruler

I still have to add the TypeScript dependencies to the package.json: "@types/jest": "^27.5.2", "@types/node": "^16.18.13", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", – Practiced

Answer 3

You can add typescript to an existing project using one of the following commands:

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

or

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

You can read more here

But the problem is when you are changing a file except index.js like App.js to App.tsx it gives you an error that module not found error can't resolve './App' . The source of this issue is lacking a tsconfig.json file. So by creating one the error would be removed. I recommend using the below tsconfig:

 {
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "exclude": [
    "node_modules"
  ]
}

Dickman

you dont use --save. but --save-dev – Rigi

Answer 4

Add TypeScript to an existing React 18 project using official guide

• Add type definitions

  npm install @types/react @types/react-dom --save-dev
  

• Add tsconfig.json. For example, take a look at the sample app.

  {
    "compilerOptions": {
      "target": "ES2022",
      "module": "ES2022",
      "esModuleInterop": true,
      "forceConsistentCasingInFileNames": true,
      "strict": true,     // This makes noImplicitAny as true
      "lib": [
        "ES2022",
        "dom"             // This is important
      ],
      "jsx": "preserve"   // This is important
    }
  }
  

• Change filename extensions. If you have JSX in your file, change its extension to .tsx, otherwise change it to .ts.

  For example:

  • Change App.js to App.tsx
  • Change index.js to index.tsx

• Start the app

  npm start
  

• Fix type errors

  For example: This error in index.tsx

  For eg: use non-null assertion operator

  const rootElement = document.getElementById("root")!;
  

Your app should work just fine at this point.

Izzy

Answer 5

This answer would have been the best alternative at the time of writing, but now CRA has built-in TS support. See the top answer. I'll keep this for historical purposes.

---

You can use react-app-rewired to add typescript to your project's webpack config, which is a better alternative to ejecting.

If you're not specifically sure how to add typescript from there, here's a guide on how to do that.

Sunbreak

It seems ejecting is not necessary anymore. – Defrost

Answer 6

There is a recent pull request adding Typescript. It's not merged yet.

Also, the next major version of CRA will upgrade to Babel 7, which supports Typescript.

So I'd suggest you to wait a few weeks. It should be really easy then to add TS to any CRA project.

Sparky

CRA 2 has been released, but it seems that support for Typescript has been postponed: news.ycombinator.com/item?id=18118349 – Whiteeye

Answer 7

Nothing works if decided to add typescript in an existing create-react-app project. Finally, I created a brand new throw-away application using a typescript template and took the following tsconfig.json, and pasted it into my existing project. all good now but it is a weird solution.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Blimp

It is not generating tsconfig.json for me either. – Belgium

I had to do this too. Before, it would only work if I only changed src/index.js to src/index.tsx. If I changed anything else, it would break. Needed to add a tsconfig file myself. – Fattish

Answer 8

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

then Create a tsconfig.json file in root folder

 {
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "exclude": [
    "node_modules"
  ]
}

Lucas

Answer 9

After checking your issue I created a template using React, Typescript, Tailwind and Storybook

https://github.com/dsilva2401/react-typecript-tailwind-storybook

Noncombatant

Your answer should inform the asker how to solve a problem. – Dawnedawson

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Mylo

Answer 10

To start a new Create React App project with TypeScript, you can run:

npx create-react-app my-app --template typescript

Petrinapetrine

The question literally states that he has an existing project that he'd like to convert. – Rout

haji enjoori rotbe nemigiri. – Seeder