PRODUCTION SKILLS · LESSON 20 OF 24

Compiler configuration and debugging

Understand strict checks, output settings and source maps.

strict
target
lib
source maps

Your runnable checkpoint

Extract into a new practice folder. Each download includes complete source, package.json, tsconfig.json and an offline lesson. Use Node.js 22 or 24. Each checkpoint is independent.

Download lesson source ↓

Install with npm install. Run npm run check, then npm run build. Terminal lessons use npm start; browser lessons use npm run serve and http://127.0.0.1:4173.

1. Understand the concepts

Run tsc with a project configuration through npm run check or npm run build. Passing individual filenames to tsc can bypass the intended project settings. Use tsc -p path/to/tsconfig.json to select a different project.

strict enables a family of checks including strictNullChecks and noImplicitAny. This course also enables noUncheckedIndexedAccess and exactOptionalPropertyTypes, which are separate options. Fix errors at their source rather than disabling these checks globally.

Target controls emitted JavaScript syntax. lib controls available type declarations; it does not install browser APIs or polyfills. Including DOM lets the checker recognize document, but document still does not exist in a plain Node process.

rootDir and outDir describe source and output layout. sourceMap emits maps linking generated JavaScript to TypeScript. Use browser developer tools or your editor’s Node debugger to set breakpoints in source files. Avoid publishing sensitive source maps if they expose private source.

When a build behaves unexpectedly, check the working directory, local compiler version, selected tsconfig and generated output. Delete stale build output deliberately if necessary, then rebuild. A successful check does not automatically rebuild dist.

2. Build and run

These are complete files. Preserve the paths shown below, including the src directory. The package and compiler configuration are included at the end.

src/main.ts

type Dictionary = Record<string, number>;
const counts: Dictionary = { typescript: 24 };
function countFor(key: string): number {
  return counts[key] ?? 0;
}
console.log(countFor("typescript"));
console.log(countFor("missing"));

package.json

{
  "name": "edupoly-typescript-compiler-configuration-and-debugging",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "check": "tsc --noEmit",
    "build": "tsc",
    "start": "node dist/main.js"
  },
  "devDependencies": {
    "typescript": "5.9.3"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "lib": [
      "ES2022",
      "DOM"
    ],
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "noEmitOnError": true,
    "verbatimModuleSyntax": true,
    "rootDir": "src",
    "outDir": "dist",
    "sourceMap": true,
    "types": [],
    "moduleDetection": "force"
  },
  "include": [
    "src/**/*"
  ]
}

3. Trace the code and check the result

An arbitrary dictionary lookup is possibly undefined.
The fallback makes the public return type a definite number.
Inspect the included tsconfig.json and generated .js.map file after building.

Expected result

24
0

4. Practice independently

Remove the ?? 0 fallback and explain the diagnostic.

Show the explanation

With noUncheckedIndexedAccess, the lookup is number | undefined. Returning it from a number function is invalid. Restore the fallback or change the function contract.

When something goes wrong

If tsc is missing, run npm install in the folder containing package.json. If the output looks old, rebuild before running. Read the first compiler diagnostic and check the indicated field or argument. For module errors, preserve the .js extensions in imports. Browser examples must run through the included local server, not directly as TypeScript files.