Real World Type Puzzle and Code Generation

TSKaigi 2024
https://tskaigi.org/

Transcript

1. Real World and Type Puzzle Code Generation @yukukotani 2024/05/11 - TSKaigi 2024
2. 小谷 優空 - @yukukotani ・Software Engineer @ Ubie, Inc. (2019/05~) 　　・Lead Architect ・Maintainer of Kuma UI ・Student @ Univ. Tsukuba (2019/04~) 　　・情報科学類 自己紹介
3. 趣旨 型安全なコードを吐くコードジェネレータを作る野暮用があった（あるある） → 型安全 + コードジェネレータ = → 観察してエッセンスを抽出しよう！ Prisma
4. 観察するスキーマ このスキーマから生成されるコードを観察する User と Post がリレーションを持つ簡単なやつ
5. 型パズルでselectした値に型をつける
8. 簡略化した実装を観察する これが動くPrismaClient型(findFirst関数)の実装 スキーマに即した型がつく TS Playground
9. PrismaClient型 実際はクラスとして実装されているが、ここではシンプルなオブジェクト型に
10. 入力の型を得る Type Argument Inferenceによって 型引数Tが推論される
11. 入力の型を得る 型引数の制約は入力時の補完・エラー用。 GetSelectIncludeResultの導出には 条件型を使うので無関係
12. 入力の型を得る 型引数の制約は入力時の補完・エラー用。 GetSelectIncludeResultの導出には 条件型を使うので無関係
13. 出力の型を導出する 続いて出力の型を組成する要素を見ていく
14. $XxxPayload型 スキーマのモデルと対応して生成される カラムの型や他モデルとのリレーションを表現 → select結果の型を決定するための 　マスタとして機能 schema.prisma 生成される型
15. 出力の型を導出する 第2型引数には入力の型をそのまま渡す
16. 出力の型を導出する いよいよ出力の型そのものを見ていく
17. GetSelectIncludeResult<P, A> 事前生成のPayload型(P)とユーザーが渡す引数(A)から、select結果の型を導出
18. GetSelectIncludeResult<P, A> 条件型 `T extends { foo: infer S } ? S : never`パターンで、selectした中身を取る
19. GetSelectIncludeResult<P, A> Mapped Types で型を組み立てる
20. GetSelectIncludeResult<P, A> selectしたキーを Mapped Types のキーとする
21. GetSelectIncludeResult<P, A> キーに対応する値がfalse等の場合はneverにキャストして除外 Mapped Typesのキーを neverにすると丸ごと消える
22. GetSelectIncludeResult<P, A> Mapped Typesの値側を見ていく
23. GetSelectIncludeResult<P, A> Payload型を参照して、selectする値の型を取る
24. おさらい：$XxxPayload型 select結果の型を決定するためのマスタ schema.prisma 生成される型
25. GetSelectIncludeResult<P, A> scalarsではなくobjectsの場合も同様に取り、再帰的にselect結果を導出
26. GetSelectIncludeResult<P, A> 条件型に当てはまらなければneverに落とすが、最初の型制約で先に落ちるはず
27. まとめ：型パズルのエッセンス 型パズルを要素分解すると組み立てやすq Uf 型引数の推論によって入力の型を得‘ Df 型引数の制約を につけ‘ E インターナルな型引数は補完不要なので頑張らなくて良q Bf 入力の型を条件型で絞り込みながら出力の型を組み立て‘ E 事前生成したマスタ型(Payload)を参照してシンプル化 入力時の補完・エラーのため
28. 型パズルをできるだけ頑張らない
29. なるべく事前生成して型計算を避ける Payload型から型パズルで導出できそうだが 重複を許容してすべて静的にコード生成する
30. なるべく事前生成して型計算を避ける モデルの一般化もせず重複生成
31. なるべく事前生成して型計算を避ける 事前生成ファイルは基本編集しないので、パースコストの影響が限定的 → ファイルサイズが大きくなってもOK 型チェックはfindFirstとかを触るたびに発生する（tsc内部でキャッシュは効くが） → パフォーマンスがDXに直撃する さらにビルド時間でもパースに比べて型チェックのほうが影響が大きい prisma/prisma の tsc trace パース時間 型チェック時間
32. なるべく事前生成して型計算を避ける リアルタイムな入力に対してフィードバックしたい部分に絞って型計算をする その他はできるだけ静的にコード生成する
33. コード生成もできるだけ頑張らない
36. コード生成するコードは基本的につらい テンプレートリテラルなりASTビルダなりで組み立てるので見通しは最悪 なるべく生成するパターンを減らしたい
37. ライブラリとして切り出す 生成するコードのうち静的な部分はライブラリに切り出して、 生成コードからは参照するだけ 生成したコード
38. ライブラリとして切り出す Tips: ライブラリ内で使っているinternalな型もすべてexportする exportしていないと、この型を参照する他パッケージの.d.tsに インライン化されて爆発する Ref: https://github.com/prisma/prisma/blob/main
 /packages/client/src/runtime/core/types/exported/README.md
39. 型以外は生成しない 生成された .d.ts 3500行に対して .js は200行程度 コード生成で頑張るのではなく Proxy を使った動的操作をしている
40. まとめ H リアルタイムな入力にフィードバックしたい部分だけは型パズルを頑張5 H 型パズルを要素分解して順番に考えるとやりやすF H それ以外はコードの重複を許容して事前生成に振り切5 H 完全に静的な型は生成すらせずライブラリÆ H 型以外のランタイム処理はProxyで頑張る
41. Thanks! Ubieのブースにいます！