Source maps

What a .map is

A map file records which line of emitted JavaScript came from which line of TypeScript. The browser reads it and shows the original sources in the debugger.

Without maps you debug generated code. With maps you set breakpoints and read variables in the code you actually wrote.

function total(items: number[]): number { return items.reduce((a, b) => a + b, 0); }

sourceMap:true

One setting enables map output for the whole project. Each emitted JavaScript file gets a matching map file beside it.

The command below builds once with maps, which is ideal while wiring up the debugger for the first time.

tsc --sourceMap

app.js and app.js.map are written

Debug TS directly

Open the browser developer tools and look for the TypeScript sources under the sources panel. Breakpoints set there pause on the original lines.

Step over, step into, and hover values exactly like plain JavaScript. The map layer translates every frame back to TypeScript for you.

{ "compilerOptions": { "sourceMap": true, "target": "ES2020" } }

Do not ship maps

Maps are a development aid, not a production artifact. Published maps expose original sources to every visitor and double the deployed files.

Keep maps on for local debugging and off for release builds. The release config overrides the flag without touching shared settings.

{ "compilerOptions": { "sourceMap": false, "target": "ES2020" } }

Next: Declaration files

Article author: Arthur Isaev