在上一節介紹了標記的解析，就相當於識別了一句話里有哪些詞語，接下來就是把這些詞語組成完整的句子，即拼裝標記為語法樹。
樹（tree）
樹是計算機數據結構里的專業術語。就像一個學校有很多年級，每個年級下面有很多班，每個班級下面有很多學生，這種組織結構就叫樹。
- 組成樹的每個部分稱為節點（Node）；
- 最頂層的節點（即例子中的學校）稱為根節點（Root Node）；
- 和每個節點的下級節點稱為這個節點的子節點(Child Node，注意不叫 Subnode)（班級是年級的子節點）；
- 反過來，每個節點的上級節點稱為這個節點的父節點(Parent node)（年級是班級的父節點）；
- 一個節點的子節點以及子節點的子節點統稱為這個節點的后代節點（Descendant node）；
- 一個節點的父節點以及父節點的父節點統稱為這個節點的祖父節點（Ancestor node）。
很多人一提到樹就想起二叉樹，說明你壓根不懂什么是樹。二叉樹只是樹的一種。二叉樹被用的最多的地方在試卷，請忘掉這個詞。
從樹中的任一個節點開始，都可以遍歷這個節點的所有后代節點。因為節點不會出現循環關系，所以遍歷樹也不會出現死循環。
遍歷節點的順序有有很多，沒特別說明的話，是按照先父節點、再子節點，同級節點則從左到右的順序（圖中編號順序）。
語法樹（Syntax Tree）
語法樹用於表示解析之后的代碼結構的一種樹。
比如以下代碼解析后的語法樹如圖：
var x = ['l', [100]]
if (x) { foo(x) }
其中，源文件(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 是表達式，它們同時又是一個表達式語句。所以以上代碼的語法樹如圖：
常見的賦值、函數調用語句都其實是一個表達式語句。
塊語句（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 中，需要先算乘號。生成的語法樹節點如下：
通過節點的層次關系，實現了這種優先級的效果（因為永遠不會把圖里的 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 型的值並終止循環。
小結
掌握語法樹是掌握整個編譯系統的基礎。你應該可以深刻地知道語法樹的大概樣子，並清楚每種語法的語法樹結構。如果還沒有徹底掌握，可以使用上文推薦的工具。
下一節將介紹生成語法樹的全過程。#更新於 2020-2-8 #