面试题：TypeScript 源码映射调试之基础配置

Question

在 TypeScript 项目中，要实现源码映射调试，需要在 `tsconfig.json` 中配置哪些关键选项？请简要说明每个选项的作用。

Answer 1

在 tsconfig.json 中，实现源码映射调试需要配置以下关键选项：

1. sourceMap：
   • 作用：设置为 true 时，TypeScript 编译器会生成对应的 .map 文件。这些 .map 文件建立了编译后的 JavaScript 代码与原始 TypeScript 源码之间的映射关系，便于调试工具（如浏览器开发者工具）在调试时能够将编译后的代码定位到原始的 TypeScript 源码，从而实现源码级别的调试。
2. inlineSourceMap：
   • 作用：若设置为 true，会将生成的源码映射信息直接嵌入到编译后的 JavaScript 文件中，而不是生成单独的 .map 文件。这在某些场景下（如小型项目或不希望有过多额外文件的情况）较为方便，但会使 JavaScript 文件体积增大。
3. inlineSources：
   • 作用：当设置为 true 时，不仅会将源码映射信息嵌入到编译后的 JavaScript 文件中（类似 inlineSourceMap），还会将原始的 TypeScript 源码内容也一并嵌入。这进一步增强了调试的便利性，因为调试工具无需再去寻找原始的源码文件，但同样会显著增加编译后 JavaScript 文件的大小。