TypeScript Compiler APIを使って型のユニットテストをブラウザーで動かす

TypeScript Compiler APIを使って型のユニットテストをブラウザーで動かす nagoya.ts

2. デモ 3. @typescript/vfs 目次 5. できあがったもの 1. 自己紹介 4.
外部ライブラリの型解決

自己紹介 @steelydylan https://x.com/steelydylan

妻と2歳の息子の3人暮らしサービス開発してます小さな会社やってます自己紹介個人開発が大好きなWebエンジニア！特にフロントエンドの領域が好き

【宣伝】mosya Reactというサービスをリリースしました！初学者だけでなく現役の方にも楽しんでもらえる勉強になる教材を用意してます！

今回の発表ではこの前作であるmosya TCの型採点機能についてブラウザーで書いた型が正しいかテストできる！

このサービスで今回発表したい機能フロントエンドでの型採点機能実際にみてみましょう！ https://mosya.dev/type-challenges/challenge-trim

なぜブラウザーで型採点を実現しようと思ったか採点速度向上でUX改善コードをサーバーに送ってサーバーサイドでテストするよりも早い余計なサーバー通信が発生しないのでコストを抑えられる mosyaではプレビューや採点はすべてブラウザーで実行されてるのでコストがかなり抑えられているなによりかっこいい本来実現困難なことがブラウザーでできたらかっこいい 😎

ブラウザーでTypeScriptを利用する際の最大の障害 FileSystemの再現

ブラウザーにはfsがないので基本的には tsを実行できないのだ。。。

どのように実現したか

@typescript/vfsを利用しました！

@typescript/vfsとは MapをつかったTypeScriptのファイルシステムこれを使うことでフロントエンドでもファイルシステムの再現が可能になりコンパイルできるようになる！

ts.Systemの再現 ts.Systemは readFile や writeFileなど、実際にファイルを読み書きするためのAPI 本来はフロントエンドではこのAPIが動かないためコンパイラが動かない。。。 @typescript/vfs を使うことで下記のコードで簡単にメモリベースのts.Systemができる

ts.CompilerHostの再現コンパイル環境用のAPI。このAPIによって実際にTSファイルのコンパイルができる今回は実際のファイルではなく、メモリ上のファイルをコンパイルするのでこれもバーチャル化することができる @typescript/vfs を使うことで下記のコードで簡単にコンパイラーホストの再現ができる

ts.Programの作成実際に書いたコードを評価するためのProgram APIを用意します

コードの評価結果を取得 Program APIのemit関数で評価結果を取得できます！

node_modules内のライブラリに依存する場合はどうするの？

TypeScriptの標準ライブラリの場合

TypeScriptの標準ライブラリの場合 lib.es2022.d.tsなどの標準ライブラリ @typescript/vfsがTypeScriptの標準ライブラリを読み込むためのAPIを用意されてる！！

例えば、@types/reactなど特定のライブラリの場合

あらかじめライブラリの型情報をjson化しておく mosyaではレッスンごとにこんな感じのファイルを自動生成している https://static.mosya.dev/react-props-typescript/deps.json

用意したJSONを先ほどのfsMapにセットしていく先ほどのfsMapに新しく取得した型情報をセット

以上を踏まえて。。。

型テストをブラウザーで行うためのライブラリーを作りました！以上の知識をまとめてこんな感じでブラウザーでテストを実行できるライブラリをつくりました！！！

おまけ

@typescript/vfsはどこでつかわれているのか？ TypeScriptのドキュメントなどでよく使われるTwoslashなどで使用されている

以上です！！懇親会等でぜひ仲良くしていただけたら嬉しいです！

TypeScript Compiler APIを使って型のユニットテストをブラウザーで動かす

TypeScript Compiler APIを使って型のユニットテストをブラウザーで動かす

Hori Godai

More Decks by Hori Godai

Featured

Transcript