What is a TypeScript Map file?

I have seen .map files for TypeScript. What I want to know is what these files are for. Do they contain references to other files referenced in the .ts file?


.map files are source map files that let tools map between the emitted JavaScript code and the TypeScript source files that created it. Many debuggers (e.g. Visual Studio or Chrome's dev tools) can consume these files so you can debug the TypeScript file instead of the JavaScript file.

This is the same source map format being produced by some minifiers and other compiled-to-JS languages like CoffeeScript.


A source map is basically what it says, a map from one language to another, so the debugger can run the JavaScript code but show you the line that actually generated it.

For practical debugging purposes:

What the source map lets you do is set a breakpoint on the TypeScript file and then debug the code. This can be done in Chrome and Firefox. Somewhat confusingly, the debugger behaviour in Chrome is that when the breakpoint is reached, the '.js' file is actually shown (stopped at the breakpoint).

As of today, the Firefox debugger will display the actual TypeScript file when it breaks. See the below reference:

http://www.gamefromscratch.com/post/2014/05/27/TypeScript-debugging-in-Visual-Studio-with-IE-Chrome-and-Firefox-using-Source-Maps.aspx)

(this also shows how Visual Studio can be configured to create the source map)

To understand how a source map works, you can read the section 'The anatomy of a source map' here:

https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/