TypeScript - Compiler Behavior - tsconfig.json - sourceMap

In our tsconfig.json file one of the parameters set is:

"sourceMap":false,

Let us now turn it to true and compile the code:

"sourceMap":true,

$ tsc

$ ls -l city-App.*

-rw-r--r-- 1 ubuntu ubuntu 101 Nov  4 21:10 city-App.js

-rw-r--r-- 1 ubuntu ubuntu 162 Nov  4 21:10 city-App.js.map

-rw-rw-r-- 1 ubuntu ubuntu  65 Nov  4 21:10 city-App.ts

$

We can see that on compiling, an extra file got created. It is the map file between the JavaScript file and the TypeScript file.

In our project folder let us start a simple HTTP server:

$ python -m SimpleHTTPServer 3000

Now if we open localhost in our browser and inspect the source:

we can see that, we can inspect the source of the TypeScript file. Normally, we can see only HTML files and JavaScript files included in it. But, here we see even the TypeScript files. This is because we have enabled the compiler option sourceMap to true. Due to the mapping files generated, the TypeScript files have been loaded into browser. 

This facility helps us in debugging purposes. We can debug into the source of the JavaScript files - which are the TypeScript files by applying breakpoints in it.

Refer:

• https://www.typescriptlang.org/docs/handbook/compiler-options.html
• https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/
• https://stackoverflow.com/questions/17493738/what-is-a-typescript-map-file