Create Source Maps in TypeScript: Inline or File

Source maps are excellent for debugging purposes and allow us to pinpoint the exact file(s) and lines of code when working in a compiled, minified or production environment.

A source map is a special piece of data that “maps” this obfuscated code back to its original state for us to work with.

It’s common practice nowadays, for example with Angular, to write TypeScript and compile to ECMAScript to run in the browser. So we’ll need to debug what those original files look like, and where.

This is not something you’d create yourself, we would use tooling to generate it for us…

That’s where TypeScript comes in, which offers two different flavors - inline source maps or a source map file.

By default, source maps are disabled when creating a new TypeScript project, so we should enable it via tsconfig like so:

{
  "compilerOptions": {
    "sourceMap": true
  }
}

Let’s then assume the following index.ts file:

interface Drink {
  name: string;
  price: number;
}

export const drinks: Drink[] = [
  { name: 'Water', price: 299 },
  { name: 'Coffee', price: 399 },
];

If we run tsc (TypeScript Compiler) we’ll get an index.js file emitted to us:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.drinks = void 0;
exports.drinks = [
    { name: 'Water', price: 299 },
    { name: 'Coffee', price: 399 },
];
//# sourceMappingURL=index.js.map

Do you see what I see? The #sourceMappingURL=index.js.map is what’s pointing to our map of our original source code.

Alongside the index.js will be an index.js.map file:

{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAKa,QAAA,MAAM,GAAY;IAC7B,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE;IAC7B,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE;CAC/B,CAAC"}

Don’t touch this file, simply use it in development and/or production.

✅ To view Source Maps, you need to enable them in Google Chrome or your favorite browser via the Developer Tools.

TypeScript also offers us another flavor, to use inline source maps.

Instead of using sourceMap inside tsconfig, we can switch to inlineSourceMap:

{
  "compilerOptions": {
    "inlineSourceMap": true
  }
}

Now when we run tsc we get only an index.js file that contains:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.drinks = void 0;
exports.drinks = [
    { name: 'Water', price: 299 },
    { name: 'Coffee', price: 399 },
];
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJpbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7QUFLYSxRQUFBLE1BQU0sR0FBWTtJQUM3QixFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRTtJQUM3QixFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRTtDQUMvQixDQUFDIn0=

This then uses a base64 encoded string to provide a source map instead of a file. It’s up to you which flavor you’d like to go for, personally I like a separate file so I can choose to deploy it or not.

And that’s it! TypeScript doesn’t enable source maps out of the box when running tsc --init so to use them you’ll need to adopt the approaches we’ve used above.

🚀 There’s so much more to TypeScript that I can teach you. Fast track your skills overnight with my deep-dive TypeScript Courses and take your skills to the top.

Thanks for reading!