Day 27: Configuration Deep Dive (tsconfig.json)

Controlling the Beast

Welcome to Day 27! tsconfig.json controls how TypeScript works.

Key Options

target

Which JS version to output? ES5, ES6, ESNext. If you target ES5, async/await is compiled to a state machine. If ESNext, it’s left as is.

module

How to handle modules? CommonJS (Node), ESNext (Modern), NodeNext.

strict

ALWAYS SET THIS TO TRUE. It enables:

• noImplicitAny: No any without permission.
• strictNullChecks: Handle null explicitly.
• And more.

Paths and BaseUrl

Clean up your imports.

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

Now: import Button from "@components/Button" instead of ../../components/Button.

Include / Exclude

Tell TS which files to compile.

"include": ["src/**/*"],
"exclude": ["node_modules", "**/*.test.ts"]

Challenge for Today

1. Open your tsconfig.json.
2. Look for strict. Is it true?
3. Change target to ES5 and check a generated JS file.
4. Change it back.

See you on Day 28 for Linting and Formatting!