最近接触到的几个开源库源码都是用TypeScript写的(看来ts是大势所趋,不学不行啊)。虽然说不懂ts也能正常调API,但是碰到有意思的功能还是想跟进去看一看、改一改。
在学习了基本的ts语法后有了调试的需求。如果用tsc编译出js,再去调试js还是太麻烦。如果能在VS Code中直接调试ts就完美了。在查阅一些资料后,我总结了一个基本流程,方便以后查阅,不足之处也请大家指正。
配置TypeScript编译选项
新建tsc的配置文件tsconfig.json
{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"outDir": "out",
"sourceMap": true,
},
"include": [
"src/**/*"
]
}
tsconfig.json
对用到的几个属性加以说明
- target : 编译出 JavaScript 代码的 ECMAScript 版本
- module : 编译出 JavaScript 文件的模块格式
- outDir : 编译出 JavaScript 文件的存放位置;
- sourceMap : 是否生成 SourceMap 文件;(不生成SourceMap不会进端点)
-
include : 指定要编译的文件;
以上属性都有多种可取值,详情可以参考阮一峰老师的文章tsconfig.json
VS Code集成TypeScript编译配置
快捷键Ctrl+Shift+B,创建tasks.json,用于关联tsc编译工具到VS Code。
Ctrl+Shift+B创建tasks.json弹出的两个选项
第一个选项是每次手动编译后生成js;第二个选项是每次修改、保存后都重新编译js。这里我们点击第一个选项后面的配置图标,生成tasks.json文件。
{
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": "build",
"label": "tsc: build - tsconfig.json"
}
]
}
tasks.json
VS Code调试配置
切换到调试面板,点击"create a launch.json file"创建默认的launch.json文件,用于配置调试选项。
生成的launch.json中,修改默认的program属性,并新增preLaunchTask属性,得到如下内容。
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/src/index.ts",
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": ["${workspaceFolder}/out/**/*.js"]
}
]
}
launch.json
以上两个属性的说明
- program : 调试的入口文件
- preLaunchTask : 调试前要执行的任务。内容要和tasks.json中的label保持一致。如下图所示:
preLaunchTask要和tasks.json中的label一致
接下来就可以开始TypeScript的调试了
VS Code中调试TypeScript
本文参考了