TypeScript AST 节点操作终极指南：从 ClassDeclaration 到 InterfaceDeclaration 的完整教程

葛习可Mona

755人浏览 · 2025-12-18 01:58:32

葛习可Mona · 2025-12-18 01:58:32 发布

TypeScript AST 节点操作终极指南：从 ClassDeclaration 到 InterfaceDeclaration 的完整教程

【免费下载链接】ts-morph TypeScript Compiler API wrapper for static analysis and programmatic code changes. 项目地址: https://gitcode.com/gh_mirrors/ts/ts-morph

TypeScript AST 操作是每个 TypeScript 开发者都应该掌握的强大技能。通过 ts-morph 这个 TypeScript Compiler API 的封装库，你可以轻松地对代码进行静态分析和程序化修改。无论你是想要重构代码、生成代码还是进行复杂的代码转换，掌握 AST 节点操作都将让你的开发效率大幅提升！

什么是 TypeScript AST 节点操作？ 🤔

AST（抽象语法树）是将源代码转换为树状结构表示的方法。在 TypeScript 中，每个语法元素都对应一个特定的节点类型，比如 ClassDeclaration 表示类声明，InterfaceDeclaration 表示接口声明。通过操作这些节点，你可以实现自动化的代码转换和重构。

使用 TypeScript AST Viewer 工具查看 ClassDeclaration 节点的结构

快速上手 ts-morph 节点操作 🚀

创建项目并获取节点

首先安装 ts-morph 并创建项目：

npm install ts-morph

然后就可以开始操作 AST 节点了：

import { Project } from "ts-morph";

const project = new Project();
const sourceFile = project.createSourceFile("test.ts", `
  class MyClass {
    myProp = 5;
  }

  interface MyInterface {
    method(): void;
  }
`);

// 获取 ClassDeclaration 节点
const classDeclaration = sourceFile.getClassOrThrow("MyClass");

// 获取 InterfaceDeclaration 节点  
const interfaceDeclaration = sourceFile.getInterfaceOrThrow("MyInterface");

使用 Structures 简化操作

Structures 是 ts-morph 提供的简化 AST 表示，可以大幅提升性能：

// 获取 ClassDeclaration 的结构
const classStructure = classDeclaration.getStructure();
// 返回：ClassDeclarationStructure

// 修改结构
classStructure.name = "NewClassName";
classDeclaration.set(classStructure);

通过在线工具查看 TypeScript 代码的 AST 结构细节

核心节点操作技巧 ✨

ClassDeclaration 节点操作

ClassDeclaration 是 TypeScript 中最常用的节点之一，你可以：

修改类名和修饰符
添加/删除属性和方法
调整继承和实现关系

InterfaceDeclaration 节点操作

InterfaceDeclaration 节点同样重要，支持：

修改接口名称
添加/删除方法和属性
调整类型参数

性能优化最佳实践 ⚡

批量操作代替循环

❌ 避免这样写：

for (const classStructure of classStructures)
  sourceFile.addClass(classStructure);

✅ 推荐这样写：

sourceFile.addClasses(classStructures);

先分析后操作

将代码分析阶段与操作阶段分离，可以显著提升性能：

// 先收集所有需要操作的节点
const classesToRemove: ClassDeclaration[] = [];

for (const sourceFile of sourceFiles) {
  for (const classDec of sourceFile.getClasses()) {
    if (someCheckOnSymbol(classDec.getSymbolOrThrow()))
      classesToRemove.push(classDec);
  }
}

// 然后一次性执行操作
for (const classDec of classesToRemove)
  classDec.remove();

实战案例：类与接口转换 🛠️

假设你需要将一个类转换为接口，ts-morph 让这个过程变得简单：

const project = new Project();
const sourceFile = project.createSourceFile("file.ts", `
  class Person {
    name: string;
    age: number;
  }
`);

const personClass = sourceFile.getClassOrThrow("Person");
const classStructure = personClass.getStructure();

// 创建对应的接口结构
const interfaceStructure: InterfaceDeclarationStructure = {
  name: "IPerson",
  properties: classStructure.properties
};

// 移除原类并添加新接口
personClass.remove();
sourceFile.addInterface(interfaceStructure);