用ts-compiler来遍历AST处理你的代码

2024-01-13 15:16:04

前言

本文旨在为初次了解 ts 编译器的前端同学做一个初步引导。通过一系列由浅入深的示例，读者将能够掌握 ts 编译器的基本使用，包括 ast 遍历、transform 函数编写、表达式节点创建等。同时，读者还将对 TypeScript 和 JavaScript 编译原理有更深入的了解。

ts-compiler 介绍

ts-compiler 是一个用于编译 TypeScript 代码的工具。它可以将 TypeScript 代码转换为 JavaScript 代码，以便在浏览器或其他 JavaScript 运行时中运行。ts-compiler 是 TypeScript 编译器的一部分，它提供了对 TypeScript 代码进行各种操作的 API，包括 AST 遍历、transform 函数编写和表达式节点创建等。

AST 遍历

AST（Abstract Syntax Tree）是抽象语法树的缩写，它是一种表示代码结构的树形数据结构。AST 可以表示代码的各个组成部分，包括函数、变量、语句等。ts-compiler 提供了对 AST 进行遍历的 API，这使得我们可以轻松地对代码进行各种操作。

// 导入 ts-compiler
import * as ts from "typescript";

// 创建一个源文件
const sourceFile = ts.createSourceFile(
  "hello.ts",
  `
  // 这是一个注释
  function hello() {
    console.log("Hello, world!");
  }
  `,
  ts.ScriptTarget.ES2015
);

// 遍历源文件中的节点
ts.forEachChild(sourceFile, (node) => {
  console.log(node.kind);
});

上面的代码首先导入 ts-compiler，然后创建一个源文件。接下来，我们使用 ts.forEachChild() 方法来遍历源文件中的节点。ts.forEachChild() 方法接受两个参数：源文件和一个回调函数。回调函数将在源文件中的每个节点上调用，并且会将节点作为参数传递给回调函数。

在回调函数中，我们使用 node.kind 属性来获取节点的类型。node.kind 属性是一个枚举值，它表示节点的类型。例如，如果节点是一个函数声明，那么 node.kind 的值将是 ts.SyntaxKind.FunctionDeclaration。

Transform 函数编写

Transform 函数是用于对 AST 进行转换的函数。ts-compiler 提供了编写 transform 函数的 API，这使得我们可以轻松地对代码进行各种修改。

// 导入 ts-compiler
import * as ts from "typescript";

// 创建一个 transform 函数
const transformFunction = (context: ts.TransformationContext) => (rootNode: ts.Node): ts.Node => {
  // 遍历根节点中的所有节点
  ts.forEachChild(rootNode, (node) => {
    // 如果节点是函数声明，则将函数名改为 "hello"
    if (node.kind === ts.SyntaxKind.FunctionDeclaration) {
      const functionDeclaration = node as ts.FunctionDeclaration;
      functionDeclaration.name = ts.createIdentifier("hello");
    }
  });

  // 返回转换后的根节点
  return rootNode;
};

// 创建一个源文件
const sourceFile = ts.createSourceFile(
  "hello.ts",
  `
  // 这是一个注释
  function world() {
    console.log("Hello, world!");
  }
  `,
  ts.ScriptTarget.ES2015
);

// 应用 transform 函数
const transformedSourceFile = ts.transform(sourceFile, [transformFunction]);

// 打印转换后的源文件
console.log(transformedSourceFile.getFullText());

上面的代码首先导入 ts-compiler，然后创建一个 transform 函数。transform 函数接受两个参数：转换上下文和根节点。转换上下文是一个对象，它包含了一些有关转换的信息，例如源文件和编译选项等。根节点是 AST 的根节点。

在 transform 函数中，我们遍历根节点中的所有节点。如果节点是函数声明，则将函数名改为 "hello"。

接下来，我们创建一个源文件。然后，我们使用 ts.transform() 方法来应用 transform 函数。ts.transform() 方法接受两个参数：源文件和一个 transform 函数数组。transform 函数数组中的每个 transform 函数都会依次应用于源文件。

最后，我们打印转换后的源文件。

表达式节点创建

ts-compiler 提供了创建表达式节点的 API，这使得我们可以轻松地创建新的代码。

// 导入 ts-compiler
import * as ts from "typescript";

// 创建一个源文件
const sourceFile = ts.createSourceFile(
  "hello.ts",
  "",
  ts.ScriptTarget.ES2015
);

// 创建一个变量声明语句
const variableDeclaration = ts.createVariableDeclaration("hello", ts.createKeywordTypeNode(ts.SyntaxKind.StringKeyword));

// 创建一个赋值语句
const assignment = ts.createBinaryExpression(variableDeclaration, ts.SyntaxKind.EqualsToken, ts.createStringLiteral("world"));

// 创建一个表达式语句
const expressionStatement = ts.createStatement(assignment);

// 将表达式语句添加到源文件中
sourceFile.statements.push(expressionStatement);

// 打印转换后的源文件
console.log(sourceFile.getFullText());