0
# @tsconfig/create-react-app
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: @tsconfig/create-react-app
7
- **Package Type**: npm
8
- **Language**: TypeScript Configuration
9
- **Installation**: `npm install --save-dev @tsconfig/create-react-app`
10

11
## Core Imports
12

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

15
```json
16
{
17
  "extends": "@tsconfig/create-react-app/tsconfig.json"
18
}
19
```
20

21
## Basic Usage
22

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

25
```bash
26
npm install --save-dev @tsconfig/create-react-app
27
```
28

29
Create or update your `tsconfig.json`:
30

31
```json
32
{
33
  "extends": "@tsconfig/create-react-app/tsconfig.json",
34
  "compilerOptions": {
35
    // Optional: Override specific options
36
  },
37
  "include": [
38
    "src/**/*"
39
  ]
40
}
41
```
42

43
## Related Packages
44

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

47
- **@tsconfig/recommended** - General recommended TypeScript settings
48
- **@tsconfig/node20** - Node.js 20 optimized configuration  
49
- **@tsconfig/next** - Next.js framework configuration
50
- **@tsconfig/strictest** - Strictest possible TypeScript settings
51

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

54
## Capabilities
55

56
### Base Configuration Extension
57

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

60
```json { .api }
61
{
62
  "extends": "@tsconfig/create-react-app/tsconfig.json"
63
}
64
```
65

66
The base configuration includes the following compiler options:
67

68
```json { .api }
69
{
70
  "$schema": "https://json.schemastore.org/tsconfig",
71
  "compilerOptions": {
72
    "lib": ["dom", "dom.iterable", "esnext"],
73
    "module": "esnext",
74
    "moduleResolution": "bundler",
75
    "target": "es2015",
76
    "allowJs": true,
77
    "allowSyntheticDefaultImports": true,
78
    "esModuleInterop": true,
79
    "isolatedModules": true,
80
    "jsx": "react-jsx",
81
    "noEmit": true,
82
    "noFallthroughCasesInSwitch": true,
83
    "resolveJsonModule": true,
84
    "skipLibCheck": true,
85
    "strict": true
86
  }
87
}
88
```
89

90
### Configuration Override
91

92
Override specific compiler options while maintaining the base configuration.
93

94
```json { .api }
95
{
96
  "extends": "@tsconfig/create-react-app/tsconfig.json",
97
  "compilerOptions": {
98
    "target": "es2017",
99
    "strict": false,
100
    "baseUrl": ".",
101
    "paths": {
102
      "@/*": ["src/*"]
103
    }
104
  }
105
}
106
```
107

108
### Path Configuration
109

110
Add custom path mappings for module resolution:
111

112
```json { .api }
113
{
114
  "extends": "@tsconfig/create-react-app/tsconfig.json",
115
  "compilerOptions": {
116
    "baseUrl": ".",
117
    "paths": {
118
      "@components/*": ["src/components/*"],
119
      "@utils/*": ["src/utils/*"],
120
      "@assets/*": ["src/assets/*"]
121
    }
122
  }
123
}
124
```
125

126
### Include/Exclude Configuration
127

128
Specify which files to include or exclude from compilation:
129

130
```json { .api }
131
{
132
  "extends": "@tsconfig/create-react-app/tsconfig.json",
133
  "include": [
134
    "src/**/*",
135
    "custom-types/**/*"
136
  ],
137
  "exclude": [
138
    "src/**/*.test.ts",
139
    "src/**/*.spec.ts"
140
  ]
141
}
142
```
143

144
## Configuration Options
145

146
### Library Configuration
147

148
```json { .api }
149
{
150
  "lib": ["dom", "dom.iterable", "esnext"]
151
}
152
```
153

154
- **dom**: Provides DOM API type definitions
155
- **dom.iterable**: Provides iterable DOM collections
156
- **esnext**: Provides latest ECMAScript features
157

158
### Module System Configuration
159

160
```json { .api }
161
{
162
  "module": "esnext",
163
  "moduleResolution": "bundler",
164
  "target": "es2015"
165
}
166
```
167

168
- **module**: Use ESNext module system for maximum compatibility
169
- **moduleResolution**: Use bundler-compatible module resolution
170
- **target**: Compile to ES2015/ES6 for modern browser support
171

172
### JSX Configuration
173

174
```json { .api }
175
{
176
  "jsx": "react-jsx",
177
  "allowJs": true
178
}
179
```
180

181
- **jsx**: Use React JSX transform (React 17+ automatic runtime)
182
- **allowJs**: Allow JavaScript files to be compiled alongside TypeScript
183

184
### Import/Export Features
185

186
```json { .api }
187
{
188
  "allowSyntheticDefaultImports": true,
189
  "esModuleInterop": true,
190
  "resolveJsonModule": true
191
}
192
```
193

194
- **allowSyntheticDefaultImports**: Allow default imports from modules without default exports
195
- **esModuleInterop**: Enable CommonJS/ES module interoperability
196
- **resolveJsonModule**: Allow importing JSON files as modules
197

198
### Development Optimizations
199

200
```json { .api }
201
{
202
  "isolatedModules": true,
203
  "noEmit": true,
204
  "skipLibCheck": true
205
}
206
```
207

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

212
### Type Checking Configuration
213

214
```json { .api }
215
{
216
  "strict": true,
217
  "noFallthroughCasesInSwitch": true
218
}
219
```
220

221
- **strict**: Enable all strict type checking options
222
- **noFallthroughCasesInSwitch**: Report errors for fallthrough cases in switch statements
223

224
## Types
225

226
### TSConfig Schema
227

228
The configuration follows the standard TypeScript configuration schema:
229

230
```typescript { .api }
231
interface TSConfig {
232
  $schema?: string;
233
  extends?: string | string[];
234
  compilerOptions?: CompilerOptions;
235
  include?: string[];
236
  exclude?: string[];
237
  files?: string[];
238
}
239

240
interface CompilerOptions {
241
  lib?: string[];
242
  module?: string;
243
  moduleResolution?: string;
244
  target?: string;
245
  allowJs?: boolean;
246
  allowSyntheticDefaultImports?: boolean;
247
  esModuleInterop?: boolean;
248
  isolatedModules?: boolean;
249
  jsx?: string;
250
  noEmit?: boolean;
251
  noFallthroughCasesInSwitch?: boolean;
252
  resolveJsonModule?: boolean;
253
  skipLibCheck?: boolean;
254
  strict?: boolean;
255
  baseUrl?: string;
256
  paths?: Record<string, string[]>;
257
}
258
```
259

260
## Environment Compatibility
261

262
- **Create React App**: 3.0+
263
- **TypeScript**: 4.0+
264
- **React**: 16.8+ (JSX transform requires React 17+ for automatic runtime)
265
- **Node.js**: 12+ (for package installation)
266

267
## Usage Patterns
268

269
### Standard React App
270

271
Most common usage for a typical Create React App project:
272

273
```json
274
{
275
  "extends": "@tsconfig/create-react-app/tsconfig.json",
276
  "include": [
277
    "src"
278
  ]
279
}
280
```
281

282
### Monorepo Setup
283

284
For monorepo setups with shared types:
285

286
```json
287
{
288
  "extends": "@tsconfig/create-react-app/tsconfig.json",
289
  "compilerOptions": {
290
    "baseUrl": ".",
291
    "paths": {
292
      "@shared/*": ["../shared/src/*"]
293
    }
294
  }
295
}
296
```
297

298
### Testing Configuration
299

300
Separate configuration for test files:
301

302
```json
303
{
304
  "extends": "@tsconfig/create-react-app/tsconfig.json",
305
  "compilerOptions": {
306
    "types": ["jest", "@testing-library/jest-dom"]
307
  },
308
  "include": [
309
    "src/**/*",
310
    "**/*.test.ts",
311
    "**/*.spec.ts"
312
  ]
313
}
314
```