TypeScript 如何配置 sourceMap

写代码时，你有没有遇到过这样的情况：浏览器里的控制台报错，只显示一行压缩后的代码，完全看不懂哪里出了问题？这时候，sourceMap 就像代码的“翻译官”，能把压缩后的代码映射回你写的原始 TypeScript 代码，帮你快速定位错误。今天我们就用生活化的例子，聊聊 TypeScript 里 sourceMap 的配置方法，一点都不复杂。

第一步：先搞懂 sourceMap 是什么

举个简单的例子：你写了一份手写的笔记（原始 TypeScript 代码），后来把它复印成了缩印版（编译后的 JavaScript 代码），缩印版字太小看不清，sourceMap 就是夹在缩印本里的一张索引，告诉你哪一行缩印字对应笔记的哪一行，哪一个错误对应笔记的哪一句话。这样就不用对着缩印本瞎找了，直接翻回笔记改就行。

TypeScript 本身不会直接运行，得编译成浏览器能识别的 JavaScript，sourceMap 就是在编译时生成的，把编译后的代码和你写的源码对应起来，所以配置起来也只需要改几个简单的参数。

第二步：基础配置——用 tsconfig.json 搞定

TypeScript 的配置主要靠 tsconfig.json 文件，这个文件就像你的代码说明书，里面写着编译的各种规则，sourceMap 也在这里配置，只需要改两个常用的参数，新手也能轻松搞定。

第一个参数是 sourceMap，它的作用是告诉 TypeScript“要不要生成 sourceMap 文件”，默认是 false，我们要改成 true，这样编译后就会多出一个 .map 文件，这就是刚才说的“索引”。比如你有一个 index.ts 文件，编译后会生成 index.js 和 index.js.map，这个 .map 文件就是浏览器用来找源码的。

第二个参数是 outDir，它是用来指定编译后的 JS 文件放哪里的，比如你把 outDir 设为 ./dist，编译后的 JS 和 sourceMap 都会自动放到 dist 文件夹里，这样项目结构会更清晰，找文件也方便。

改完后的 tsconfig.json 大概是这样的：

`json

{

"compilerOptions": {

"sourceMap": true,

"outDir": "./dist",

"target": "ES6"

}

}

`

最后一行的 target 是指定编译成哪个版本的 JS，不影响 sourceMap，正常写就行。

第三步：验证配置——看看有没有生效

配置完别着急，我们来验证一下。先写一段简单的 TypeScript 代码，比如在 index.ts 里写：

`typescript

const message = "你好，sourceMap";

console.log(message);

`

然后用 tsc 命令编译，如果你是用全局安装的 TypeScript，直接在命令行输 tsc；如果是用项目里的，就输 npx tsc，编译完成后，你会看到项目里多了一个 dist 文件夹，里面有 index.js 和 index.js.map，这就说明配置生效了。

如果想测试效果，可以在浏览器里打开编译后的 JS 文件，或者直接在浏览器控制台运行这个 JS，要是报错的话，控制台会显示对应的 TypeScript 行数，而不是编译后的 JS 行数，这就是 sourceMap 在起作用。

第四步：常见小问题避坑

配置时可能会遇到两个小麻烦，提前避开就不会出错了。第一个是 .map 文件别删，要是不小心删掉，浏览器就找不到源码了，就像丢了索引，还是看不懂缩印本；第二个是如果用了打包工具（比如 Webpack），别再单独配置 sourceMap，工具本身会处理，重复配置反而会出问题，就像给缩印本加了重复的索引，反而混乱。

这样一套下来，sourceMap 的配置就搞定了，不用再对着压缩后的代码瞎找错误，省了不少调试时间。