什么是 TypeScript Map 文件？

在继续之前，这些是您应该熟悉的几个术语：

1. TypeScript Source files：这些是你自己编写的文件，很容易解释，即它是人类可读的。
2. 发射或转译的 JavaScript 代码：此代码是我们创建的 TypeScript 源文件的等效 JavaScript 代码，但不是人类可读的。此代码是在 Babel 和 Webpack 等 JavaScript 转编译器的帮助下从 TypeScript 源文件生成或创建的，因此代码可以在较旧的浏览器上正常运行，而不仅仅是在最新的浏览器上。

说明： TypeScript Map 文件是源映射文件，它允许工具在发出的 JavaScript 代码和创建它的 TypeScript 源文件之间进行映射。然后，这些 Source Map 文件将有助于调试 Typescript 文件，而不是调试发出的 JavaScript 文件。许多调试器使用这些 Typescript 映射文件来调试生产中的代码。一个源映射文件，从转译的 JavaScript 文件映射到原始的 TypeScript 文件。

转译或发射的 JavaScript 代码不易阅读，因为代码可能会被压缩、编译、丑化、缩小，因此它不是人类可读的。这些文件在生产期间部署。现在假设在生产中，我们面临一个错误。你如何调试它，因为 Emitted JavaScript 代码不容易阅读。

这就是 TypeScript Map 文件成为我们的救星的地方。

“.map”文件充当翻译器。它包含 TypeScript 源代码和 Emitted JavaScript 代码的详细信息。如果您有生产错误并且也有源映射，则可以轻松调试生产错误。您所要做的就是将 Source Map 上传到开发工具，并且在内部所有浏览器都支持 Source Map，并且 Emitted JavaScript 代码被翻译成 TypeScript 代码（人类可读的语言）。

使用 tsconfig.json 文件中的 sourceMap 编译选项生成 TypeScript Map 文件：

Javascript

{
  "compilerOptions": {
   ...
   "sourceMap": true
    },
   ...
}

Map 文件的结构：如果我们查看包含已转译的 JavaScript 的文件夹，我们将看到源映射。这些是带有 .map 扩展名的文件。如果我们打开一个源映射文件，我们将看到它是 JSON 格式：

Javascript

{
  "version": 3,
  "file": "home.js",
  "sourceRoot": "",
  "sources": [
    "../src/home.ts"
  ],
  "names": [],
  "mappings": ";;AAAA,uCAAoA;....""
}
`}

• 对 JavaScript 文件的引用在文件字段中定义。
• 对 TypeScript 文件的引用位于源字段中。请注意，它引用了项目结构中的文件。
• sourceRoot字段是 TypeScript 文件的根路径。
• mappings字段包含 JavaScript 代码中每个位置到 TypeScript 代码中位置的映射。这些是 base64 编码的可变长度量。
• 名称字段是源代码中使用的标识符列表，这些标识符已从输出中更改或删除。
• 版本字段定义正在使用的源映射规范的版本。