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

> Learn how to use TypeScript with Create React App easily. This guide covers setup and configuration for efficient React development with strong typing.

- Repository: [Meta/create-react-app](https://github.com/facebook/create-react-app)
- Tags: how-to-guide
- Published: 2026-02-26

---

**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:

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

```

Or using Yarn:

```bash
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`](https://github.com/facebook/create-react-app/blob/main/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`](https://github.com/facebook/create-react-app/blob/main/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`](https://github.com/facebook/create-react-app/blob/main/createReactApp.js) (lines 516-527), this involves running the [`scripts/init.js`](https://github.com/facebook/create-react-app/blob/main/scripts/init.js) file bundled within `cra-template-typescript`, which:

1. Copies template files (including [`tsconfig.json`](https://github.com/facebook/create-react-app/blob/main/tsconfig.json)) into your project root
2. Sets up the default directory structure with [`src/index.tsx`](https://github.com/facebook/create-react-app/blob/main/src/index.tsx)
3. Configures ESLint to recognize TypeScript syntax

The generated [`tsconfig.json`](https://github.com/facebook/create-react-app/blob/main/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:

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

```

Or with Yarn:

```bash
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):

```bash
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`](https://github.com/facebook/create-react-app/blob/main/tsconfig.json) file if one doesn't exist, as documented in [`docusaurus/docs/adding-typescript.md`](https://github.com/facebook/create-react-app/blob/main/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:

```bash
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`](https://github.com/facebook/create-react-app/blob/main/scripts/init.js) to copy [`tsconfig.json`](https://github.com/facebook/create-react-app/blob/main/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`](https://github.com/facebook/create-react-app/blob/main/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`](https://github.com/facebook/create-react-app/blob/main/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`](https://github.com/facebook/create-react-app/blob/main/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`](https://github.com/facebook/create-react-app/blob/main/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.