TypeScript
Source map
Learn sourceMap and inlineSourceMap.
What is a source map?
A source map links compiled JavaScript back to the source TypeScript file. sourceMap: true produces a .js.map file for each .js; debuggers use it to show the user original TypeScript lines.
{
"compilerOptions": {
"sourceMap": true
}
}
Without a source map, error stacks show compiled JavaScript lines.
sourceMap vs inlineSourceMap
sourceMap: true produces a .js.map file alongside each JavaScript file; this is the common choice for multi-file projects. inlineSourceMap: true embeds the map inside the .js and produces no separate file; this suits single-file distributions.
// sourceMap: dist/index.js + dist/index.js.map
// inlineSourceMap: dist/index.js (map embedded)
The two are not used together; one is chosen.
Exercise Compute the source map file name
Write a mapFileName function that takes a JavaScript file path and returns the source map file name (append .map to the .js extension). If the inline parameter is true, return "(inline)" instead since the map is embedded. Print the result of mapFileName("dist/index.js", false).
Show example solution
function mapFileName(jsPath: string, inline: boolean): string {
if (inline) return "(inline)";
return jsPath + ".map";
}
console.log(mapFileName("dist/index.js", false));
Test yourself
-
What does `inlineSourceMap: true` do?
- Produces only .d.ts files
- Produces a separate .js.map file
- Embeds the source map inside the .js file
- Disables source map generation
Show answer
Embeds the source map inside the .js file — inlineSourceMap: true embeds the source map as base64 at the end of the .js file instead of a separate file; sourceMap produces a separate .js.map, noEmit disables output, and emitDeclarationOnly produces only .d.ts.
-
Enable source map
{
"compilerOptions": {
"____": true
}
}
Show answer
{
"compilerOptions": {
"sourceMap": true
}
}
-
Source map parts
- sourceMap: true
- produces a separate .js.map
- inlineSourceMap: true
- embeds the map in .js
- .js.map
- map file
- base64
- embedded map encoding
Next lesson: Declaration emit
