Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

どのように実現したか

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

以上を踏まえて。 。 。

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

おまけ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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