Q407: How to use TypeScript in create-react-app application? - React & Modern Frontend (445 Qs)

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.

css

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

bash

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

sql

    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

bash

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

# or

         yarn create react-app my-app --typescript

vbnet

     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:

java

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