TypeScript 是怎么工作的？一文带你深入编译器内部流程

TypeScript 编译器是一个精心设计的系统，它将带有丰富类型信息的 TypeScript 代码转换为可在浏览器或 Node.js 环境中运行的 JavaScript 代码。这个过程不仅包含语法转换，还涉及到复杂的类型推断、验证和优化。让我从编译器设计的角度，深入剖析这个过程的每个环节。

编译流程概览

一个完整的 TypeScript 编译过程大致可以分为六个主要阶段，每个阶段都有其独特的职责和复杂性：

复制代码

源代码 → 扫描器 → 解析器 → 绑定器 → 类型检查器 → 转换器 → 发射器 → JavaScript

扫描器：从字符流到有意义的标记

扫描器（Scanner）是编译流程的第一站，也被称为词法分析器（Lexical Analyzer）。它的工作看似简单，却是整个编译过程的基础。

想象一下，编译器最初面对的是一长串字符：

ini 复制代码

let counter: number = 0;

对人类来说，我们一眼就能识别出这里有变量声明、类型注解和初始化，但计算机需要将这串字符分解为有意义的单元。

扫描器会逐字符读取源代码，并根据 TypeScript 语法规则，将相邻字符组合成有意义的标记（Token）：

typescript 复制代码

[关键字(let), 标识符(counter), 冒号, 标识符(number), 等号, 数字字面量(0), 分号]

每个标记不仅包含类型信息，还会记录它在源代码中的位置，这对后续的错误报告至关重要。

扫描器的内部实现

TypeScript 扫描器内部使用有限状态机（Finite State Machine）来处理不同的输入状态。例如，当遇到字母时，它会进入"标识符"状态，继续读取后续字符直到遇到非标识符字符；当遇到数字时，它会进入"数字字面量"状态。

arduino 复制代码

// 简化的扫描器状态转换示例
function scan() {
while (position < text.length) {
    const ch = text.charCodeAt(position);

    if (isWhiteSpace(ch)) {
      position++;
      continue;
    }

    if (isLetter(ch)) {
      return scanIdentifier();
    }

    if (isDigit(ch)) {
      return scanNumber();
    }

    switch (ch) {
      case CharacterCodes.colon:
        position++;
        return createToken(SyntaxKind.ColonToken);
      case CharacterCodes.equals:
        position++;
        return createToken(SyntaxKind.EqualsToken);
      // ... 其他情况
    }
  }
}

真实的扫描器要复杂得多，它需要处理 Unicode 字符、多行字符串、正则表达式字面量、模板字符串、数值表示的各种形式（如十六进制、二进制、科学计数法）等。

如下代码所示：

ini 复制代码

import * as ts from"ntypescript";

// 单例扫描器
const scanner = ts.createScanner(ts.ScriptTarget.Latest, /* 忽略杂项 */true);

// 此函数与初始化使用的 `initializeState` 函数相似
function initializeState(text: string) {
  scanner.setText(text);
  scanner.setOnError((message: ts.DiagnosticMessage, length: number) => {
    console.error(message);
  });
  scanner.setScriptTarget(ts.ScriptTarget.ES5);
  scanner.setLanguageVariant(ts.LanguageVariant.Standard);
}

// 使用示例
initializeState(
`
var foo = 123;
`.trim()
);

// 开始扫描
var token = scanner.scan();
while (token != ts.SyntaxKind.EndOfFileToken) {
console.log(ts.formatSyntaxKind(token));
  token = scanner.scan();
}

最终输出结果如下图所示：

20250324214001

这里的输出是 TypeScript 扫描器（Scanner）处理源代码 var foo = 123; 后生成的标记（Token）流。这是编译过程的第一步，扫描器将源代码文本分解成有意义的语法单元，每行输出分别对应一个被识别的标记：VarKeyword（var 关键字）、Identifier（变量名 foo）、EqualsToken（等号）、NumericLiteral（数字字面量 123）和 SemicolonToken（分号）。这些标记随后会被解析器用来构建抽象语法树（AST）。

调用 scan 后，扫描器更新其局部状态（扫描位置，当前 token 详情等）。扫描器提供了一组工具函数获取当前扫描器状态。下例中，我们创建一个扫描器并用它识别 token 以及 token 在代码中的位置。

ini 复制代码

// 使用示例
initializeState(
`
var foo = 123;
`.trim()
);

// 开始扫描
var token = scanner.scan();
while (token != ts.SyntaxKind.EndOfFileToken) {
let currentToken = ts.formatSyntaxKind(token);
let tokenStart = scanner.getStartPos();
  token = scanner.scan();
let tokenEnd = scanner.getStartPos();
console.log(currentToken, tokenStart, tokenEnd);
}

最终输出结果如下图所示：

20250324214432

这次的输出包含了每个标记（Token）在源代码中的位置信息。每行显示三个数据：标记类型、起始位置和结束位置。例如 VarKeyword 0 3 表示 var 关键字从位置 0 开始，到位置 3 结束；Identifier 3 7 表示标识符 foo 占据位置 3 到 7；以此类推。这些位置信息对于源码映射、错误报告和调试工具非常重要，使编译器能够精确指出问题所在位置。

解析器：构建程序的结构骨架

解析器（Parser）接收扫描器生成的标记流，并按照语法规则将其组织成抽象语法树（AST）。AST 是源代码的树状表示，每个节点代表源代码中的一个语法结构。

以一个稍复杂的例子说明：

arduino 复制代码

function calculateArea(width: number, height: number): number {
  return width * height;
}

对应的 AST（简化表示）类似于：

scss 复制代码

FunctionDeclaration
├── Identifier("calculateArea")
├── ParameterList
│   ├── Parameter
│   │   ├── Identifier("width")
│   │   └── TypeAnnotation(NumberKeyword)
│   └── Parameter
│       ├── Identifier("height")
│       └── TypeAnnotation(NumberKeyword)
├── ReturnType(NumberKeyword)
└── Block
    └── ReturnStatement
        └── BinaryExpression(*)
            ├── Identifier("width")
            └── Identifier("height")

递归下降解析

TypeScript 使用递归下降解析（Recursive Descent Parsing）技术，这是一种自顶向下的解析方法。解析器包含一系列互相调用的函数，每个函数负责解析特定的语法结构。

scss 复制代码

// 解析函数声明的简化示例
function parseFunctionDeclaration(): FunctionDeclaration {
// 当前标记必须是 function 关键字
  parseExpected(SyntaxKind.FunctionKeyword);

// 解析函数名
const name = parseIdentifier();

// 解析参数列表
  parseExpected(SyntaxKind.OpenParenToken);
const parameters = parseParameterList();
  parseExpected(SyntaxKind.CloseParenToken);

// 解析返回类型（如果有）
let returnType = undefined;
if (parseOptional(SyntaxKind.ColonToken)) {
    returnType = parseTypeAnnotation();
  }

// 解析函数体
const body = parseBlock();

return createFunctionDeclaration(name, parameters, returnType, body);
}

解析器需要处理语法歧义、错误恢复和优先级规则。例如，表达式 a + b * c 中，乘法运算符 * 的优先级高于加法运算符 +，解析器需要正确构建反映这一优先级的 AST。

绑定器：建立符号与作用域

AST 描述了程序的语法结构，但它缺少重要的语义信息，如变量引用指向哪个声明、哪些名称可见等。绑定器（Binder）填补了这一空白，它为 AST 注入符号（Symbol）和作用域（Scope）信息。

符号与声明

在 TypeScript 中，符号代表程序中的命名实体，如变量、函数、类、接口等。每个符号可能有多个声明，例如：

typescript 复制代码

// 变量声明
let max: number;
// 函数声明
function max(a: number, b: number): number {
  return a > b ? a : b;
}

这里的 max 有两个声明，绑定器会为它创建一个符号，并将这两个声明关联到这个符号。

作用域链

绑定器构建嵌套的作用域链，确定每个标识符在程序中的可见性：

ini 复制代码

function outer() {
  const x = 10;

  function inner() {
    const y = 20;
    console.log(x + y); // x 从外部作用域访问
  }

  inner();
}

在这个例子中，有三个作用域：全局作用域、outer 函数作用域和 inner 函数作用域。变量 x 在 inner 函数中可见是因为作用域链的存在。

绑定器通过深度优先遍历 AST，为每个块级结构创建作用域，并在合适的作用域中注册声明。

scss 复制代码

// 简化的绑定过程示例
function bind(node: Node, enclosingScope: Scope): Scope {
// 为块级结构创建新作用域
let currentScope = isBlockScoped(node)
    ? createScope(enclosingScope)
    : enclosingScope;

// 处理当前节点的声明
if (isDeclaration(node)) {
    const symbol = createSymbol(node);
    currentScope.set(symbol.name, symbol);
    node.symbol = symbol;
  }

// 递归处理子节点
for (const child of node.getChildren()) {
    bind(child, currentScope);
  }

return currentScope;
}

类型检查器：TypeScript 的核心

类型检查器（Type Checker）是 TypeScript 编译器最复杂的部分，它实现了 TypeScript 的类型系统。主要职责包括：

类型推断（Type Inference）
类型兼容性检查（Type Compatibility）
泛型实例化（Generic Instantiation）
上下文类型分析（Contextual Typing）
控制流分析（Control Flow Analysis）

类型推断的智能性

TypeScript 的类型推断能够从上下文推导出变量和表达式的类型，无需显式注解：

javascript 复制代码

// 从初始化表达式推断类型
const name = "TypeScript"; // 推断为 string 类型

// 从返回语句推断函数返回类型
function getLength(text: string) {
  return text.length; // 函数返回类型推断为 number
}

// 从使用上下文推断泛型类型参数
const numbers = [1, 2, 3].map((n) => n * 2); // numbers 推断为 number[]

结构化类型系统

与 Java 或 C# 等使用名义类型系统（Nominal Typing）的语言不同，TypeScript 采用结构化类型系统（Structural Typing）。类型的兼容性基于结构而非名称：

typescript 复制代码

interface Point {
  x: number;
  y: number;
}

class Coordinate {
  constructor(public x: number, public y: number) {}
}

// 尽管 Point 和 Coordinate 是不同的类型，但它们结构兼容
const point: Point = new Coordinate(10, 20); // 有效

类型检查器会递归比较类型的结构，确保赋值和传参操作类型安全。

控制流类型分析

TypeScript 可以根据控制流语句（如条件判断、类型断言）缩小变量的类型范围，这被称为类型缩窄（Type Narrowing）：

lua 复制代码

function process(input: string | number) {
  if (typeof input === "string") {
    // 在这个分支中，input 的类型被缩窄为 string
    return input.toUpperCase();
  } else {
    // 在这个分支中，input 的类型被缩窄为 number
    return input.toFixed(2);
  }
}

类型检查器通过跟踪每个程序点的变量类型实现这一功能，这需要复杂的控制流分析。

内部表示与计算

类型检查器为每个表达式和声明计算类型，并将结果缓存以提高性能。类型系统内部使用类型标志（Type Flags）、类型 ID 和其他元数据来表示和操作类型。

typescript 复制代码

// 类型表示的简化示例
interface Type {
  flags: TypeFlags; // 类型种类：基本类型、联合类型、交叉类型等
  symbol?: Symbol; // 关联的符号（对于命名类型）
  properties?: Map<string, Symbol>; // 类型的属性（对于对象类型）
  typeParameters?: Type[]; // 类型参数（对于泛型类型）
  // ... 其他属性
}

类型检查是计算密集型操作，TypeScript 编译器采用了多种优化技术，如惰性计算、结果缓存和增量分析，以提高性能。

转换器：从 TypeScript 到 JavaScript

类型检查完成后，转换器（Transformer）将 TypeScript AST 转换为目标 JavaScript 版本的 AST。这个过程主要涉及两方面：

类型擦除：移除所有类型注解和接口定义
语言特性转换：将高级语言特性转换为目标 JavaScript 版本支持的等价形式

类型擦除的精确性

类型擦除需要精确移除类型相关的语法结构，同时保留运行时行为：

javascript 复制代码

// TypeScript 源码
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// 转换后的 JavaScript（类型擦除）
function greet(name) {
  return `Hello, ${name}!`;
}

对于更复杂的类型语法，转换过程也更加复杂：

ini 复制代码

// TypeScript 源码
type Status = "pending" | "fulfilled" | "rejected";
interface Result<T> {
  status: Status;
  value?: T;
  error?: Error;
}

// 转换后，这些类型定义完全消失

高级特性转换

TypeScript 支持许多 JavaScript 新特性，转换器可以将这些特性转换为兼容的等价形式：

ini 复制代码

// TypeScript 源码（使用类字段和箭头函数）
class Counter {
  count = 0;
  increment = () => {
    this.count++;
  };
}

// 转换为 ES5（假设目标为 ES5）
var Counter = /** @class */ (function () {
function Counter() {
    var _this = this;
    this.count = 0;
    this.increment = function () {
      _this.count++;
    };
  }
return Counter;
})();

// TypeScript 枚举
enum Direction {
  Up,
  Down,
  Left,
  Right,
}

// 转换为 JavaScript
var Direction;
(function (Direction) {
  Direction[(Direction["Up"] = 0)] = "Up";
  Direction[(Direction["Down"] = 1)] = "Down";
  Direction[(Direction["Left"] = 2)] = "Left";
  Direction[(Direction["Right"] = 3)] = "Right";
})(Direction || (Direction = {}));

转换器处理的其他高级特性包括：

枚举（Enums）
装饰器（Decorators）
异步函数（Async/Await）
可选链和空值合并（?. 和 ??）
解构赋值和展开运算符

转换框架与插件系统

TypeScript 转换器采用访问者模式（Visitor Pattern）实现，可以通过转换器插件自定义转换过程：

javascript 复制代码

// 转换器插件示例：将 const 声明转换为 let
function transformConstToLet(context) {
return(sourceFile) => {
    function visitor(node) {
      // 将 const 声明转换为 let
      if (node.kind === ts.SyntaxKind.ConstKeyword) {
        return ts.factory.createToken(ts.SyntaxKind.LetKeyword);
      }
      // 递归访问子节点
      return ts.visitEachChild(node, visitor, context);
    }
    return ts.visitNode(sourceFile, visitor);
  };
}

发射器：生成最终输出

发射器（Emitter）是编译流程的最后一站，它将转换后的 AST 转换为文本形式的 JavaScript 代码，并生成源映射和声明文件：

JavaScript 输出

发射器按照特定的规则将 AST 序列化为 JavaScript 文本，处理缩进、换行和注释：

scss 复制代码

// 简化的发射过程
function emitNode(node: Node, writer: TextWriter) {
switch (node.kind) {
    case SyntaxKind.FunctionDeclaration:
      writer.write("function ");
      emitNode(node.name, writer);
      writer.write("(");
      emitList(node.parameters, writer);
      writer.write(") {");
      writer.writeLine();
      writer.indent();
      emitNode(node.body, writer);
      writer.outdent();
      writer.write("}");
      break;
    // ... 其他节点类型
  }
}

声明文件生成

对于库和模块，TypeScript 可以生成声明文件（.d.ts），这些文件只包含类型信息，没有实现细节：

typescript 复制代码

// 源文件：utils.ts
export function formatDate(date: Date): string {
  return date.toISOString().split("T")[0];
}

// 生成的声明文件：utils.d.ts
export declare function formatDate(date: Date): string;

声明文件使得其他 TypeScript 项目可以使用该库的类型信息，而无需访问源代码。

源映射生成

源映射（Source Map）文件建立了生成的 JavaScript 代码与原始 TypeScript 源代码之间的映射关系，便于调试：

json 复制代码

{
  "version": 3,
  "file": "app.js",
  "sourceRoot": "",
  "sources": ["app.ts"],
  "names": [],
  "mappings": "AAAA;AACA;AACA;AACA;..."
}

"mappings" 字段使用一种特殊的编码格式，表示生成代码中每一行和列与原始源代码的对应关系。这使得浏览器开发工具可以在调试时显示原始 TypeScript 源代码。

高级编译特性与优化

增量编译的实现机制

TypeScript 的增量编译通过构建依赖图和智能缓存加速编译过程：

文件依赖跟踪：分析每个文件的导入和导出，构建依赖图
构建信息缓存 ：在 .tsbuildinfo 文件中存储上次构建的信息
最小重新构建：只重新编译已更改的文件及其依赖

css 复制代码

// .tsbuildinfo 文件（简化示例）
{
  "program": {
    "fileInfos": {
      "src/utils.ts": { "signature": "2a4e34...", "mtime": 1629364750000 },
      "src/app.ts": { "signature": "8b7c12...", "mtime": 1629364752000 }
    },
    "options": { "target": 1, "module": 1, ... },
    "referencedMap": {
      "src/app.ts": ["src/utils.ts"]
    }
  }
}

项目引用系统

对于大型项目，TypeScript 支持项目引用（Project References），允许将代码库分割为更小的部分：

json 复制代码

// 主项目的 tsconfig.json
{
  "compilerOptions": {
    "outDir": "dist"
  },
  "references": [{ "path": "../common" }, { "path": "../server" }]
}

项目引用系统实现了增量构建和智能输出缓存，显著提高大型项目的编译性能。

编译性能优化

TypeScript 编译器采用多种策略优化性能：

惰性求值：类型只在需要时才计算
缓存机制：缓存类型检查结果和中间状态
并行处理：部分编译阶段支持并行执行
内存管理：对象池和高效数据结构减少内存消耗
灯塔文件（watchMode）：最小化文件系统监视开销

为什么在 vscode 中编写 TS 代码的时候，如果类型有错能立刻检测到？

TypeScript 能够在代码编写过程中实时报错（如在 VS Code 中），这种能力通过 TypeScript 的语言服务（Language Service）实现。这一系统与常规的编译流程密切相关，但又针对编辑体验做了特殊优化。

TypeScript 语言服务的核心功能

TypeScript 语言服务为编辑器提供了丰富的智能特性。当你在 VS Code 中编写代码时，语言服务会实时分析你的代码，提供类型检查并立即显示错误。除此之外，它还支持智能代码补全，帮助你快速编写符合类型要求的代码；提供重构工具，简化变量重命名和函数提取等操作；以及各种导航功能，让你轻松跳转到定义或查找引用。

实时报错如何工作

实时报错的工作流程是一个精心设计的过程。首先，VS Code 等编辑器内置了与 TypeScript 语言服务通信的客户端组件。当你编辑代码时，编辑器会将文本变更实时发送给语言服务。

接收到变更后，语言服务采用增量分析策略，只重新检查发生变化的文件及其直接依赖，而不是完整重新编译整个项目。这种方法依赖于缓存的抽象语法树和类型信息，大大加快了分析速度。

所有的类型检查都在后台线程中进行，不会阻塞编辑器的响应。检查完成后，发现的错误和警告会被发送回编辑器，然后通过红色波浪线等视觉提示直观地显示出来。

当你继续修改代码时，语言服务会智能地识别哪些部分受到了影响，只重新检查这些区域。这种增量更新机制确保了即使在大型项目中也能保持良好的性能和响应速度。

与传统编译过程的区别

作者：前端面试导航

语言服务的实时类型检查与使用 tsc 命令进行的完整编译有本质区别。语言服务优先考虑的是快速响应和低内存消耗，为编辑体验做了优化；而完整编译器则注重全面彻底的类型检查和最终代码生成。

在处理不完整代码时，两者的表现也有差异。语言服务对未完成的代码更为宽容，即使代码片段不完整，也会尝试提供有用的反馈；而传统编译器则往往要求完整有效的代码结构。

作用范围上也存在明显不同。实时分析时，语言服务通常只关注当前打开的文件及其直接依赖的模块；而完整编译过程则会处理项目中定义的所有源文件，进行全面检查。

技术实现细节

在技术实现层面，VS Code 会启动一个名为 tsserver 的守护进程。这个进程负责加载并运行 TypeScript 语言服务，处理来自编辑器的请求。

语言服务建立了完整的文件监视机制，能够检测文件系统的变化。当项目中的文件（特别是被导入的模块）发生变化时，相关的分析结果会自动更新。

为了理解项目结构，语言服务会读取 tsconfig.json 配置文件，从中获取编译选项、包含文件的规则等信息。这些配置指导着类型检查的行为和范围。

一个重要的优化是内存中的源文件表示。编辑器中正在编辑的文件版本会保存在内存中，这使得语言服务可以立即分析最新的代码状态，而不需要等待文件保存到磁盘。

这种精心设计的实时反馈机制是 TypeScript 提升开发效率的关键因素之一。它允许开发者在编写代码的同时就能发现并修复类型错误，避免了错误在项目中传播，大大提高了代码质量和开发体验。

总结

TypeScript 编译器是一个复杂的系统，通过扫描器、解析器、绑定器、类型检查器、转换器和发射器六个主要阶段，将带类型的 TypeScript 代码转换为可执行的 JavaScript。在 VS Code 等编辑器中，TypeScript 能够实时检测错误是因为内置了语言服务，它在后台进行增量分析并立即提供反馈，只检查变化的部分而非整个项目。这种设计使开发者能在编写代码的同时发现并修复类型错误，大大提高了开发效率和代码质量。