Adding TypeScript
Note: this feature is available with
react-scripts@2.1.0and higher.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Installation
To start a new Create React App project withTypeScript, you can run:
npx create-react-app my-app --template typescript
or
yarn create react-app my-app --template typescript
If you've previously installed
create-react-appglobally vianpm install -g create-react-app, we recommend you uninstall the package usingnpm uninstall -g create-react-apporyarn global remove create-react-appto ensure thatnpxalways uses the latest version.Global installs of
create-react-appare no longer supported.
To addTypeScript 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
Next, rename any file to be a TypeScript file (e.g.src/index.js tosrc/index.tsx) and create tsconfig.json if it's not in the root of your projecttsconfig.json file.
Finallyrestart your development server!
Type errors will show up in the same console as the build one. You'll have to fix these type errors before you continue development or build your project. For advanced configuration,see here.
Getting Started with TypeScript and React
You are not required to make atsconfig.json file, one will be made for you. You are allowed to edit the generated TypeScript configuration.
- TypeScript Handbook
- TypeScript Example on React
- React + TypeScript Cheatsheets has a good overview on how to use React with TypeScript
Troubleshooting
If your project is not created with TypeScript enabled, npx may be using a cached version ofcreate-react-app. Remove previously installed versions withnpm uninstall -g create-react-app oryarn global remove create-react-app (see#6119).
If you are currently usingcreate-react-app-typescript, seethis blog post for instructions on how to migrate to Create React App.
Constant enums and namespaces are not supported, you can learn about the constraints ofusing Babel with TypeScript here.