tsconfig.json

What this module covers

4 steps · TypeScript

1. Step 1. tsconfig.json

   TypeScript uses tsconfig.json to understand how to compile your project. Generate it with `tsc --init`. { "compilerOptions": { "target": "ES2021", "module": "commonjs", "strict": true, "outDir": "./dist", "rootDir": "./src", "sourceMap": true, "esModuleInterop": true, "resolveJsonModule": true }, "include": ["src/**/*"], "exclude": ["node_modules", "dist"] } Best practices: always use strict: true for maximum type safety, organize code with rootDir/outDir, use paths to avoid long relative imports, and enable esModuleInterop for smooth CommonJS/ESM interop.

   `strict: true` alone is often described as the single highest-leverage tsconfig setting — it turns on null checks, implicit-any checks, and more all at once. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Add a target option set to "ES2021".

2. Step 2. Quiz: tsconfig.json

   Answer these questions about tsconfig.json.

   "strict": true bundles together every strict type-checking flag TypeScript offers. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Answer the quiz below.

3. Step 3. Configure tsconfig.json

   Write a tsconfig object with target "ES2021", strict true, outDir "./dist", rootDir "./src".

   This is a genuinely production-shaped tsconfig — the same four options appear at the top of nearly every real TypeScript project. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Are target, strict, outDir, and rootDir all set correctly?

4. Step 4. Mini project: tsconfig.json

   Write a tsconfig object with target "ES2021", strict true, outDir "./dist", rootDir "./src". Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   This is a genuinely production-shaped tsconfig — the same four options appear at the top of nearly every real TypeScript project. This project stage asks you to apply the same idea without step-by-step scaffolding. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Are target, strict, outDir, and rootDir all set correctly?