Adding TypeScript to existing create-react-app app

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.

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"
  ]
}

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.

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.

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.

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"
  ]
}

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"
  ]
}

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

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