The sourceMap property is a boolean that when set to true will generate the mapping between the generated JavaScript and TypeScript. This is a good option to turn on if you do debug in a browser and want to step in the TypeScript code instead of stepping into the generated code. It simplifies the debugging because you are working in exactly the same area. This is most of the time turned on.

However, sourceRoot is rarely used in normal circumstances. It is available if you move the sourceMap somewhere else to indicate at runtime where to find the sourceMap. This will alter the generated sourceMap path. The following code shows a comment indicating the path of the map file. SourceRoot would change the portion before index.js.map:

const text = "Text for test1";
console.log(text);
//# sourceMappingURL=index.js.map

Similarly, mapRoot allows changing the source if the map files are in a different place than the JavaScript file. The difference between sourceRoot and mapRoot is this time we alter the map file instead of the JavaScript file. In the following partial extraction of a code of a map file, we see paths that can be modified by mapRoot:

{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"]......

The moment to use or the other depending on how you configure positions your built files. If you move the map somewhere else, then sourceRoot is interesting. However, if you keep the map but move the JavaScript somewhere else than you may change mapRoot. I mention these configurations for the sole reason that you may already have a JavaScript project that you want to migrate to TypeScript. Depending on your existing configuration, you may need to tweak these configurations. However, for any standard project, no modification should be made to these configurations.