TypeScript Map 文件介绍

在 TypeScript 中，生成的 JavaScript 代码普遍会比源码更难以理解和调试。为了辅助开发者在调试时更好地定位到源码，TypeScript 提供了 Map 文件功能。

Map 文件是什么？

Map 文件（source map，简称为 map）是一种对应生成代码与源代码的映射关系的文件。通过 Map 文件，可以快速定位到生成代码的哪一行对应着源代码的哪一行。在调试时会用到。

Map 文件的格式是 JSON。

生成 Map 文件

想要生成 Map 文件，只需要在 tsconfig.json 中开启 sourceMap 选项即可。

示例配置：

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

在使用 tsc 编译时，如果开启了 sourceMap 选项，就会生成后缀为 '.js.map' 的 Map 文件。

使用 Map 文件

当浏览器调试 JavaScript 代码时，如果检测到相应的 Map 文件，就会根据其中的映射关系定位到源码位置。在 Chrome 浏览器中，可以在 Sources 面板中找到对应的 Map 文件，并开启 'Enable Source Maps' 选项以启用 Map 文件定位。

总结

通过正确地使用 Map 文件，可以帮助我们更快地定位到问题所在，提高开发效率。因此，在开发 TypeScript 项目时，建议开启 sourceMap 选项以生成 Map 文件。