What is a TypeScript Map file?

Question

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?<

Answer 1

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/