tsconfig.json: The Five Flags That Change Everything

Your tsconfig.json file tells the compiler how to check and what to emit. Five options in compilerOptions do most of the heavy lifting. First, strict — a single true that flips on a whole family of safety checks at once (including strictNullChecks and noImplicitAny, from earlier cards). Turning it on for a fresh project is the single highest-value setting you'll pick.

Next come the JavaScript-shaping flags. target sets which ECMAScript version the emitted .js uses: "ES2015" downlevels async/await and arrow functions into older syntax, while "ES2022" leaves modern features intact. module controls the module syntax of the output — "ESNext" keeps import/export, "CommonJS" rewrites them to require/module.exports. These are independent: you can target modern JS but still emit CommonJS.

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler"
  }
}

The trickiest pair is resolution. moduleResolution decides how import x from "./foo" maps to a file on disk — "NodeNext" follows Node's rules (respecting package.json exports and requiring extensions in ESM), while "Bundler" matches what Vite/esbuild do. Finally, paths creates import aliases so @/utils resolves to src/utils instead of a fragile ../../../utils; it only rewrites type-checking, so a bundler or runtime loader must apply the same aliases or the code breaks at runtime.

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