DevOps

TypeScript Config (tsconfig.json) JSON Example

A production-ready tsconfig.json example for a modern TypeScript project — covering strict type checking, module resolution, path aliases, and JSX support. Annotated with field-level explanations.

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "target": "ES2022",
    "lib": [
      "ES2022",
      "DOM",
      "DOM.Iterable"
    ],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Field Reference

$schemaoptionalstring (URL)JSON Schema URL — enables IDE autocomplete and validation for tsconfig options.
compilerOptions.targetrequiredstringECMAScript version to compile down to. ES2022 is safe for all modern runtimes.
compilerOptions.strictoptionalbooleanEnables all strict type-checking flags. Highly recommended — turns on strictNullChecks, noImplicitAny, and more.
compilerOptions.moduleResolutionrequiredstring'bundler' is the modern setting for Vite/webpack projects. Use 'node' for Node.js without a bundler.
compilerOptions.noEmitoptionalbooleanTells TypeScript to only type-check, not emit JS files. Use when your bundler handles compilation.
compilerOptions.pathsoptionalobjectPath aliases — '@/*' maps to 'src/*' so imports use '@/components' instead of '../../components'.
compilerOptions.isolatedModulesoptionalbooleanRequired for Babel/SWC/esbuild transpilation — ensures each file can be compiled independently.
includeoptionalstring[]Glob patterns of files to include in compilation. Defaults to everything not excluded.
excludeoptionalstring[]Glob patterns of files to exclude. Always exclude node_modules and build output.

Variants

Node.js libraryConfig for a Node.js package — emits CommonJS, no DOM types, no JSX
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "target": "ES2020",
    "lib": [
      "ES2020"
    ],
    "module": "CommonJS",
    "moduleResolution": "node",
    "declaration": true,
    "declarationMap": true,
    "outDir": "dist",
    "strict": true,
    "skipLibCheck": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "**/*.test.ts"
  ]
}

Common Use Cases

  • Starting a new React + TypeScript project with strict type safety from day one
  • Configuring path aliases so deep imports stay readable across a large codebase
  • Setting up TypeScript in a Vite, Next.js, or Remix project with bundler module resolution
  • Building a publishable npm library with type declarations and source maps
  • Migrating a JavaScript codebase to TypeScript incrementally with allowJs
TypeScripttsconfigconfigurationbuildtype checking

Validate or format this JSON

One click loads this exact example into the tool — no copy-paste needed. Format it, validate it, explore the tree, or generate TypeScript types instantly.

Frequently Asked Questions

'target' tells TypeScript what JavaScript syntax to compile down to — ES2022 means it can emit optional chaining, logical assignment, etc. 'lib' tells TypeScript what built-in APIs exist in your runtime — DOM gives you window, document, fetch. You can target ES2018 but still include ES2022 lib types if your polyfill provides them.

Babel, SWC, and esbuild transpile one file at a time without reading other files. isolatedModules makes TypeScript error on patterns that require cross-file knowledge — like const enum and namespace re-exports — so the TypeScript checker and the fast transpiler agree on what the output looks like.

strict: true is a shortcut that enables: strictNullChecks (no implicit null/undefined), noImplicitAny (no untyped variables), strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, and alwaysStrict. Enable it from day one — retrofitting a large codebase to strict mode is painful.

TypeScript paths only affect type checking — they do not affect runtime resolution. You must also configure the same aliases in your bundler (Vite's resolve.alias, webpack's resolve.alias, or Next.js's jsconfig/tsconfig paths support). Keep them in sync; TypeScript will accept the import but the bundler will fail to resolve it if its config differs.

Related JSON Examples