Real World Type Puzzle and Code Generation

Real World and Type Puzzle Code Generation @yukukotani 2024/05/11 -
TSKaigi 2024

小谷優空 - @yukukotani ・Software Engineer @ Ubie, Inc. (2019/05~)
　　・Lead Architect ・Maintainer of Kuma UI ・Student @ Univ. Tsukuba (2019/04~) 　　・情報科学類自己紹介

趣旨型安全なコードを吐くコードジェネレータを作る野暮用があった（あるある） → 型安全 + コードジェネレータ = → 観察してエッセンスを抽出しよう！ Prisma

観察するスキーマこのスキーマから生成されるコードを観察する User と Post がリレーションを持つ簡単なやつ

型パズルでselectした値に型をつける

簡略化した実装を観察するこれが動くPrismaClient型(findFirst関数)の実装スキーマに即した型がつく TS Playground

PrismaClient型実際はクラスとして実装されているが、ここではシンプルなオブジェクト型に

入力の型を得る Type Argument Inferenceによって型引数Tが推論される

入力の型を得る型引数の制約は入力時の補完・エラー用。 GetSelectIncludeResultの導出には条件型を使うので無関係

出力の型を導出する続いて出力の型を組成する要素を見ていく

$XxxPayload型スキーマのモデルと対応して生成されるカラムの型や他モデルとのリレーションを表現 → select結果の型を決定するための　マスタとして機能 schema.prisma 生成される型

出力の型を導出する第2型引数には入力の型をそのまま渡す

出力の型を導出するいよいよ出力の型そのものを見ていく

GetSelectIncludeResult<P, A> 事前生成のPayload型(P)とユーザーが渡す引数(A)から、select結果の型を導出

GetSelectIncludeResult<P, A> 条件型 `T extends { foo: infer S }
? S : never`パターンで、selectした中身を取る

GetSelectIncludeResult<P, A> Mapped Types で型を組み立てる

GetSelectIncludeResult<P, A> selectしたキーを Mapped Types のキーとする

GetSelectIncludeResult<P, A> キーに対応する値がfalse等の場合はneverにキャストして除外 Mapped Typesのキーを neverにすると丸ごと消える

GetSelectIncludeResult<P, A> Mapped Typesの値側を見ていく

GetSelectIncludeResult<P, A> Payload型を参照して、selectする値の型を取る

おさらい：$XxxPayload型 select結果の型を決定するためのマスタ schema.prisma 生成される型

GetSelectIncludeResult<P, A> scalarsではなくobjectsの場合も同様に取り、再帰的にselect結果を導出

GetSelectIncludeResult<P, A> 条件型に当てはまらなければneverに落とすが、最初の型制約で先に落ちるはず

まとめ：型パズルのエッセンス型パズルを要素分解すると組み立てやすq Uf 型引数の推論によって入力の型を得 Df 型引数の制約をにつけ E インターナルな型引数は補完不要なので頑張らなくて良q Bf
入力の型を条件型で絞り込みながら出力の型を組み立て E 事前生成したマスタ型(Payload)を参照してシンプル化入力時の補完・エラーのため

型パズルをできるだけ頑張らない

なるべく事前生成して型計算を避ける Payload型から型パズルで導出できそうだが重複を許容してすべて静的にコード生成する

なるべく事前生成して型計算を避けるモデルの一般化もせず重複生成

なるべく事前生成して型計算を避ける事前生成ファイルは基本編集しないので、パースコストの影響が限定的 → ファイルサイズが大きくなってもOK 型チェックはfindFirstとかを触るたびに発生する（tsc内部でキャッシュは効くが） → パフォーマンスがDXに直撃するさらにビルド時間でもパースに比べて型チェックのほうが影響が大きい prisma/prisma の
tsc trace パース時間型チェック時間

なるべく事前生成して型計算を避けるリアルタイムな入力に対してフィードバックしたい部分に絞って型計算をするその他はできるだけ静的にコード生成する

コード生成もできるだけ頑張らない

コード生成するコードは基本的につらいテンプレートリテラルなりASTビルダなりで組み立てるので見通しは最悪なるべく生成するパターンを減らしたい

ライブラリとして切り出す生成するコードのうち静的な部分はライブラリに切り出して、生成コードからは参照するだけ生成したコード

ライブラリとして切り出す Tips: ライブラリ内で使っているinternalな型もすべてexportする exportしていないと、この型を参照する他パッケージの.d.tsにインライン化されて爆発する Ref: https://github.com/prisma/prisma/blob/main  /packages/client/src/runtime/core/types/exported/README.md

型以外は生成しない生成された .d.ts 3500行に対して .js は200行程度コード生成で頑張るのではなく Proxy を使った動的操作をしている

まとめ H リアルタイムな入力にフィードバックしたい部分だけは型パズルを頑張5 H 型パズルを要素分解して順番に考えるとやりやすF H それ以外はコードの重複を許容して事前生成に振り切5 H 完全に静的な型は生成すらせずライブラリÆ H
型以外のランタイム処理はProxyで頑張る

Thanks! Ubieのブースにいます！

Real World Type Puzzle and Code Generation

Real World Type Puzzle and Code Generation

More Decks by Yuku Kotani

Other Decks in Technology

Featured

Transcript