《深入理解 Babel》 · 刘远洋

2022-10-7 About 16 min

理解和使用 Babel，尤其是编写和理解 Babel 插件时，不可避免地需要接触 Babel 定义的 AST 节点。而寻找节点定义和各节点的含义，通常需要翻阅 Babel 源码并联系上下文了解。本章列举了每个节点定义对应的定义、解释、案例等，便于开发者理解和使用。

Babel 支持 ECMAScript 已发布标准、ECMAScript 各阶段提案、JSX、TypeScript、Flow 等语法特性，自然有对应的 AST 节点定义。

社区有一个关于 JavaScript AST 格式的规范：The ESTree Spec。Babel AST 格式继承自 The ESTree Spec，并有一些修改。

# 4.1 标准化

# 4.1.1 The ESTree Spec 简介

The ESTree Spec: https://github.com/estree/estree

最初，JavaScript 之父 Brendan Eich 设计了第一代 JS 引擎 SpiderMonkey，后交与 Mozilla 维护。

一位 Mozilla 工程师在 Firefox 中创建的 SpiderMonkey 引擎输出了 JavaScript AST 的规范文档，用于描述 Mozilla JavaScript Parser API。随着 JavaScript 更多语法的加入，该规范文档演变为 The ESTree Spec，作为参与构建和使用JavaScript Parser 工具的人员的社区标准。

现在，Babel 和 SpiderMonkey 引擎的 AST 格式，基于社区规范 The ESTree Spec。

# 4.1.2 The ESTree Spec 格式规范

The ESTree Spec 使用自定义的格式描述 AST 节点，比如 Program 节点：

extend interface Program {
    sourceType: "script" | "module";
    body: [ Statement | ModuleDeclaration ];
}
1
2
3
4

对于继承关系，使用 <: 描述，比如 SpreadElement 节点：

interface SpreadElement <: Node {
    type: "SpreadElement";
    argument: Expression;
}
1
2
3
4

SpreadElement（如 [head, ...body, tail] 中的 ...body）节点，继承自 Node 节点。

# 4.1.3 版权和许可

版权所有 Mozilla 贡献者和 ESTree 贡献者。

根据 Creative Commons ShareLike 授权。

# 4.1.4 原则

  • 向后兼容（Backwards compatible）

    对现有结构的修改将不会被考虑，除非这样的改变有大量支持。

  • 上下文无关（Contextless）

    节点不应保留其父节点的任何信息。例如，FunctionExpression 节点不应该知道它是否是一个简洁的方法。

  • 唯一性（Unique）

    信息不应重复。例如，kind 属性不应该出现在 Literal节点上，如果可以从 value 属性的值类型间接识别出该类型。

  • 可扩展

    新的节点需允许将来扩展。这意味着扩大节点类型的覆盖范围。即 MetaProperty 覆盖 NewTarget 以涵盖未来的元属性。

# 4.2 Babel节点

Babel 中使用的 AST 节点规范继承自 The ESTree Spec，并添加了自身的特定描述。

Babel 节点定义的描述，位于 babel/packages/babel-parser/ast/ 目录下:

spec.md: 标准节点
jsx.md: jsx 节点
flow.md: flow 节点
1
2
3

https://vincent0700.com/2020/05/27/056_Javascript_ast/

# 4.2.1 基本节点（Node）

  • 节点定义

    interface Node {
    type: string;
    loc: SourceLocation | null;
}

interface SourceLocation {
    source: string | null;
    start: Position;
    end: Position;
}

interface Position {
    line: number; // >= 1
    column: number; // >= 0
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

  • 描述

    所有 AST 节点均是 Node 节点的实例

    1. type 表示不同节点的类型名称
    2. loc 表示源码信息

# 4.2.2 根节点（Programs）

  • 节点定义

    interface Program <: Node {
  type: "Program";
  interpreter: InterpreterDirective | null;
  sourceType: "script" | "module";
  body: [ Statement | ModuleDeclaration ];
  directives: [ Directive ];
}
    1
    2
    3
    4
    5
    6
    7

  • 描述

    根节点，AST 顶部节点

    body 是一个数组，包括语句和模块声明。

    如果是 ES6 模块，必须指定 sourceType 为 module，否则指定为 script。

# 4.2.3 标识符（Identifier）

  • 节点定义

    interface Identifier <: Expression, Pattern {
    type: "Identifier";
    name: string;
}
    1
    2
    3
    4

  • 描述

    标识符。

    即自定义名称，如变量名、属性名、函数名。

    一个标识符可以是一个表达式(Expression)，或者是解构(Pattern)。

# 4.2.4 PrivateName

  • 节点定义

    interface PrivateName <: Node {
  type: "PrivateName";
  id: Identifier;
}
    1
    2
    3
    4

  • 描述

    表示私有的标识符。

# 4.2.5 字面量（Literals）

Literals 继承自表达式节点。

# Literal

  • 节点定义

    interface Literal <: Expression {
    type: "Literal";
    value: string | boolean | null | number | RegExp;
}
    1
    2
    3
    4

  • 描述

    字面量。

    是本身代表一个值的字面量，包括字符串，布尔，数值，null 和正则。

# RegExpLiteral

  • 节点定义

    interface RegExpLiteral <: Literal {
  type: "RegExpLiteral";
  pattern: string;
  flags: string;
}
    1
    2
    3
    4
    5

  • 描述

    正则字面量。

    1. pattern: 正则表达式内容字符，如 /a/i 中的 "a"
    2. flags: i、g 等标志

# NullLiteral

  • 节点定义

    interface NullLiteral <: Literal {
  type: "NullLiteral";
}
    1
    2
    3

  • 描述

    null 字面量。

# StringLiteral

  • 节点定义

    interface StringLiteral <: Literal {
  type: "StringLiteral";
  value: string;
}
    1
    2
    3
    4

  • 描述

    字符串字面量。

# BooleanLiteral

  • 节点定义

    interface BooleanLiteral <: Literal {
  type: "BooleanLiteral";
  value: boolean;
}
    1
    2
    3
    4

  • 描述

    布尔值字面量。

# NumericLiteral

  • 节点定义

    interface NumericLiteral <: Literal {
  type: "NumericLiteral";
  value: number;
}
    1
    2
    3
    4

  • 描述

    数字字面量。

# BigIntLiteral

  • 节点定义

    interface BigIntLiteral <: Literal {
  type: "BigIntLiteral";
  value: string;
}
    1
    2
    3
    4

  • 描述

    BigInt 字面量。

# DecimalLiteral

  • 节点定义

    interface DecimalLiteral <: Literal {
  type: "DecimalLiteral";
  value: string;
}
    1
    2
    3
    4

  • 描述

    TODO

# TemplateLiteral

  • 节点定义

    interface TemplateLiteral <: Expression {
  type: "TemplateLiteral";
  quasis: [ TemplateElement ];
  expressions: [ Expression ];
}
    1
    2
    3
    4
    5

  • 描述

    模板字面量。

    Hello ${name}。

# TemplateElement

  • 节点定义

    interface TemplateElement <: Node {
  type: "TemplateElement";
  tail: boolean;
  value: {
    cooked: string | null;
    raw: string;
  };
}
    1
    2
    3
    4
    5
    6
    7
    8

  • 描述

    模板元素。

# TaggedTemplateExpression

  • 节点定义

    interface TaggedTemplateExpression <: Expression {
  type: "TaggedTemplateExpression";
  tag: Expression;
  quasi: TemplateLiteral;
}
    1
    2
    3
    4
    5

  • 描述

    带标签的模板字符串表达式

    function tagFunc(...args) {
  return args;
}
const setting = 'dark mode';
console.log(tagFunc`Setting ${ setting } is ${ value }!`);
    1
    2
    3
    4
    5

# 4.2.6 函数（Functions）

Functions 继承自 Node 节点。

  • 节点定义

    interface Function <: Node {
  id: Identifier | null;
  params: [ Pattern ];
  body: BlockStatement;
  generator: boolean;
  async: boolean;
}
    1
    2
    3
    4
    5
    6
    7

  • 描述

    函数声明或函数表达式

    1. id: 函数名
    2. params: 参数，是一个数组
    3. body: 块语句
    4. generator: 是否有 generator 标记
    5. async: 是否有 async 标记

    说明：该节点不会出现在用户测试结果中，但会出现

    1. FunctionDeclaration
    2. FunctionExpression

    因为函数要么以函数声明出现，要么以函数表达式出现。

# 4.2.7 语句（Statements）

Statements 继承自 Node 节点。

Program 作为根节点，由 Statement 和 ModuleDeclaration 组成，语句（Statement）是 AST 中非常重要的角色。

# （1）基础语句

# Statement

  • 节点定义

    interface Statement <: Node { }
    1

  • 描述

    语句。有多种语句。

# ExpressionStatement

  • 节点定义

    interface ExpressionStatement <: Statement {
  type: "ExpressionStatement";
  expression: Expression;
}
    1
    2
    3
    4

  • 描述

    表达式语句。

    如 1 + 1。

# BlockStatement

  • 节点定义

    interface BlockStatement <: Statement {
  type: "BlockStatement";
  body: [ Statement ];
  directives: [ Directive ];
}
    1
    2
    3
    4
    5

  • 描述

    块语句

    {[body]}
    1

    例如：if (...) { // 块语句部分 }

    1. body: 内容节点列表
    2. directives: ???

# EmptyStatement

  • 节点定义

    interface EmptyStatement <: Statement {
  type: "EmptyStatement";
}
    1
    2
    3

  • 描述

    空语句

    ;
    1

# DebuggerStatement

  • 节点定义

    interface DebuggerStatement <: Statement {
  type: "DebuggerStatement";
}
    1
    2
    3

  • 描述

    调试语句。

    debugger;
    1

# WithStatement

  • 节点定义

    interface WithStatement <: Statement {
  type: "WithStatement";
  object: Expression;
  body: Statement;
}
    1
    2
    3
    4
    5

  • 描述

    with 语句。

    with ([object]) {[body]}
    1

# （2）流程控制语句（Statements > Control flow）

# ReturnStatement

  • 节点定义

    interface ReturnStatement <: Statement {
  type: "ReturnStatement";
  argument: Expression | null;
}
    1
    2
    3
    4

  • 描述

    返回语句。

    return [argument]
    1

    argument 为表达式或 null。

# LabeledStatement

  • 节点定义

    interface LabeledStatement <: Statement {
  type: "LabeledStatement";
  label: Identifier;
  body: Statement;
}
    1
    2
    3
    4
    5

  • 描述

    标签语句。

    loop: … break loop;
    1

# BreakStatement

  • 节点定义

    interface BreakStatement <: Statement {
  type: "BreakStatement";
  label: Identifier | null;
}
    1
    2
    3
    4

  • 描述

    Break 语句。

    break [label?];
    1

# ContinueStatement

  • 节点定义

    interface ContinueStatement <: Statement {
  type: "ContinueStatement";
  label: Identifier | null;
}
    1
    2
    3
    4

  • 描述

    Continue 语句。

    continue [label?];
    1

# （3）条件语句（Statements > Choice）

# IfStatement

  • 节点定义

    interface IfStatement <: Statement {
    type: "IfStatement";
    test: Expression;
    consequent: Statement;
    alternate: Statement | null;
}
    1
    2
    3
    4
    5
    6

  • 描述

    if 语句。

    if ([test]) {[consequent]} else {[alternate]}
    1
    1. test 表示 if (...) 括号中的表达式
    2. consequent 表示条件为 true 时的执行语句，通常是一个块语句
    3. alternate 用来表示 else 后跟随的语句，通常也会是块语句，也可以又是一个 if 语句，例如 else if (...)，也可以是 null

# SwitchStatement

  • 节点定义

    interface SwitchStatement <: Statement {
  type: "SwitchStatement";
  discriminant: Expression;
  cases: [ SwitchCase ];
}
    1
    2
    3
    4
    5

  • 描述

    switch 语句。

    switch ([discriminant]) {[cases]}
    1
    1. discriminant: switch 后紧跟的表达式
    2. cases: switchCase 节点数组

# SwitchCase

  • 节点定义

    interface SwitchCase <: Node {
  type: "SwitchCase";
  test: Expression | null;
  consequent: [ Statement ];
}
    1
    2
    3
    4
    5

  • 描述

    SwitchCase 节点。

    case: [test]: [consequent]
    1

# （4）异常语句（Statements > Exceptions）

# ThrowStatement

  • 节点定义

    interface ThrowStatement <: Statement {
  type: "ThrowStatement";
  argument: Expression;
}
    1
    2
    3
    4

  • 描述

    Throw 语句。

    throw [argument]
    1

# TryStatement

  • 节点定义

    interface TryStatement <: Statement {
  type: "TryStatement";
  block: BlockStatement;
  handler: CatchClause | null;
  finalizer: BlockStatement | null;
}
    1
    2
    3
    4
    5
    6

  • 描述

    Try 语句。

    try {[block]} catch {[handler]} finally {[finalizer]}
    1

# CatchClause

  • 节点定义

    interface CatchClause <: Node {
  type: "CatchClause";
  param?: Pattern;
  body: BlockStatement;
}
    1
    2
    3
    4
    5

  • 描述

    Catch 从句节点。

    ES2019 允许 catch 从句为空：try {} catch {}。

# （5）循环语句（Statements > Loops）

# WhileStatement

  • 节点定义

    interface WhileStatement <: Statement {
  type: "WhileStatement";
  test: Expression;
  body: Statement;
}
    1
    2
    3
    4
    5

  • 描述

    While 语句。

    while ([test] {[body]}
    1

# DoWhileStatement

  • 节点定义

    interface DoWhileStatement <: Statement {
  type: "DoWhileStatement";
  body: Statement;
  test: Expression;
}
    1
    2
    3
    4
    5

  • 描述

    DoWhile 语句。

    do {[test]} while ([body])
    1

# ForStatement

  • 节点定义

    interface ForStatement <: Statement {
  type: "ForStatement";
  init: VariableDeclaration | Expression | null;
  test: Expression | null;
  update: Expression | null;
  body: Statement;
}
    1
    2
    3
    4
    5
    6
    7

  • 描述

    for 语句。

    for ([init];[test];[update]) {[body]}
    1
    1. init/test/update: 分别表示 for 语句括号中的三部分，分别为初始化值、循环判断条件、变量更新操作；三个均可以为 null，即 for(;;){...}
    2. body: 循环执行的语句

# ForInStatement

  • 节点定义

    interface ForInStatement <: Statement {
  type: "ForInStatement";
  left: VariableDeclaration |  Expression;
  right: Expression;
  body: Statement;
}
    1
    2
    3
    4
    5
    6

  • 描述

    ForIn 语句。

    for ([left] in [right]) {[body]}
    1

# ForOfStatement

  • 节点定义

    interface ForOfStatement <: ForInStatement {
  type: "ForOfStatement";
  await: boolean;
}
    1
    2
    3
    4

  • 描述

    ForOf 语句.

    for (let [left] of [right])
    1

    await 表示是否为异步迭代器:

    for-await-of: for await (const x of obj) {}
    1

# 4.2.8 声明（Declarations）

声明继承自语句，即声明也是语句。

# Declaration

  • 节点定义

    interface Declaration <: Statement { }
    1

  • 描述

    声明语句。

    依然是语句，表示声明语句。有多种子类型。

# FunctionDeclaration

  • 节点定义

    interface FunctionDeclaration <: Function, Declaration {
  type: "FunctionDeclaration";
  id: Identifier;
}
    1
    2
    3
    4

  • 描述

    函数声明语句。

    function [id] ([params]) {[body]}
    1

    继承自 Function 节点，只是 id 不能为 null。

# VariableDeclaration

  • 节点定义

    interface VariableDeclaration <: Declaration {
  type: "VariableDeclaration";
  declarations: [ VariableDeclarator ];
  kind: "var" | "let" | "const";
}
    1
    2
    3
    4
    5

  • 描述

    变量声明，如 let a = 1; const b = 2, c = 3。

    1. kind: 表示是什么类型的声明
    2. declarations: 表示声明的多个描述，比如 let a = 1, b = 2;

# VariableDeclarator

  • 节点定义

    interface VariableDeclarator <: Node {
    type: "VariableDeclarator";
    id: Pattern;
    init: Expression | null;
}
    1
    2
    3
    4
    5

  • 描述

    变量声明的描述

    1. id 表示变量名称节点
    2. init 表示初始值的表达式，可以为 null

    例如:

    a = 1
    1

# 4.2.9 混合（Misc）

# Decorator

  • 节点定义

    interface Decorator <: Node {
  type: "Decorator";
  expression: Expression;
}
    1
    2
    3
    4

  • 描述

    装饰器。

# Directive

  • 节点定义

    interface Directive <: Node {
  type: "Directive";
  value: DirectiveLiteral;
}
    1
    2
    3
    4

  • 描述

    指令。

# DirectiveLiteral

  • 节点定义

    interface DirectiveLiteral <: StringLiteral {
  type: "DirectiveLiteral";
}
    1
    2
    3

  • 描述

    指令字面量。

# InterpreterDirective

  • 节点定义

    interface InterpreterDirective <: StringLiteral {
  type: "InterpreterDirective";
}
    1
    2
    3

  • 描述

    #! 字面量。

# 4.2.10 表达式（Expressions）

表达式继承自 Node 节点。

# Expression

  • 节点定义

    interface Expression <: Node { }
    1

  • 描述

    表达式节点。

# Super

  • 节点定义

    interface Super <: Node {
    type: "Super";
}
    1
    2
    3

  • 描述

    Super 表达式。

    super([arguments])
    1

# Import

  • 节点定义

    interface Import <: Node {
    type: "Import";
}
    1
    2
    3

  • 描述

    Import 表达式。

    import * from './a'
    1

# ThisExpression

  • 节点定义

    interface ThisExpression <: Expression {
  type: "ThisExpression";
}
    1
    2
    3

  • 描述

    This 表达式：this。

# ArrowFunctionExpression

  • 节点定义

    interface ArrowFunctionExpression <: Function, Expression {
  type: "ArrowFunctionExpression";
  body: BlockStatement | Expression;
}
    1
    2
    3
    4

  • 描述

    箭头函数表达式。

    () => {[body]}
    1

# YieldExpression

  • 节点定义

    interface YieldExpression <: Expression {
  type: "YieldExpression";
  argument: Expression | null;
  delegate: boolean;
}
    1
    2
    3
    4
    5

  • 描述

    Yield 表达式。

    yield [argument]
    1

# AwaitExpression

  • 节点定义

    interface AwaitExpression <: Expression {
  type: "AwaitExpression";
  argument: Expression | null;
}
    1
    2
    3
    4

  • 描述

    Await 表达式。

    await [argument]
    1

# ArrayExpression

  • 节点定义

    interface ArrayExpression <: Expression {
  type: "ArrayExpression";
  elements: [ Expression | SpreadElement | null ];
}
    1
    2
    3
    4

  • 描述

    数组表达式。

    如 "[1, 2, 3]"。

    elements 为数组，表示数组的多个元素，每个元素为表达式或 null。

# RecordExpression

  • 节点定义

    interface RecordExpression <: Expression {
  type: "RecordExpression";
  properties: [ 
    ObjectProperty | 
    ObjectMethod | 
    SpreadElement 
  ];
}
    1
    2
    3
    4
    5
    6
    7
    8

  • 描述

    Record 表达式，如 #{ a: 1, b: '2' }。

# TupleExpression

  • 节点定义

    interface TupleExpression <: Expression {
  type: "TupleExpression";
  elements: [ Expression | SpreadElement | null ];
}
    1
    2
    3
    4

  • 描述

    TODO

# FunctionExpression

  • 节点定义

    interface FunctionExpression <: Function, Expression {
  type: "FunctionExpression";
}
    1
    2
    3

  • 描述

    函数表达式。

    function ([params]) {[body]}
    1

# ConditionalExpression

  • 节点定义

    interface ConditionalExpression <: Expression {
  type: "ConditionalExpression";
  test: Expression;
  alternate: Expression;
  consequent: Expression;
}
    1
    2
    3
    4
    5
    6

  • 描述

    条件表达式。

    就是三元运算表达式，即 a > b ? c : d。

# CallExpression

  • 节点定义

    interface CallExpression <: Expression {
  type: "CallExpression";
  callee: Expression | Super | Import;
  arguments: [ Expression | SpreadElement ];
}
    1
    2
    3
    4
    5

  • 描述

    函数调用表达式。

    如 run(1, 2) 这样的表达式。

    1. callee: 表示函数，是表达式节点
    2. arguments: 表示参数，为 Expression 或 SpreadElement

# OptionalCallExpression

  • 节点定义

    interface OptionalCallExpression <: Expression {
  type: "OptionalCallExpression";
  callee: Expression;
  arguments: [ Expression | SpreadElement ];
  optional: boolean;
}
    1
    2
    3
    4
    5
    6

  • 描述

    可选执行方法节点。

    如 f?.()() 中的 ?.()。

# NewExpression

  • 节点定义

    interface NewExpression <: CallExpression {
    type: "NewExpression";
}
    1
    2
    3

  • 描述

    new 表达式。

    如 new Date()。

# SequenceExpression

  • 节点定义

    interface SequenceExpression <: Expression {
    type: "SequenceExpression";
    expressions: [ Expression ];
}
    1
    2
    3
    4

  • 描述

    Sequence 表达式。

    如 1, 2, 3。

# ParenthesizedExpression

  • 节点定义

    interface ParenthesizedExpression <: Expression {
    type "ParenthesizedExpression";
    expression: Expression;
}
    1
    2
    3
    4

  • 描述

    括号表达式。

# DoExpression

  • 节点定义

    interface DoExpression <: Expression {
    type: "DoExpression";
    body: BlockStatement;
}
    1
    2
    3
    4

  • 描述

    do 表达式。

    do { ... }
    1

# ObjectExpression

  • 节点定义

    interface ObjectExpression <: Expression {
    type: "ObjectExpression";
    properties: [ 
        ObjectProperty | 
        ObjectMethod | 
        SpreadElement 
    ];
}
    1
    2
    3
    4
    5
    6
    7
    8

  • 描述

    Object 表达式。

    如 "{ a: 1 }"

    properties 为数组，每个元素可以是：

    1. ObjectProperty 节点
    2. ObjectMethod 节点
    3. SpreadElement 节点

# ObjectProperty

  • 节点定义

    interface ObjectProperty <: ObjectMember {
    type: "ObjectProperty";
    shorthand: boolean;
    value: Expression;
}
    1
    2
    3
    4
    5

  • 描述

    属性节点。

# ObjectMember

  • 节点定义

    interface ObjectMember <: Node {
    key: Expression;
    computed: boolean;
    decorators: [ Decorator ];
}
    1
    2
    3
    4
    5

  • 描述

    对象成员节点。

# ObjectMethod

  • 节点定义

    interface ObjectMethod <: ObjectMember, Function {
    type: "ObjectMethod";
    kind: "get" | "set" | "method";
}
    1
    2
    3
    4

  • 描述

    对象方法节点。

# UnaryExpression

  • 节点定义

    interface UnaryExpression <: Expression {
    type: "UnaryExpression";
    operator: UnaryOperator;
    prefix: boolean;
    argument: Expression;
}
    1
    2
    3
    4
    5
    6

  • 描述

    一元表达式。

    如 typeof 1。

# UnaryOperator

  • 节点定义

    enum UnaryOperator {
    "-" | "+" | "!" | "~" | "typeof" | "void" | "delete" | "throw"
}
    1
    2
    3

  • 描述

    一元操作运算符。

    如 typeof {}。

# UpdateExpression

  • 节点定义

    interface UpdateExpression <: Expression {
    type: "UpdateExpression";
    operator: UpdateOperator;
    argument: Expression;
    prefix: boolean;
}
    1
    2
    3
    4
    5
    6

  • 描述

    Update 表达式。

    如 ++a

    1. operator: UpdateOperator 节点，即 ++/--
    2. argument: 参数
    3. prefix: 表示 operator 是否在前

# UpdateOperator

  • 节点定义

    enum UpdateOperator {
    "++" | "--"
}
    1
    2
    3

  • 描述

    update 运算符。

    值为 ++ 或 --。

# BinaryExpression

  • 节点定义

    interface BinaryExpression <: Expression {
    type: "BinaryExpression";
    operator: BinaryOperator;
    left: Expression | PrivateName;
    right: Expression;
}
    1
    2
    3
    4
    5
    6

  • 描述

    二元运算表达式。

    如 a > b。

    1. left/right: 运算符左右的表达式
    2. operator: 二元运算符节点
    3. left: 还可以是 PrivateName 节点

# BinaryOperator

  • 节点定义

    enum BinaryOperator {
"==" | "!=" | "===" | "!=="
    | "<" | "<=" | ">" | ">="
    | "<<" | ">>" | ">>>"
    | "+" | "-" | "*" | "/" | "%"
    | "**" | "|" | "^" | "&" | "in"
    | "instanceof"
    | "|>"
}
    1
    2
    3
    4
    5
    6
    7
    8
    9

  • 描述

    二元运算符。

    可以从定义看出二元运算符包含哪些。

# AssignmentExpression

  • 节点定义

    interface AssignmentExpression <: Expression {
    type: "AssignmentExpression";
    operator: AssignmentOperator;
    left: Pattern | Expression;
    right: Expression;
}
    1
    2
    3
    4
    5
    6

  • 描述

    赋值表达式节点。

    1. operator: 赋值运算符
    2. left/right: 赋值运算符左右的表达式
    3. left: ???

# AssignmentOperator

  • 节点定义

    enum AssignmentOperator {
"=" | "+=" | "-=" | "*=" | "/=" | "%=" | "**="
    | "<<=" | ">>=" | ">>>="
    | "|=" | "^=" | "&="
    | "||=" | "&&=" | "??="
}
    1
    2
    3
    4
    5
    6

  • 描述

    赋值运算符。

    可以看出赋值运算符有哪些。

# LogicalExpression

  • 节点定义

    interface LogicalExpression <: Expression {
    type: "LogicalExpression";
    operator: LogicalOperator;
    left: Expression;
    right: Expression;
}
    1
    2
    3
    4
    5
    6

  • 描述

    逻辑运算表达式。

    如 a && b。

# LogicalOperator

  • 节点定义

    enum LogicalOperator {
    "||" | "&&" | "??"
}
    1
    2
    3

  • 描述

    逻辑运算符。

# SpreadElement

  • 节点定义

    interface SpreadElement <: Node {
    type: "SpreadElement";
    argument: Expression;
}
    1
    2
    3
    4

  • 描述

    Spread 表达式。

    如 [a, …b]。

# 4.2.11 模式（Patterns）

Patterns 继承自 Node 节点。

# Pattern

  • 节点定义

    interface Pattern <: Node { }
    1

  • 描述

    主要和解构赋值有关。

# ObjectPattern

  • 节点定义

    interface AssignmentProperty <: ObjectProperty {
    value: Pattern;
}

interface ObjectPattern <: Pattern {
    type: "ObjectPattern";
    properties: [ AssignmentProperty | RestElement ];
}
    1
    2
    3
    4
    5
    6
    7
    8

  • 描述

    { name, age } = { name: 'Jack', age: 13 }
    1

# ArrayPattern

  • 节点定义

    interface ArrayPattern <: Pattern {
    type: "ArrayPattern";
    elements: [ Pattern | null ];
}
    1
    2
    3
    4

  • 描述

    [ name, age ] = [ 'Jack', 13 ]
    1

# RestElement

  • 节点定义

    interface RestElement <: Pattern {
    type: "RestElement";
    argument: Pattern;
}
    1
    2
    3
    4

  • 描述

    fun(…args) {}
    1

# AssignmentPattern

  • 节点定义

    interface AssignmentPattern <: Pattern {
    type: "AssignmentPattern";
    left: Pattern;
    right: Expression;
}
    1
    2
    3
    4
    5

  • 描述

    fun(a = 10) {}
    1

# 4.2.12 类（Classes）

Classes 继承自 Node 节点。

# Class

  • 节点定义

    interface Class <: Node {
    id: Identifier | null;
    superClass: Expression | null;
    body: ClassBody;
    decorators: [ Decorator ];
}
    1
    2
    3
    4
    5
    6

  • 描述

    类节点。

# ClassBody

  • 节点定义

    interface ClassBody <: Node {
    type: "ClassBody";
    body: [ 
        ClassMethod | 
        ClassPrivateMethod | 
        ClassProperty | 
        ClassPrivateProperty | 
        StaticBlock 
    ];
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

  • 描述

    class Test {
    // 这是 classBody 部分
}
    1
    2
    3

# ClassMethod

  • 节点定义

    interface ClassMethod <: Function {
    type: "ClassMethod";
    key: Expression;
    kind: "constructor" | "method" | "get" | "set";
    computed: boolean;
    static: boolean;
    decorators: [ Decorator ];
}
    1
    2
    3
    4
    5
    6
    7
    8
    9

  • 描述

    class Test {
    // ClassMethod
    getName() {}
}
    1
    2
    3
    4

# ClassPrivateMethod

  • 节点定义

    interface ClassPrivateMethod <: Function {
    type: "ClassPrivateMethod";
    key: PrivateName;
    kind: "method" | "get" | "set";
    static: boolean;
    decorators: [ Decorator ];
}
    1
    2
    3
    4
    5
    6
    7
    8

  • 描述

    class Test {
    // ClassPrivateMethod
    #getName() {}
}
    1
    2
    3
    4

# ClassProperty

  • 节点定义

    interface ClassProperty <: Node {
    type: "ClassProperty";
    key: Expression;
    value: Expression;
    static: boolean;
    computed: boolean;
}
    1
    2
    3
    4
    5
    6
    7
    8

  • 描述

    class Test {
    // ClassProperty
    name: 'Jack'
}
    1
    2
    3
    4

# ClassPrivateProperty

  • 节点定义

    interface ClassPrivateProperty <: Node {
    type: "ClassPrivateProperty";
    key: PrivateName;
    value: Expression;
    static: boolean;
}
    1
    2
    3
    4
    5
    6
    7

  • 描述

    class Test {
    // ClassPrivateProperty
    #name: 'Jack'
}
    1
    2
    3
    4

# StaticBlock

  • 节点定义

    interface StaticBlock <: Node {
type: "StaticBlock";
body: [ Statement ];
}
    1
    2
    3
    4
    5

  • 描述

    class Test {
    // StaticBlock
    static {
        
    }
}
    1
    2
    3
    4
    5
    6

# ClassDeclaration

  • 节点定义

    interface ClassDeclaration <: Class, Declaration {
type: "ClassDeclaration";
id: Identifier;
}
    1
    2
    3
    4
    5

  • 描述

    类声明。

    class [name] [extends] {[body]}
    1

# ClassExpression

  • 节点定义

    interface ClassExpression <: Class, Expression {
type: "ClassExpression";
}
    1
    2
    3
    4

  • 描述

    类表达式。

    const MyClass = class [className] [extends otherClassName] { ... }
    1

# MetaProperty

  • 节点定义

    interface MetaProperty <: Expression {
    type: "MetaProperty";
    meta: Identifier;
    property: Identifier;
}
    1
    2
    3
    4
    5
    6

  • 描述

    元属性。

    new.target
    1

# 4.2.13 Modules

Modules 继承自 Node 节点。

# （1）基本类型

# ModuleDeclaration

  • 节点定义

    interface ModuleDeclaration <: Node { }
    1

  • 描述

    模块声明。

# ModuleSpecifier

  • 节点定义

    interface ModuleSpecifier <: Node {
  local: Identifier;
}
    1
    2
    3

  • 描述

    模块说明符。

# （2）导入类型

# ImportDeclaration

  • 节点定义

    interface ImportDeclaration <: ModuleDeclaration {
  type: "ImportDeclaration";
  importKind: null | "type" | "typeof" | "value";
  specifiers: [ 
    ImportSpecifier | 
    ImportDefaultSpecifier | 
    ImportNamespaceSpecifier 
  ];
  source: StringLiteral;
  assertions?: [ ImportAttribute ];
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

  • 描述

    import 声明。

    如 import a from "./a"。

# ImportSpecifier

  • 节点定义

    interface ImportSpecifier <: ModuleSpecifier {
  type: "ImportSpecifier";
  imported: Identifier | StringLiteral;
}
    1
    2
    3
    4

  • 描述

    导入说明符。

    如 import { a as b } from "./a"。

# ImportDefaultSpecifier

  • 节点定义

    interface ImportDefaultSpecifier <: ModuleSpecifier {
  type: "ImportDefaultSpecifier";
}
    1
    2
    3

  • 描述

    默认导入说明符。

    如 import a from "./a"。

# ImportNamespaceSpecifier

  • 节点定义

    interface ExportAllDeclaration <: ModuleDeclaration {
  type: "ExportAllDeclaration";
  source: StringLiteral;
  assertions?: [ ImportAttribute ];
}
    1
    2
    3
    4
    5

  • 描述

    命名空间导入说明符。

    如 import * as a from "./a"。

# ImportAttribute

  • 节点定义

    interface ImportAttribute <: Node {
  type: "ImportAttribute";
  key: Identifier;
  value: StringLiteral;
}
    1
    2
    3
    4
    5

  • 描述

    TODO

# （3）导出类型

# ExportNamedDeclaration

  • 节点定义

    interface ExportNamedDeclaration <: ModuleDeclaration {
  type: "ExportNamedDeclaration";
  declaration: Declaration | null;
  specifiers: [ ExportSpecifier ];
  source: StringLiteral | null;
  assertions?: [ ImportAttribute ];
}
    1
    2
    3
    4
    5
    6
    7

  • 描述

    导出具名声明。

    如：export { x, y as z }、export var a = 1、export { x } from 'a'。

# ExportSpecifier

  • 节点定义

    interface ExportSpecifier <: ModuleSpecifier {
  type: "ExportSpecifier";
  exported: Identifier | StringLiteral;
  local?: Identifier | StringLiteral;
}
    1
    2
    3
    4
    5

  • 描述

    导出说明符。

    如 export { a }、export { a as b }。

# ExportDefaultDeclaration

  • 节点定义

    interface ExportDefaultDeclaration <: ModuleDeclaration {
  type: "ExportDefaultDeclaration";
  declaration: 
    OptFunctionDeclaration | 
    OptClassDeclaration | 
    Expression;
}
    1
    2
    3
    4
    5
    6
    7

  • 描述

    默认导出声明。

    如 export default a。

# ExportAllDeclaration

  • 节点定义

    interface ExportAllDeclaration <: ModuleDeclaration {
  type: "ExportAllDeclaration";
  source: StringLiteral;
  assertions?: [ ImportAttribute ];
}
    1
    2
    3
    4
    5

  • 描述

    全部导出声明。

    如 export * from './a'。

# ExportDefaultSpecifier

  • 节点定义

    TODO

  • 描述

    TODO

# ExportNamespaceSpecifier

  • 节点定义

    TODO

  • 描述

    TODO

# 4.3 JSX 节点

节点 描述 案例
JSXAttribute interface JSXIdentifier <: Identifier {
    type: "JSXIdentifier";
}
JSXClosingElement interface JSXMemberExpression <: Expression {
    type: "JSXMemberExpression";
    object: JSXMemberExpression | JSXIdentifier;
    property: JSXIdentifier;
}
JSXClosingFragment interface JSXClosingFragment <: Node {
    type: "JSXClosingFragment";
}
JSXElement interface JSXElement <: Expression {
    type: "JSXElement";
    openingElement: JSXOpeningElement;
    children: [ JSXText | JSXExpressionContainer | JSXSpreadChild | JSXElement | JSXFragment ];
    closingElement: JSXClosingElement | null;
}
JSXEmptyExpression interface JSXEmptyExpression <: Node {
    type: "JSXEmptyExpression";
}
JSXExpressionContainer interface JSXExpressionContainer <: Node {
    type: "JSXExpressionContainer";
    expression: Expression | JSXEmptyExpression;
}
JSXFragment interface JSXFragment <: Expression {
    type: "JSXFragment";
    openingFragment: JSXOpeningFragment;
    children: [ JSXText | JSXExpressionContainer | JSXSpreadChild | JSXElement | JSXFragment ];
    closingFragment: JSXClosingFragment;
}
JSXIdentifier interface JSXIdentifier <: Identifier {
    type: "JSXIdentifier";
}
JSXMemberExpression interface JSXMemberExpression <: Expression {
    type: "JSXMemberExpression";
    object: JSXMemberExpression | JSXIdentifier;
    property: JSXIdentifier;
}
JSXNamespacedName interface JSXNamespacedName <: Expression {
    type: "JSXNamespacedName";
    namespace: JSXIdentifier;
    name: JSXIdentifier;
}
JSXOpeningElement interface JSXOpeningElement <: JSXBoundaryElement {
    type: "JSXOpeningElement";
    attributes: [ JSXAttribute | JSXSpreadAttribute ];
    selfClosing: boolean;
}
JSXOpeningFragment interface JSXOpeningFragment <: Node {
    type: "JSXOpeningFragment";
}
JSXSpreadAttribute interface JSXSpreadAttribute <: SpreadElement {
    type: "JSXSpreadAttribute";
}
JSXSpreadChild interface JSXSpreadChild <: Node {
    type: "JSXSpreadChild";
    expression: Expression;
}
JSXText interface JSXText <: Node {
  type: "JSXText";
  value: string;

# 4.4 TypeScript节点

节点 定义 描述
TSAnyKeyword
TSArrayType
TSAsExpression
TSBooleanKeyword
TSCallSignatureDeclaration
TSConditionalType
TSConstructSignatureDeclaration
TSConstructorType
TSDeclareFunction
TSDeclareMethod
TSEnumDeclaration
TSEnumMember
TSExportAssignment
TSExpressionWithTypeArguments
TSExternalModuleReference
TSFunctionType
TSImportEqualsDeclaration
TSIndexSignature
TSIndexedAccessType
TSInferType
TSInterfaceBody
TSInterfaceDeclaration
TSIntersectionType
TSLiteralType
TSMappedType
TSMethodSignature
TSModuleBlock
TSModuleDeclaration
TSNamespaceExportDeclaration
TSNeverKeyword
TSNonNullExpression
TSNullKeyword
TSNumberKeyword
TSObjectKeyword
TSParameterProperty
TSParenthesizedType
TSPropertySignature
TSQualifiedName
TSStringKeyword
TSSymbolKeyword
TSThisType
TSTupleType
TSTypeAliasDeclaration
TSTypeAnnotation
TSTypeAssertion
TSTypeLiteral
TSTypeOperator
TSTypeParameter
TSTypeParameterDeclaration
TSTypeParameterInstantiation
TSTypePredicate
TSTypeQuery
TSTypeReference
TSUndefinedKeyword
TSUnionType
TSVoidKeyword

# 4.5 Flow节点

节点 定义 描述
AnyTypeAnnotation
ArrayTypeAnnotation
BooleanLiteralTypeAnnotation
BooleanTypeAnnotation
ClassImplements
DeclareClass
DeclareExportAllDeclaration
DeclareExportDeclaration
DeclareFunction
DeclareInterface
DeclareModule
DeclareModuleExports
DeclareOpaqueType
DeclareTypeAlias
DeclareVariable
DeclaredPredicate
EmptyTypeAnnotation
ExistsTypeAnnotation
MixedTypeAnnotation
FunctionTypeAnnotation
FunctionTypeParam
GenericTypeAnnotation
InferredPredicate
InterfaceDeclaration
InterfaceExtends
InterfaceTypeAnnotation
IntersectionTypeAnnotation
NullLiteralTypeAnnotation
NullableTypeAnnotation
NumberLiteralTypeAnnotation
NumberTypeAnnotation
ObjectTypeAnnotation
ObjectTypeCallProperty
ObjectTypeIndexer
ObjectTypeInternalSlot
ObjectTypeProperty
ObjectTypeSpreadProperty
OpaqueType
QualifiedTypeIdentifier
StringLiteralTypeAnnotation
StringTypeAnnotation
ThisTypeAnnotation
TupleTypeAnnotation
TypeAlias
TypeAnnotation
TypeCastExpression
TypeParameter
TypeParameterDeclaration
TypeParameterInstantiation
TypeofTypeAnnotation
UnionTypeAnnotation
Variance
VoidTypeAnnotation

# 4.6 总结

TODO

Last update: October 7, 2022 19:03
Contributors: hoperyy