型のインスタンス化は非常に深く、無限である可能性があります。

TSKaigi Kansai 2024 振り返り勉強会 で話した時のスライドです。
https://toggle.connpass.com/event/337428/

Transcript

1. 1
 本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。 型のインスタンス化は 非常に深く、無限である 可能性があります。 Type instantiation is excessively deep and possiblyinfinite.
2. 2
 © toggle holdings inc. 君⽥ 祥⼀ 所属 2023/11〜現在 トグルホールディングス株式会社 X @kimi_koma1111 よろしくお願いします！ 

3. 3
 © toggle holdings inc. 型のインスタンス化は非常に深く 無限である可能性があります。 Type instantiation is excessively deep and possibly infinite.
4. 4
 © toggle holdings inc. アジェンダ © toggle holdings inc. • 弊社の開発環境 • 発生した問題と解決方法 • 今後どのように考えているか • まとめ
5. 5
 © toggle holdings inc. 弊社の開発環境
6. 6
 © toggle holdings inc. 開発環境 © toggle holdings inc. フロントエンド 
 バックエンド 

7. 7
 © toggle holdings inc. 開発環境 © toggle holdings inc. Monorepo • バックエンドとフロントエンドのそれぞれコードが 1つのリポジトリに まとまっているので変更を追いやすい • 型の共通化をしやすい • フルスタックに開発しやすい
8. 8
 © toggle holdings inc. 開発環境 © toggle holdings inc. こちら
9. 9
 © toggle holdings inc. 開発環境 © toggle holdings inc. こちら
10. 10
 © toggle holdings inc. 型の共通化
11. 11
 © toggle holdings inc. 開発環境 © toggle holdings inc. フロントエンド 
 バックエンド 
 zod zodios
12. 12
 © toggle holdings inc. Zodとは？ © toggle holdings inc. • TS・JSで利用できるスキーマ定義とバリデーションライブラリ • スキーマを宣言的にコードで定義 • スキーマに基づいて、データのバリデーションを行う • スキーマからの型を自動生成できる 詳しくは こちら
13. 13
 © toggle holdings inc. © toggle holdings inc.
14. 14
 © toggle holdings inc. © toggle holdings inc.
15. 15
 © toggle holdings inc. Zodiosとは？ © toggle holdings inc. • 型安全なAPIクライアントを作成するためのライブラリ • Axiosをベースで Zodスキーマを活用 ◦ イメージは型つきの Axios • リクエストとレスポンスの型を自動的に生成 • API通信時に型チェックが実行される • エンドポイントを宣言的に定義するだけ 詳しくは こちら
16. 16
 © toggle holdings inc. © toggle holdings inc.
17. 17
 © toggle holdings inc. 発生した問題と解決方法
18. 18
 © toggle holdings inc.
19. 19
 © toggle holdings inc. エディタで型推論できなくなった
20. 20
 © toggle holdings inc. TypeCheckが通らなくなった
21. 21
 © toggle holdings inc. 型のインスタンス化は非常に深く 無限である可能性があります。 Type instantiation is excessively deep and possibly infinite.
22. 22
 © toggle holdings inc. なぜ起こったのか？
23. 23
 © toggle holdings inc. なぜ起こったのか？ © toggle holdings inc. Zodiosで定義したエンドポイントが多く Zodスキーマを多重に参照しているため 型のネストが深くなりすぎている
24. 24
 © toggle holdings inc. なぜ起こったのか？ © toggle holdings inc. • TypeScript のコンパイラが「無限に再帰している」と誤検知 ◦ コンパイラが型を完全に解釈しようとする過程で再帰が終了す る条件を検出できない
25. 25
 © toggle holdings inc. なぜ起こったのか？ © toggle holdings inc. 無限ループしているように見える状態 深すぎるネストのせいで計算が過剰に複雑化している 実際は
26. 26
 © toggle holdings inc. 例えば 例えば
27. 27
 © toggle holdings inc. 一見問題がないように見える例 以下の条件が加わるとエラーが発生する可能性 • エンドポイント数が多い • スキーマが他のスキーマを参照して連鎖的に 深くなる • Zodios の型推論がすべてのエンドポイントを 展開しようとする
28. 28
 © toggle holdings inc. ✅ エンドポイント数が多い ➡ 80を超えるエンドポイントをひとまとめに ✅ スキーマが他のスキーマを参照して連鎖的に 深くなる ➡ スキーマ同士の依存関係がめちゃあった ✅ Zodios の型推論がすべてのエンドポイントを 展開しようとする ➡ 多分展開しようとしていた
29. 29
 © toggle holdings inc. 解決方法
30. 30
 © toggle holdings inc. 分割した
31. 31
 © toggle holdings inc. ある程度意味のあるまとまりにして分割 ✅ ネストを浅くしたことにより型推論の範囲が限定 ✅ コンパイラが一度に扱う型の範囲が限定され、 処理負荷が分散
32. 32
 © toggle holdings inc. 今後どのように考えているか
33. 33
 © toggle holdings inc. 今後どのように考えているか © toggle holdings inc. • 分割することでエラーは回避できたが、暫定対応にすぎない ◦ 数が多くなったらまた発生するのでは？ • Zodios が1年くらいメンテナンスされていない ◦ 移行先を見つける？
34. 34
 © toggle holdings inc. Zodios 移行する？
35. 35
 © toggle holdings inc. 移⾏先候補 © toggle holdings inc. • Effect ◦ https://effect.website/ • TS-REST ◦ https://ts-rest.com/ • Hono純正のRPC機能 ◦ https://hono.dev/docs/guides/rpc
36. 36
 © toggle holdings inc. Effect © toggle holdings inc. • 主にエラーハンドリング、リソース管理、並行処理を強力にサポー トするライブラリ • Effectそのものが ZodiosのようなAPIクライアントを作成するライ ブラリではない ◦ ただし、そのような構築は可能
37. 37
 © toggle holdings inc. TS-REST © toggle holdings inc. • TypeScriptを用いて新規および既存の APIに対して段階的に型 安全性を導入するためのライブラリ • Zodiosとほぼ同じような記述方法で APIクライアントとして活用で きる
38. 38
 © toggle holdings inc. Hono純正のRPC機能 © toggle holdings inc. • Zodをそのままに新たにライブラリを追加しなくても利用できる唯 一の移行先候補 • バックエンドで Honoを利用、現段階では最有力候補
39. 39
 © toggle holdings inc. TypeScript 5.6では、大きなファイルでもIDEが高速に感じら れるようになります。 TSは、目に見えるコードだけを優先的に表示するようになり ます。 52k行のファイルでは、レスポンスタイムが3秒から140msに なった。 これは、生成されるTSコードが多いプロジェクトでは大きな 違いになるだろう。 🤔🤔🤔🤔 🤔🤔 Our current version is 5.4 ….. :(
40. 40
 © toggle holdings inc. まとめ TypeScriptにあまり無理をさせず 計算量が少なく、シンプルになるように 開発者も気をつける
41. 41
 本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。 ご清聴 ありがとうございました