TypeScript Tsconfig Options

Getting Started

• Generate a starter file by running the compiler with the init flag.

  tsc --init

• The tsconfig.json file sits at the root of your TypeScript project.
• All compiler options live under the "compilerOptions" key.

  {
    "compilerOptions": {
      "strict": true
    }
  }

• Run tsc with no arguments to compile using these settings.
• Use tsc --noEmit for type-checking only without writing files.

Strict Mode

• Enable "strict": true to turn on all strict checks at once.

  { "compilerOptions": { "strict": true } }

• Strict mode includes noImplicitAny, strictNullChecks, and several others.
• Use "strictNullChecks" to require explicit handling of null and undefined.
• Use "noImplicitAny" to flag variables that have no type annotation.
• Strict mode is the recommended baseline for every new project.

Target and Module

• Use "target" to choose the JavaScript version of the compiled output.

  { "compilerOptions": { "target": "ES2022" } }

• Pick "ES2022" or newer for modern browsers and current Node versions.
• Use "module" to choose between ESM, CommonJS, or bundler modules.

  { "compilerOptions": { "module": "ESNext" } }

• Use "lib" to include type definitions for browser APIs or other globals.
• These settings determine what features your compiled code can use.

Paths and Includes

• Use "include" and "exclude" to control which files are compiled.

  {
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist"]
  }

• Use "outDir" to choose where compiled JavaScript files are saved.
• Use "rootDir" to set the root folder of your TypeScript source files.
• Set up path aliases with "baseUrl" and "paths" for cleaner imports.

  {
    "compilerOptions": {
      "baseUrl": "./src",
      "paths": { "@/*": ["*"] }
    }
  }

• Path aliases require both tsconfig.json and your bundler to agree.

Helpful Extras

• Enable "sourceMap": true to generate source maps for easier debugging.

  { "compilerOptions": { "sourceMap": true } }

• Use "esModuleInterop": true for cleaner imports from CommonJS modules.
• Set "skipLibCheck": true to skip type checking of declaration files.
• Use "resolveJsonModule": true to import JSON files directly in code.
• Use "jsx": "preserve" for React projects that use a separate bundler.

Tip: Start every new project with "strict": true, since adding it later means fixing many type errors at once.

Warning: Changing "target" or "module" mid-project can break your bundler, so update one setting at a time and test.