Create React App

Create React App

  • Docs
  • Help
  • GitHub

›Building your App

Welcome

  • About Docs

Getting Started

  • Getting Started
  • Folder Structure
  • Available Scripts
  • Supported Browsers and Features
  • Updating to New Releases

Development

  • Editor Setup
  • Developing Components in Isolation
  • Analyzing Bundle Size
  • HTTPS in Development

Styles and Assets

  • Adding Stylesheets
  • Adding CSS Modules
  • Adding Sass Stylesheets
  • Adding CSS Reset
  • Post-Processing CSS
  • Adding Images, Fonts, and Files
  • Loading .graphql Files
  • Using the Public Folder
  • Code Splitting

Building your App

  • Installing a Dependency
  • Importing a Component
  • Using Global Variables
  • Adding Bootstrap
  • Adding Flow
  • Adding TypeScript
  • Adding Relay
  • Adding a Router
  • Environment Variables
  • Making a Progressive Web App
  • Creating a Production Build

Testing

  • Running Tests
  • Debugging Tests

Back-End Integration

  • Proxying in Development
  • Fetching Data
  • Integrating with an API
  • Title & Meta Tags

Deployment

  • Deployment

Advanced Usage

  • Can I Use Decorators?
  • Pre-Rendering Static HTML
  • Advanced Configuration
  • Alternatives to Ejecting

Support

  • Troubleshooting
Edit

Adding TypeScript

Note: this feature is available with react-scripts@2.1.0 and higher.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

To start a new Create React App project with TypeScript, you can run:

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

# or

yarn create react-app my-app --typescript

If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version.

To add TypeScript to a 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 to src/index.tsx) and restart 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.

To learn more about TypeScript, check out its documentation.

Note: If your project is not created with TypeScript enabled, npx may be using a cached version of create-react-app. Remove previously installed versions with npm uninstall -g create-react-app (see #6119).

Note: You are not required to make a tsconfig.json file, one will be made for you. You are allowed to edit the generated TypeScript configuration.

Note: If you are currently using create-react-app-typescript, see this blog post for instructions on how to migrate to Create React App.

Note: We recommend using VSCode for a better integrated experience.

Note: Constant enums and namespaces are not supported.

Last updated on 10/1/2019 by Kyle Bebak
← Adding FlowAdding Relay →
Create React App
Docs
Get StartedLearn React
Community
Stack OverflowSpectrumTwitterContributor Covenant
More
GitHubStar
Facebook Open Source
Copyright © 2019 Facebook Inc.