21 实战案例：调试 TypeScript 源码

不知道大家对 ts 是否熟悉，你觉得下面这段 ts 代码，res 类型是什么？

typescript

type Test<T> = T extends number ? 1 : 2;

type res = Test<any>;

结果是 1 | 2 的联合类型：

很多同学会感到迷惑，为什么是这样呢？

这就要从源码找答案了，今天我们就来调试下 ts 源码来探究上面这个类型的求值过程。

首先，我们要把 ts 源码下载下来（加个 depth=1 可以下载单 commit，速度比较快），这里我下载的是 4.6.0 版本的源码

git clone --depth=1 git@github.com:microsoft/TypeScript.git

然后可以看到 lib 目录下有 tsc.js 和 typescript.js，这两个分别是 ts 的命令行和 api 的入口。

但是，这些是编译以后的 js 代码，源码在 src 下，是用 ts 写的。

怎么把编译后的 js 代码和 ts 源码关联起来呢？sourcemap！

编译源码：

yarn
yarn run build:compiler

然后就可以看到多了一个 built 目录，下面有 tsc.js、typescript.js 这两个入口文件，而且也有了 sourcemap：

接下来就可以直接调试 ts 源码，而不是编译后的 js 代码了。

我们来试试：

添加一个 node 调试配置：

json

{
  "name": "调试 ts 源码",
  "program": "${workspaceFolder}/built/local/tsc.js",
  "request": "launch",
  "skipFiles": ["<node_internals>/**"],
  "console": "integratedTerminal",
  "args": ["./input.ts"],
  "type": "node"
}

入口是 tsc，我们找到 src/tsc/tsc.ts 打个断点：

然后 debug 启动，就会发现它断住了：

这就是命令行的入口。

而且我们是直接调试 ts 源码的，在 ts 源码里打的断点，这就是 sourcemap 的作用。

但是你会发现 ts 代码太多了，不知道哪些是解析类型的逻辑，在哪里打断点比较好。

这种情况还是用 api 的方式调试比较好。

我们创建一个 test.js，输入这样的代码：

typescript

const ts = require("./built/local/typescript");

const filename = "./input.ts";
const program = ts.createProgram([filename], {
  allowJs: false,
  strictNullChecks: true,
});

const sourceFile = program.getSourceFile(filename);
const typeChecker = program.getTypeChecker();

function visitNode(node) {
  if (node.kind === ts.SyntaxKind.TypeAliasDeclaration && node.name.escapedText === "res") {
    const type = typeChecker.getTypeFromTypeNode(node.name);

    console.log(type);
  }

  node.forEachChild((child) => visitNode(child));
}

visitNode(sourceFile);

ts.createProgram 就是 ts 的 api 入口，通过 program.getSourceFile 拿到的是 AST，通过 program.getTypeChecker 拿到的是实现类型检查的 type cheker。

遍历 AST，找到 AST 类型为类型别名，并且名字是 res 的节点，然后调用 typeCheker.getTypeFromTypenode 进行类型检查。

想知道代码哪部分是什么 AST 可以通过 astexplorer.net 来查看：

这样我们就完成了用 ts 对 res 的节点进行类型检查的逻辑。

接下来开始调试。

创建这样的调试配置：

json

{
  "name": "调试 ts 源码",
  "program": "${workspaceFolder}/test.js",
  "request": "launch",
  "skipFiles": ["<node_internals>/**"],
  "console": "integratedTerminal",
  "args": [],
  "type": "node"
}