TypeScript Compiler API で遊ぶ
JavaScript メタプログラミング勉強会
@さくらインターネット metapro.es
@ktsn
なにができるのか?
- AST を走査してコードの解析
- AST からコード生成
- 型チェッカーから情報取得
...など
TS Compiler API のあるきかた
https://astexplorer.net/ で AST の内容を確認
![](https://s3.amazonaws.com/media-p.slid.es/uploads/700569/images/4624025/astexplorer.png)
TS Compiler API のあるきかた
エディターの補完などを活かしつつ型を信じる
コードの AST を取得
createProgram → getSourceFile で取得できる
![](https://s3.amazonaws.com/media-p.slid.es/uploads/700569/images/4624286/ts-ast.png)
AST 生成 & 文字列出力
![](https://s3.amazonaws.com/media-p.slid.es/uploads/700569/images/4624057/ts-print.png)
create まで入力して補完からそれっぽい名前のを選ぶ
→ createPrinter で文字列出力用のインスタンスを作る
AST を使った型チェック
型チェックしたい AST を作って
TS の Language Service にうまいこと渡してやるといける
...が、おそらく想定されてない使い方なので、
内部のアサーションで頻繁に落ちる
TypeScript のコードを追いかける気合のある人のみが試すべし
TS Compiler API を使って
Vue のテンプレートを
型チェックしてみる
![](https://s3.amazonaws.com/media-p.slid.es/uploads/700569/images/4623098/code.png)
これをチェックしたい
![](https://s3.amazonaws.com/media-p.slid.es/uploads/700569/images/4624975/Twitter_Logo_Blue.png)
@ktsn
![](https://s3.amazonaws.com/media-p.slid.es/uploads/700569/images/4624991/GitHub-Mark-120px-plus.png)
ktsn
Thanks!