How to use TypeScript in `create-react-app` application?

Starting from react-scripts@3.3.0+ releases onwards, you can now optionally start a new app from a template by appending --template [template-name] to the creation command. If you don't select a template, it will create your project with base template. Remember that templates are always named in the format cra-template-[template-name], here you only need to fill the [template-name] section.

The typeScript can be used in your project by appending --template typescript to the creation command.

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

But if you are using React Scripting between react-scripts@2.1.0 and react-scripts@3.2.x , there is a built-in support for TypeScript. i.e, create-react-app now supports TypeScript natively. You can just pass --typescript option as below

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

# or

yarn create react-app my-app --typescript

Whereas for lower versions of react scripts, just supply --scripts-version option as react-scripts-ts while you create a new project. react-scripts-ts is a set of adjustments to take the standard create-react-app project pipeline and bring TypeScript into the mix.

Now the project layout should look like the following:

my-app/
├─ .gitignore
├─ images.d.ts
├─ node_modules/
├─ public/
├─ src/
│  └─ ...
├─ package.json
├─ tsconfig.json
├─ tsconfig.prod.json
├─ tsconfig.test.json
└─ tslint.json