typescript 编译

1. typescript 与 javascript

ts 编译过程（tsc 操作）：

ts 源码 => ts AST => 类型检查器检查ts AST => ts AST 转化为js 源码

js 编译过程（浏览器、nodejs 或者其他 js 引擎操作）：

js 源码 => js AST => 字节码=> 运行时计算机字节码

js 编译器和运行时通常聚在一个成为引擎的程序中。程序员一般就是与引擎交互的，V8(驱动 nodejs、chrome 和 opera 的引擎) SpiderMonkey(Firefox)、JSCore(safari)、和 Chakra(Edge)都是如此，正因为这样，js 看起来才像是一门解释性语言

比较JavaScript与TypeScript类型系统

类型系统特征JavaScriptTypeScript
类型是如何绑定的？动态静态
是否自动转换类型？是否（多数时候）
何时检查类型运行时编译时
何时报告错误运行时（多数时候）编译时（多数时候）

2. typescript AST（抽象语法书）

2.1 抽象语法树定义

TypeScript AST（抽象语法树）是一种数据结构，用于表示 TypeScript 代码的抽象结构。它是编译器在解析 TypeScript 代码时生成的一种中间表示形式，通常用于在代码分析、转换和生成过程中进行操作。

TypeScript AST 由节点（Nodes）组成，每个节点代表 TypeScript 代码中的一个构造，例如变量声明、函数定义、表达式等等。这些节点以层次结构的方式组织，形成一棵树，表示了代码的结构和层次关系。

开发人员可以使用 TypeScript 的编译器 API 或相关工具来访问和操作 AST。这使得开发人员能够执行各种代码分析、重构和转换操作，例如代码检查、自动化重构、代码生成等等。

TypeScript AST 对于构建代码编辑器、静态分析工具和代码生成器等开发工具非常有用，因为它提供了对代码结构的精确表示，使得这些工具能够更好地理解和操作 TypeScript 代码。

2.2 抽象语法树示例

以下是一个简单的 TypeScript 代码示例以及它的相应的抽象语法树（AST）示例：

TypeScript 代码示例：

function add(a: number, b: number): number {
  return a + b;
}

const result = add(10, 5);
console.log(result);

相应的 TypeScript AST 示例（简化版本）：

{
  "type": "Program",
  "body": [
    {
      "type": "FunctionDeclaration",
      "id": {
        "type": "Identifier",
        "name": "add"
      },
      "params": [
        {
          "type": "Identifier",
          "name": "a",
          "typeAnnotation": {
            "type": "TypeAnnotation",
            "typeAnnotation": {
              "type": "NumberKeyword"
            }
          }
        },
        {
          "type": "Identifier",
          "name": "b",
          "typeAnnotation": {
            "type": "TypeAnnotation",
            "typeAnnotation": {
              "type": "NumberKeyword"
            }
          }
        }
      ],
      "returnType": {
        "type": "TypeAnnotation",
        "typeAnnotation": {
          "type": "NumberKeyword"
        }
      },
      "body": {
        "type": "BlockStatement",
        "body": [
          {
            "type": "ReturnStatement",
            "argument": {
              "type": "BinaryExpression",
              "operator": "+",
              "left": {
                "type": "Identifier",
                "name": "a"
              },
              "right": {
                "type": "Identifier",
                "name": "b"
              }
            }
          }
        ]
      }
    },
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "result"
          },
          "init": {
            "type": "CallExpression",
            "callee": {
              "type": "Identifier",
              "name": "add"
            },
            "arguments": [
              {
                "type": "NumericLiteral",
                "value": 10
              },
              {
                "type": "NumericLiteral",
                "value": 5
              }
            ]
          }
        }
      ],
      "kind": "const"
    },
    {
      "type": "ExpressionStatement",
      "expression": {
        "type": "CallExpression",
        "callee": {
          "type": "MemberExpression",
          "object": {
            "type": "Identifier",
            "name": "console"
          },
          "property": {
            "type": "Identifier",
            "name": "log"
          }
        },
        "arguments": [
          {
            "type": "Identifier",
            "name": "result"
          }
        ]
      }
    }
  ],
  "sourceType": "module"
}

上面的 JSON 结构是一个简化的示例，实际的 TypeScript AST 包含更多详细信息，用于准确表示代码的各个方面，包括类型注解、作用域等等。

这个 AST 可以由 TypeScript 编译器生成，并用于各种代码分析和转换操作。

在实际应用中，开发人员通常使用编程语言中的库或工具来访问和操作 AST。

Contributors: masecho