TypeScript 源码详细解读(4)语法1-语法树

pwc

2020-01-28

关注关注

在上一节介绍了标记的解析，就相当于识别了一句话里有哪些词语，接下来就是把这些词语组成完整的句子，即拼装标记为语法树。

树（tree）

树是计算机数据结构里的专业术语。就像一个学校有很多年级，每个年级下面有很多班，每个班级下面有很多学生，这种组织结构就叫树。

组成树的每个部分称为节点（Node）；
最顶层的节点（即例子中的学校）称为根节点（Root Node）；
和每个节点的下级节点称为这个节点的子节点(Child Node，注意不叫 Subnode)（班级是年级的子节点）；
反过来，每个节点的上级节点称为这个节点的父节点(Parent node)（年级是班级的父节点）；
一个节点的子节点以及子节点的子节点统称为这个节点的后代节点（Descendant node）；
一个节点的父节点以及父节点的父节点统称为这个节点的祖父节点（Ancestor node）。

TypeScript 源码详细解读(4)语法1-语法树

很多人一提到树就想起二叉树，说明你压根不懂什么是树。二叉树只是树的一种。二叉树被用的最多的地方在试卷，请忘掉这个词。

从树中的任一个节点开始，都可以遍历这个节点的所有后代节点。因为节点不会出现循环关系，所以遍历树也不会出现死循环。

遍历节点的顺序有有很多，没特别说明的话，是按照先父节点、再子节点，同级节点则从左到右的顺序（图中编号顺序）。

TypeScript 源码详细解读(4)语法1-语法树

语法树（Syntax Tree）

语法树用于表示解析之后的代码结构的一种树。

比如以下代码解析后的语法树如图：

var x = [‘l‘, [100]]
if (x) {
    foo(x)
}

TypeScript 源码详细解读(4)语法1-语法树

其中，源文件(Source File)是语法树的根节点。

语法树中有很多种类的节点，根据种类的不同，这些节点的子节点种类也会变化。比如：

“if 语句”节点，只有“条件表达式”、“则部分”和“否则部分”(可能为空)三个子节点。
“双目表达式(x + y)”节点，只有“左值表达式”和“右值表达式”两个子节点。

TypeScript 中，节点有约 100 种，它们都继承 “Node” 接口：

export interface Node extends TextRange {
        kind: SyntaxKind;
        flags: NodeFlags;
        parent: Node;
        //  ...(略)
}

Node 接口中 kind 枚举用于标记这个节点的种类。

TypeScript 将表示标记种类的枚举和表示节点种类的枚举合并成一个了（这可能也是导致很多人读不懂代码的原因之一）：

export const enum SyntaxKind {
        // ...(略)
       TemplateSpan,
        SemicolonClassElement,
        // Element
        Block,
        EmptyStatement,
        VariableStatement,
        ExpressionStatement,
        IfStatement,
        DoStatement,
        WhileStatement,
        ForStatement,
        ForInStatement,
        ForOfStatement,
        ContinueStatement,
        BreakStatement,
        // ...(略)
}

如果你深知“学而不思则罔”的道理，现在应该会思考这样一个问题：那到底有哪 100 种语法节点呢？

这里先推荐一个工具：https://astexplorer.net/

这个工具可以在左侧输入代码，右侧查看实时生成的语法树（以 JSON 方式展示）。读者可以在这个工具顶部选择“JavaScript”语言和“typescript”编译器，查看 TypeScript 生成的语法树结构。

为了帮助英文文盲们更好地理解语法类型，读者可参考：https://github.com/meriyah/meriyah/wiki/ESTree-Node-Types-Table

语法节点分类

虽然语法节点种类很多，但其实只有四类：

类型节点（Type Node）：一般出现在“:”后面（var a: 类型节点)，可以解析为一个类型。
表达式节点（Expression）：可以计算得到一个值的节点，表达式节点只能依附于一个语句节点，不能独立使用。
语句节点（Statement）：可以直接在最外层使用的节点，俗称的几行代码就是指几个语句节点。
其它节点：其它内嵌在表达式或语句节点的特定节点，比如 case 节点。

在 TypeScript 中，节点命名比较规范，一般类型节点以 TypeNode 结尾；表达式节点以 Expression 结尾；语句节点以 Statement 结尾。

比如 if 语句节点：

export interface IfStatement extends Statement {
    kind: SyntaxKind.IfStatement;
    expression: Expression;
    thenStatement: Statement;
    elseStatement?: Statement;
}

鉴于有些读者对部分语法比较陌生，这里可以说明一些可能未正确理解的节点类型

表达式语句（ExpressionStatement）

export interface ExpressionStatement extends Statement, JSDocContainer {
    kind: SyntaxKind.ExpressionStatement;
    expression: Expression;
}

表达式是不能直接出现在最外层的，但以下代码是允许的：

var x = 1;
1 + 1; // 这是表达式

因为 1 + 1 是表达式，它们同时又是一个表达式语句。所以以上代码的语法树如图：

TypeScript 源码详细解读(4)语法1-语法树

常见的赋值、函数调用语句都其实是一个表达式语句。

块语句（BlockStatement）

一对“{}”本身也是一个语句，称为块语句。一个块语句可以包含若干个语句。

export interface Block extends Statement {
    kind: SyntaxKind.Block;
    statements: NodeArray<Statement>;
    /*@internal*/ multiLine?: boolean;
}

比如 while 语句的主体只能是一条语句：

export interface IterationStatement extends Statement {
    statement: Statement;
}
export interface WhileStatement extends IterationStatement {
    kind: SyntaxKind.WhileStatement;
    expression: Expression;
}

但 while 里面明明是可以写很多语句的：

while(x_d) {
    var a = 120;
    var b = 100;
}

本质上，当我们使用 {} 时，就已经使用了一个块语句，while 的主体仍然是一个语句：块语句。其它语句都是块语句的子节点。

标签语句（LabeledStatement）

export interface LabeledStatement extends Statement, JSDocContainer {
    kind: SyntaxKind.LabeledStatement;
    label: Identifier;
    statement: Statement;
}

通过标签语句可以为语句命名，比如：

label: var x = 120;

命名后有啥用？可以在 break 或 continue 中引用该名称，以此实现跨级 break 和 continue 的效果：

export interface BreakStatement extends Statement {
    kind: SyntaxKind.BreakStatement;
    label?: Identifier; // 跳转的标签名
}

export interface ContinueStatement extends Statement {
    kind: SyntaxKind.ContinueStatement;
    label?: Identifier; // 跳转的标签名
}

运算符的优先级

比如 x + y * z 中，需要先算乘号。生成的语法树节点如下：

TypeScript 源码详细解读(4)语法1-语法树

通过节点的层次关系，实现了这种优先级的效果（因为永远不会把图里的 x 和 y 先处理）。

因此创建语法树的同时，也就处理了优先级的问题，括号完全可以从语法树中删除。

类

一个复杂的类，也能用语法树表示？

当然，任何语法最后都是用语法树表达的，只不过类确实复杂一些：

export interface Declaration extends Node {
    _declarationBrand: any;
}

export interface NamedDeclaration extends Declaration {
    name?: DeclarationName;
}

export interface ClassLikeDeclarationBase extends NamedDeclaration, JSDocContainer {
    kind: SyntaxKind.ClassDeclaration | SyntaxKind.ClassExpression;
    name?: Identifier;
    typeParameters?: NodeArray<TypeParameterDeclaration>;
    heritageClauses?: NodeArray<HeritageClause>;
    members: NodeArray<ClassElement>;
}

export interface ClassDeclaration extends ClassLikeDeclarationBase, DeclarationStatement {
    kind: SyntaxKind.ClassDeclaration;
    /** May be undefined in `export default class { ... }`. */
    name?: Identifier;
}

类、函数、变量、导入声明严格意义上是独立的一种语法分类，但鉴于它和其它语句用法一致，为了便于理解，这里把声明作语句的一种看待。

节点位置

当源代码被解析成语法树后，源代码就不再需要了。如果后续流程发现一个错误，编译器需要向用户报告，并指出错误位置。

为了可以得到这个位置，需要将节点在源文件种的位置保存下来：

export interface TextRange {
    pos: number;
    end: number;
}
 export interface Node extends TextRange {
        kind: SyntaxKind;
        flags: NodeFlags;
        parent: Node;
        //  ...(略)
}

通过节点的 parent 可以找到节点的根节点，即所在的文件；通过节点的 pos 和 end 可以确定节点在源文件的行列号（具体已经在第二节：标记位置中介绍）。

遍历节点

为了方便程序中遍历任意节点，TypeScript 提供了一个工具函数：

/**
 * Invokes a callback for each child of the given node. The ‘cbNode‘ callback is invoked for all child nodes
 * stored in properties. If a ‘cbNodes‘ callback is specified, it is invoked for embedded arrays; otherwise,
 * embedded arrays are flattened and the ‘cbNode‘ callback is invoked for each element. If a callback returns
 * a truthy value, iteration stops and that value is returned. Otherwise, undefined is returned.
 *
 * @param node a given node to visit its children
 * @param cbNode a callback to be invoked for all child nodes
 * @param cbNodes a callback to be invoked for embedded array
 *
 * @remarks `forEachChild` must visit the children of a node in the order
 * that they appear in the source code. The language service depends on this property to locate nodes by position.
 */
export function forEachChild<T>(node: Node, cbNode: (node: Node) => T | undefined, cbNodes?: (nodes: NodeArray<Node>) => T | undefined): T | undefined {
    if (!node || node.kind <= SyntaxKind.LastToken) {
        return;
    }
    switch (node.kind) {
        case SyntaxKind.QualifiedName:
            return visitNode(cbNode, (<QualifiedName>node).left) ||
                visitNode(cbNode, (<QualifiedName>node).right);
        case SyntaxKind.TypeParameter:
            return visitNode(cbNode, (<TypeParameterDeclaration>node).name) ||
                visitNode(cbNode, (<TypeParameterDeclaration>node).constraint) ||
                visitNode(cbNode, (<TypeParameterDeclaration>node).default) ||
                visitNode(cbNode, (<TypeParameterDeclaration>node).expression);
        case SyntaxKind.ShorthandPropertyAssignment:
            return visitNodes(cbNode, cbNodes, node.decorators) ||
                visitNodes(cbNode, cbNodes, node.modifiers) ||
                visitNode(cbNode, (<ShorthandPropertyAssignment>node).name) ||
                visitNode(cbNode, (<ShorthandPropertyAssignment>node).questionToken) ||
        // ...(略)
    }
}

forEachChild 函数只会遍历节点的直接子节点，如果用户需要递归遍历所有子节点，需要递归调用 forEachChild。forEachChild 接收一个函数用于遍历，并允许用户返回一个 true 型的值并终止循环。

小结

掌握语法树是掌握整个编译系统的基础。你应该可以深刻地知道语法树的大概样子，并清楚每种语法的语法树结构。如果还没有彻底掌握，可以使用上文推荐的工具。

下一节将介绍生成语法树的全过程。【不定时更新】

pwc

0 关注 0 粉丝 0 动态

关注关注

安科网

TypeScript 源码详细解读(4)语法1-语法树

pwc

树（tree）

语法树（Syntax Tree）

语法节点分类

表达式语句（ExpressionStatement）

块语句（BlockStatement）

标签语句（LabeledStatement）

运算符的优先级

类

节点位置

遍历节点

小结

pwc

pwc