带你从ast理解typescript编译原理和智能语法提示

最近在研究一款低代码平台，名为“拽拽”，支持可视化编辑，也支持逻辑代码抽离。由于我自己人力有限，项目才处于刚开始的阶段，就不放出来了。后期还要支持后端接口生成，想要加入的小伙伴可以留言。

什么是ast

好了，进入正文。那么什么是ast呢？可能大家都有一些印象，ast 就是抽象语法树(Abstract Syntaxt Tree).

babel 的编译流程

bable 的编译流程，主要分为三步：

1. 编译（parse），通过编译器（parser）把源码转成抽象语法树（ast）对应API为: @babel/parser
2. 修改（transform），调用visitor函数进行遍历和修改ast，在修改的过程中会涉及到各种判断，这时候需要@babel/types。当需要批量创建ast的时候使用@babel/template
3. 生成（generate），把转换后的ast打印成目标代码，并生成sourcemap，需要@babel/generate包

ast可视化工具

那么ast究竟长什么样呢？就像虚拟dom节点（vdom）那样，其实它是一个json，不同工具生成的ast存在着一些差别。

使用 babel 解析 ast

比如有一段ts代码，要使用babel解析成ast，首先要安装 @babel/parser。

babel/parser官网

cnpm i @babel/parser
复制代码

然后

var parse = require('@babel/parser').parse
// var tstyp = require('@babel/types')
var ast = parse(tsCode, {
sourceType: 'module',
ranges: false,
plugins: ['typescript']
})
复制代码

使用 ts-compile-api解析ast

Using the Compiler API

如果要使用ts-compiler-api，需要安装typescript

cnpm i typescript
复制代码

然后

const ts = require('typescript')

var fn = "tst.ts" // 如果是仅生成ast，文件名叫什么都可以
var cd = `export interface IconIntf {
   name: IconName;
   data: string;
}`;
var o = ts.createSourceFile(fn, tsCode, ts.ScriptTarget.Latest, /*setParentNodes*/ false, ts.ScriptKind.TS);
//注意第三个参数,把那个参数整成false, 就可以避免Circular, 避免了Circular ,ts本身的JSON 序列化就可以用了
var ast = JSON.parse(JSON.stringify(o))

复制代码

注: 为什么要有一个文件名呢？因为前面说了，修改ast还可以再生成ts代码的。

现在获取到了ast，语法提示什么的都不是问题了