How Sourcemap Configuration Works in TypeScript

Last updated on 28 Jan, 2023

When tsconfig.json file is generated, it contains a commented line for sourcemap. In order to enable source maps in a TypeScript project, we need to uncomment the line.

  "compilerOptions": {
    "sourceMap": true

After enabling sourceMap, when we run tsc command, along with .js file, we can also see file generated.

JS Map

This map file brings the original TypeScript file in the browser sources tab. It helps us to debug easily by directly viewing the TypeScript files.

TS file in Sources tab

We can also place breakpoints in the TypeScript files.

--- ○ ---
Joby Joseph
Web Architect