type-explorerというTypeScriptの型を展開・閲覧出来るVSCode拡張を作っている
作っている
ので、宣伝も兼ねてどんなものかとかをつらつら書こうかなと思い立ったのであった
モチベーション
最近の開発でGraphQLを使っていて、GraphQLのスキーマから自動生成した巨大な型を扱っているうちに以下のようなつらい気持ちを味わうようになった
- tscのエラーメッセージで巨大な型は省略されてしまう
type<T> = ...のように Type Aliasで生成された型が結局どんな型なのかわかりにくい- 例えば変数に束縛して suggestionから見る、みたいにして型情報を探る、みたいなことをするのはかったるい
んで、
- 既にそういう課題を解決してるツールがないかと思って探してみたけどなかった
- 最近VSCodeが Tree View API なるものが使えるらしいというのを知っていた・TypeScriptのCompiler APIを使えばできそうな気がする
という気持ちになり、作り始めてみた、という流れ
出来ることとか
リポジトリはこちら:
大体こういった体験を提供する感じの拡張。
現時点ではカーソルが移動するたびにツリービューを再構築するようにしてるけど、ツリー側は固定させて型をクリックしたらエディタ側でその定義元にジャンプさせるとかもありかなとか考えていたりはする
まだ試作版もいいとこなのでそのへんは試行錯誤する予定
技術的な
TypeScriptのCompiler APIで ts.Node を走査して型に関する情報だけ↓のようなTreeNode型のオブジェクトとして抽出・得たTreeNode型のオブジェクトを元にVSCodeのTreeViewにぶち込むというだけ
export type TreeNode = {
id: number;
variableName: string | undefined;
typeName: string;
children?: TreeNode[];
};
コンセプト的にはほんとそれだけ
といっても ts.Node を走査するという実装を網羅的に実現するのは大変だし、VSCode側で編集されたソースコードに型情報をリアルタイムに追従させるのも大変そう（まだちゃんと試してない）
まあそれでも全く手も足も出ないほどじゃなさそうで、実際にやってみたらひとまず最低限動くまでは漕ぎ着けられた
課題としては現状、型情報を網羅的に対応することよりもVSCodeで編集されたソースコードのリアルタイム反映がしんどい感じ
いろいろ考えた結果、やるとしたら結局ts.LanguageServiceHostとVSCodeの編集内容を繋ぎこむ処理を自前で実装し、ts.LanguageSeriviceを自前で立ち上げるなのかなと思う
（tsserverにコマンドを独自拡張出来てエディタからそれを呼び出せると一番楽なんだけどtsserverに拡張の仕組みはないので無理っぽいという辺りで無念になったりした）
今後
とりあえず自分で普通に使いたいので、個人的に実用出来そうだなラインまでは作りたい気持ち（気持ちだけ）
目下は変数にアサインしたときに推論される型情報を見れるようにする実装がかなり苦しそうというのが悩みポイント でもこれを解決できると一気に使い心地が良くなるだろうなと思うので頑張りたいところ
