Typescript 越来越流行了，它弥补了 js 弱类型缺陷，更适用于大型项目。而 VSCode 内建就支持调试 ts，可以让开发效率进一步提高。
本文给大家介绍，如何用 VSCode 调试 ts。
准备 ts 演示代码
我们以 ts-debug
这个 demo 项目为例，介绍如何用 VSCode 调试 ts。
首先需要明确，纯粹的 ts 源码既不能运行，更不能直接拿来调试。当我们要调试 ts 源码时，就必须要生成对应的 js 和 sourcemap。
用 ts-node 可以直接运行 ts 代码，但这里暂不讨论
我们先在文件夹下建一个简单的 0 到 100 求和的 ts 程序：
// index.ts
let sum: number = 0;
for (let i = 1; i <= 100; i++) {
sum += i;
}
console.log('Sum is %s', sum);
并编写相应的 tsconfig.json
{
"compilerOptions": {
"target": "es5",
"sourceMap": true
},
"include": ["."]
}
必须要在 tsconfig 中配置 sourceMap: true ，ts 编译才会生成 index.ts 的 sourcemap。VSCode 调试时，会读取这个文件。
配置调试参数
VSCode 的调试参数都放在项目同级的 .vscode/launch.json 文件中。这次，我们修改一下 launch.json 文件，配置 ts 的调试参数。
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/index.ts",
"preLaunchTask": "tsc: build - tsconfig.json",
"sourceMaps": true,
"outFiles": ["${workspaceFolder}/**/*.js"]
}
]
}
如果你还不太清楚 VSCode 调试参数是什么，可以先阅读：VSCode 调试 Node.js 指南
有几个参数比较重要：
-
program：待调试程序的入口文件。${workspaceFolder}指当前项目项目目录。 -
preLaunchTask：预执行的任务。这里的命令会在调试之前执行——调试开始前，先编译 ts。 -
outFiles: 编译后的 js 文件路径。我们给program指定的是 ts 文件路径，那 VSCode 怎么知道编译后的 js 去哪里了，要执行哪个 js 文件？答案就是，VSCode 会在outFiles中寻找匹配。
启动调试
index.ts、tsconfig.json 和 .vscode/launch.json 文件都配置妥当后，我们在 ts 文件的第四行打个断点，然后点击调试开始按钮，就直接进入 VSCode 调试界面了。
可以看到，VSCode 停在了第四行断点处，表明调试 ts 成功了。
启动调试
原理小结
启动调试时，VSCode 首先执行 preLaunchTask，将 ts 编译成 js 和 sourcemap，然后根据 program 和 outFiles 参数，找到编译后的待调试 js 文件执行。至于 ts 和 js 的断点信息，则是根据 sourcemap 相互定位的。
网友评论