How to Use TypeScript with Create React App: A Complete Guide

Create React App supports TypeScript out of the box through a dedicated template that automatically configures the build pipeline, compiler options, and type definitions.

When you want to use TypeScript with Create React App, you can either start a new project with the official TypeScript template or migrate an existing JavaScript project by installing the necessary type packages. The build system in react-scripts handles .ts and .tsx files automatically without requiring manual webpack configuration.

Creating a New TypeScript Project

The fastest way to start using TypeScript is to specify the --template typescript flag when creating your application:

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

Or using Yarn:

yarn create react-app my-app --template typescript

This command installs the cra-template-typescript package, which scaffolds a project with a pre-configured tsconfig.json, sample .tsx components, and all necessary type definitions for React, Node, and Jest.

How the TypeScript Template Works

Understanding the internal mechanics helps troubleshoot configuration issues and explains why no manual setup is required.

Template Resolution

When you pass --template typescript, the CLI in packages/create-react-app/createReactApp.js resolves this shorthand to the official cra-template-typescript npm package (lines 124-136). The code explicitly maps the template flag to a package name, ensuring you receive the Facebook-maintained TypeScript configuration rather than a community template.

Project Bootstrapping

After installing react, react-dom, and react-scripts, the CLI executes the template's initialization script. According to createReactApp.js (lines 516-527), this involves running the scripts/init.js file bundled within cra-template-typescript, which:

1. Copies template files (including tsconfig.json) into your project root
2. Sets up the default directory structure with src/index.tsx
3. Configures ESLint to recognize TypeScript syntax

The generated tsconfig.json is optimized for CRA's build system, with strict mode enabled and paths configured to resolve modules correctly through the webpack dev server.

Adding TypeScript to an Existing CRA Project

If you already have a JavaScript-based Create React App project, you can incrementally adopt TypeScript without ejecting.

First, install the core TypeScript compiler and type definitions:

npm install --save-dev typescript @types/node @types/react @types/react-dom @types/jest

Or with Yarn:

yarn add --dev typescript @types/node @types/react @types/react-dom @types/jest

Next, rename your entry point and any components from .js to .tsx (or .ts for utility files):

mv src/index.js src/index.tsx
mv src/App.js src/App.tsx

When you run npm start or yarn start, the development server detects the presence of TypeScript and automatically generates a tsconfig.json file if one doesn't exist, as documented in docusaurus/docs/adding-typescript.md (lines 40-44). This default configuration extends the sensible CRA defaults, allowing you to begin type-checking immediately.

Verifying Your TypeScript Setup

To confirm that TypeScript is properly integrated into the build pipeline:

npm run build

A successful build without Babel or module resolution errors indicates that react-scripts is correctly compiling your .tsx files through the TypeScript compiler. The production bundle will include type-stripped JavaScript while preserving all runtime functionality.

Summary

• New projects: Use npx create-react-app my-app --template typescript to scaffold a fully configured TypeScript environment with cra-template-typescript.
• Template mechanics: The CLI resolves the --template flag to cra-template-typescript, then executes scripts/init.js to copy tsconfig.json and sample files.
• Existing projects: Install typescript and @types/* packages, rename files to .tsx, and run the dev server to auto-generate configuration.
• Zero configuration: react-scripts handles all webpack, Babel, and Jest integration automatically—no ejecting required.

Frequently Asked Questions

How do I enable strict mode in Create React App TypeScript?

Strict mode is enabled by default in the tsconfig.json generated by cra-template-typescript. If you need to adjust specific strictness flags (like strictNullChecks or noImplicitAny), edit the compilerOptions section in your tsconfig.json. The development server will automatically pick up these changes on the next start.

Can I mix JavaScript and TypeScript files in the same project?

Yes. Create React App supports incremental adoption, allowing .js and .tsx files to coexist in the src directory. The build system processes each file according to its extension, transpiling TypeScript through the TypeScript compiler and JavaScript through Babel. This makes it safe to migrate large codebases file-by-file without a complete rewrite.

What should I do if TypeScript compilation errors prevent my app from starting?

By default, Create React App treats type errors as warnings in development (the app compiles and runs) but fails the production build (npm run build). If you see hard errors during npm start, check that your tsconfig.json hasn't been corrupted and that all @types/* packages match your installed library versions. You can also run npx tsc --noEmit separately to isolate type-checking from the build process.

Where is the TypeScript configuration file located?

The tsconfig.json file is placed in your project root directory immediately after running create-react-app with the TypeScript template, or auto-generated in the root when you first start the dev server after adding TypeScript to an existing project. This file controls compiler options, target ECMAScript version, and module resolution settings for the entire application.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}