@tsconfig/create-react-app

A base TypeScript configuration specifically designed for Create React App projects. This package provides pre-configured TypeScript compiler options optimized for React development with Create React App toolchain, including DOM libraries, ESNext module resolution, JSX React transformation, and strict type checking.

Package Information

• Package Name: @tsconfig/create-react-app
• Package Type: npm
• Language: TypeScript Configuration
• Installation: npm install --save-dev @tsconfig/create-react-app

Core Imports

This package does not provide programmatic imports. Instead, it's used by extending the configuration in your TypeScript config file:

{
  "extends": "@tsconfig/create-react-app/tsconfig.json"
}

Basic Usage

Install the package as a development dependency and extend it in your tsconfig.json:

npm install --save-dev @tsconfig/create-react-app

Create or update your tsconfig.json:

{
  "extends": "@tsconfig/create-react-app/tsconfig.json",
  "compilerOptions": {
    // Optional: Override specific options
  },
  "include": [
    "src/**/*"
  ]
}

Related Packages

This package is part of the @tsconfig/* family of TypeScript configuration bases. Other popular configurations include:

• @tsconfig/recommended - General recommended TypeScript settings
• @tsconfig/node20 - Node.js 20 optimized configuration
• @tsconfig/next - Next.js framework configuration
• @tsconfig/strictest - Strictest possible TypeScript settings

All packages follow the same extension pattern and can be combined or overridden as needed.

Capabilities

Base Configuration Extension

Provides a complete TypeScript configuration base that can be extended in Create React App projects.

{
  "extends": "@tsconfig/create-react-app/tsconfig.json"
}

The base configuration includes the following compiler options:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "bundler",
    "target": "es2015",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true
  }
}

Configuration Override

Override specific compiler options while maintaining the base configuration.

{
  "extends": "@tsconfig/create-react-app/tsconfig.json",
  "compilerOptions": {
    "target": "es2017",
    "strict": false,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Path Configuration

Add custom path mappings for module resolution:

{
  "extends": "@tsconfig/create-react-app/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"],
      "@assets/*": ["src/assets/*"]
    }
  }
}

Include/Exclude Configuration

Specify which files to include or exclude from compilation:

{
  "extends": "@tsconfig/create-react-app/tsconfig.json",
  "include": [
    "src/**/*",
    "custom-types/**/*"
  ],
  "exclude": [
    "src/**/*.test.ts",
    "src/**/*.spec.ts"
  ]
}

Configuration Options

Library Configuration

{
  "lib": ["dom", "dom.iterable", "esnext"]
}

• dom: Provides DOM API type definitions
• dom.iterable: Provides iterable DOM collections
• esnext: Provides latest ECMAScript features

Module System Configuration

{
  "module": "esnext",
  "moduleResolution": "bundler",
  "target": "es2015"
}

• module: Use ESNext module system for maximum compatibility
• moduleResolution: Use bundler-compatible module resolution
• target: Compile to ES2015/ES6 for modern browser support

JSX Configuration

{
  "jsx": "react-jsx",
  "allowJs": true
}

• jsx: Use React JSX transform (React 17+ automatic runtime)
• allowJs: Allow JavaScript files to be compiled alongside TypeScript

Import/Export Features

{
  "allowSyntheticDefaultImports": true,
  "esModuleInterop": true,
  "resolveJsonModule": true
}

• allowSyntheticDefaultImports: Allow default imports from modules without default exports
• esModuleInterop: Enable CommonJS/ES module interoperability
• resolveJsonModule: Allow importing JSON files as modules

Development Optimizations

{
  "isolatedModules": true,
  "noEmit": true,
  "skipLibCheck": true
}

• isolatedModules: Ensure each file can be transpiled independently
• noEmit: Don't emit output files (handled by Create React App)
• skipLibCheck: Skip type checking of declaration files for faster builds

Type Checking Configuration

{
  "strict": true,
  "noFallthroughCasesInSwitch": true
}

• strict: Enable all strict type checking options
• noFallthroughCasesInSwitch: Report errors for fallthrough cases in switch statements

Types

TSConfig Schema

The configuration follows the standard TypeScript configuration schema:

interface TSConfig {
  $schema?: string;
  extends?: string | string[];
  compilerOptions?: CompilerOptions;
  include?: string[];
  exclude?: string[];
  files?: string[];
}

interface CompilerOptions {
  lib?: string[];
  module?: string;
  moduleResolution?: string;
  target?: string;
  allowJs?: boolean;
  allowSyntheticDefaultImports?: boolean;
  esModuleInterop?: boolean;
  isolatedModules?: boolean;
  jsx?: string;
  noEmit?: boolean;
  noFallthroughCasesInSwitch?: boolean;
  resolveJsonModule?: boolean;
  skipLibCheck?: boolean;
  strict?: boolean;
  baseUrl?: string;
  paths?: Record<string, string[]>;
}

Environment Compatibility

• Create React App: 3.0+
• TypeScript: 4.0+
• React: 16.8+ (JSX transform requires React 17+ for automatic runtime)
• Node.js: 12+ (for package installation)

Usage Patterns

Standard React App

Most common usage for a typical Create React App project:

{
  "extends": "@tsconfig/create-react-app/tsconfig.json",
  "include": [
    "src"
  ]
}

Monorepo Setup

For monorepo setups with shared types:

{
  "extends": "@tsconfig/create-react-app/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@shared/*": ["../shared/src/*"]
    }
  }
}

Testing Configuration

Separate configuration for test files:

{
  "extends": "@tsconfig/create-react-app/tsconfig.json",
  "compilerOptions": {
    "types": ["jest", "@testing-library/jest-dom"]
  },
  "include": [
    "src/**/*",
    "**/*.test.ts",
    "**/*.spec.ts"
  ]
}