调试 TypeScript 代码

由于 TypeScript 代码最终将编译成 JavaScript 文件来执行，如果不在 TypeScript 代码上进行调试，就只能在 JavaScript 代码上进行调试。由于 TypeScript 代码和 JavaScript 代码存在差异，直接调试 JavaScript 代码不利于定位问题，因此较好的方案是直接调试 TypeScript 代码。

Figure 1. 图19-21 在IDE中进行断点调试

通过 Visual Studio Code 中内置的调试器直接调试 TypeScript 代码。

在IDE中调试代码

要在 IDE 中调试代码，需要开启 sourceMap 编译选项，为 TypeScript 文件生成源文件映射。假设当前项目结构如下。

D:\TSProject
    a.ts
    tsconfig.json

其中，tsconfig.json 文件的内容如下，它开启了 sourceMap 编译选项，将生成源文件映射。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "out",
    "sourceMap": true
  }
}

其中，a.ts 文件的内容如下。此时在第 2 行代码上增加断点。

let a: number = 1;
let b: number = 2;
console.log(a + b);

之后再执行 tsc 命令编译 TypeScript 文件，由于 tsconfig.json 文件中指定输出文件在 out 目录下，因此编译后产生的 a.js 文件及 TypeScript-JavaScript 映射文件 a.js.map 都将输出到 out 目录下。此时的项目结构如下。

D:\TSProject
│  a.ts
│  tsconfig.json
│
└─out
        a.js
        a.js.map

之后再选中 a.ts 文件，并在 Visual Studio Code 的菜单栏中选择 “运行”→“启动调试” 选项，调试器选择 Node.js，就可以执行 a.js 文件中的代码，但最终是在 a.ts 文件上进行调试的。图19-21所示为在 IDE 中进行断点调试。可以看到，a.ts 文件的第 2 行代码上的断点已经生效。

在浏览器中调试代码

在浏览器中，你也可以直接调试 .ts 文件，这同样需要通过开启 sourceMap 编译选项为 TypeScript 文件生成源映射。

假设当前的项目结构如下。

D:\TSProject
│  a.ts
│  test.html
│  tsconfig.json
│
└─out
        a.js
        a.js.map

其他文件的内容和上一个示例中文件的内容相同，但在本例中新增了一个 test.html 文件，其代码如下，它引用了 out/a.js 文件。

<!DOCTYPE html>
<html>
    <head><title>test page</title></head>
    <body>
        <script src="out/a.js"></script>
    </body>
</html>

运行 live-server（live-server 是一个具有实时加载功能的小型服务器工具，可用于架设临时 Web 服务器。通过执行 npm install -g live-server 命令安装 live-server 后，你就可以在 HTML 页面所在的目录下执行 live-server 命令来启用 Web 服务器），启动服务器。此时，用浏览器访问本机 8080 端口下的 test.html 页面。

按 F12 键打开 Chrome 的开发工具。由于 out/a.js 目录下有 a.map.js 文件，因此 Chrome 可以识别对应的 a.ts 源文件。在 Sources 标签页中，找到 a.ts 源文件，在 a.ts 上设置断点并调试代码，如图19-22所示。

Figure 2. 图19-22 在a.ts源文件上设置断点并调试代码