Adding TypeScript support to a create-react-app project

Install the latest create-react-app.

npm i -g create-react-app

Create a react project.

create-react-app ts-react-app
cd ts-react-app

Run the eject command to expose the configuration files.

npm run eject

Install TypeScript and ts-loader.

npm i typescript ts-loader --save

Create the tsconfig.json in the project directory:

  "compilerOptions": {
        "lib": ["es2015", "es2015.promise", "es2017", "dom"],
        "types" : ["node"],
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "allowJs": false,
        "checkJs": false,
        "jsx": "react",
        "sourceMap": true,
        "outDir": "./build",
        "rootDir": "./src",
        "noEmit": false,
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true

Enable .ts and .tsx extensions in the webpack config.

Addd '.ts', '.tsx' to the "extensions" array.

Add ts-loader to the list of loaders right before the file loader.

{ test: /\.tsx?$/, loader: 'ts-loader' }

Rename src/App.js to src/App.tsx.

npm install @types/react --save
npm install @types/node --save

Remove the .svg import.

Change the import to 'import * as React from 'react';'.