Before getting ahead, these are few terms you should be familiar with:
- TypeScript Source files: These are files written by yourself and are quite easy to Interpret, i.e., it is Human-Readable.
- Emitted or Transpiled JavaScript Code: This code is equivalent JavaScript code of the TypeScript source files that we create but is not Human-readable. This Code is generated or created from the TypeScript source files with the help of JavaScript transcompilers like Babel and Webpack so that code runs fine on older Browsers and not just on the latest browsers.
Explanation: TypeScript Map files are source map files that let tools map between the emitted JavaScript code and the TypeScript source files that created it. And these Source Map files will then help to debug the Typescript file instead of debugging the emitted JavaScript file. These Typescript map files are consumed by many debuggers to debug the code in production. A source map file, maps from the transpiled JavaScript file to the original TypeScript file.
Transpiled or Emitted JavaScript code is not easy to read as the code may be compressed, compiled, uglified, minified, and thus it is not human readable. These files are deployed during Production. Now suppose in Production, we face a bug. How do you Debug it since Emitted JavaScript code is not easy to read.
That’s where TypeScript Map files become our Savior.
The “.map” files act as a translator. It contains details of both TypeScript source code as well as Emitted JavaScript Code. In case of a scenario where you have a production bug and you also have a Source Map, you can debug the production bug easily. All you have to do is Upload Source Map to Dev tools and Internally all browsers support Source Map and the Emitted JavaScript code is been translated to TypeScript code(Human-readable language).
To generate TypeScript Map file by using the sourceMap compilation option in tsconfig.json file:
Javascript
{ "compilerOptions": { ... "sourceMap": true }, ... } |
Structure of Map files: If we look in the folder that has the transpiled JavaScript, we will see the source maps. These are files with a .map extension. If we open a source map file we will see it is in JSON format:
Javascript
{ "version": 3, "file": "home.js", "sourceRoot": "", "sources": [ "../src/home.ts" ], "names": [], "mappings": ";;AAAA,uCAAoA;...."" } `} |
- The reference to the JavaScript file is defined in a file field.
- The reference to the TypeScript file is in a sources field. Notice that it references the file in the project structure.
- The sourceRoot field is the root path of the TypeScript files.
- The mappings field contains mappings for every position in the JavaScript code back to positions in the TypeScript code. These are base64 encoded variable-length quantities.
- The names field is a list of identifiers used in the source code that were changed or removed from the output.
- The version field defines which version of the source map spec is being used.
