# 编写TypeScript Transformer Plugin
我们已经了解了,TypeScript的转化原理与Babel其实是近似的:
- 先把源代码解析为token流,然后生成AST
- 通过访问者模式访问AST节点并修改生成新的AST
- 通过新的AST生成js代码
# AST遍历
我们现在就简单地进行一个小的操作,先看下面的代码:
// index.ts
const a = 1
const b = 2
function add(x: number, y: number): number {
return x + y
}
@前端进阶之旅: 代码已经复制到剪贴板
我们先做一个简单的工作,就是遍历index.ts文件中的各个AST节点.
我们新建一个文件transformer.ts,在这里我们将进行对AST的一系列操作.
// transformer.ts
import ts from "typescript";
// 引入目标文件
const filePath = "./index.ts";
// 创建一个 program 实例
const program = ts.createProgram([filePath], {});
// 为我们的 program 做一个类型检查器
const checker = program.getTypeChecker();
// 获取 index.ts 源代码的AST
const source = program.getSourceFile(filePath);
// 创建 printer实例为我们打印最后的ast
const printer = ts.createPrinter();
// 我们提供给定类型的节点字符串的小助手
const syntaxToKind = (kind: ts.Node["kind"]) => {
return ts.SyntaxKind[kind];
};
// 从根节点开始遍历并打印
ts.forEachChild(source!, node => {
console.log(syntaxToKind(node.kind));
});
@前端进阶之旅: 代码已经复制到剪贴板
结果如下:
我们看到通过遍历我们获得了AST上的节点,首先是两个变量声明(VariableStatement):
const a = 1
const b = 2
@前端进阶之旅: 代码已经复制到剪贴板
接着是一个函数声明(FunctionDeclaration):
function add(x: number, y: number): number {
return x + y
}
@前端进阶之旅: 代码已经复制到剪贴板
最后的EndOfFileToken相当于结束标志.
# 选择转换方式
我们刚才直接利用了TypeScript提供的API进行了AST的遍历操作,但是如果涉及到转换操作,依然用TypeScript的API进行裸操作会很麻烦,有没有更方便的方法?
目前TS转换有以下三种主流的方式:
- 适用于Webpack生态系统的ts-loader
- 使用
