1
 本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。 Full-Stack TypeScript 開発で 共通化すべき型 とは

2
 © toggle holdings inc. ⿓野 卓⼰ 所属 トグルホールディングス株式会社 ＠Takumi_T_JP

3
 © toggle holdings inc. Full-Stack TypeScript Frontend Backend

4
 © toggle holdings inc. TSKaigiチャンネルで⼀番⼈気 なんとかして コイツ(先輩)の 再⽣数､超えられないかな...

5
 © toggle holdings inc. 定義して良かった型

6
 © toggle holdings inc. API通信のリクエスト / レスポンス 定義して良かった型 クライアント処理 APIハンドラ バックエンド処理 共通化した型

7
 © toggle holdings inc. API通信のリクエスト / レスポンス 定義して良かった型 クライアント処理

8
 © toggle holdings inc. API通信のリクエスト / レスポンス 定義して良かった型 APIハンドラ

9
 © toggle holdings inc. API通信のリクエスト / レスポンス 定義して良かった型 バックエンド処理

10
 © toggle holdings inc. API通信のリクエスト / レスポンス 定義して良かった型 クライアント処理 APIハンドラ バックエンド処理 共通化した型

11
 © toggle holdings inc. hoge.com/:id API通信のリクエスト / レスポンス 描画したフォーム項⽬ = バックエンド側処理の直感的な形 定義して良かった型 = ⼀⽅が、もう⼀⽅の処理を予測しやすく透過的

12
 © toggle holdings inc. 型の検索 エラー箇所 API通信のリクエスト / レスポンス 定義して良かった型

13
 © toggle holdings inc. 逆に他の型定義の 共有はどうなのか

14
 © toggle holdings inc. 認証‧権限‧ロール 業務ドメイン固有のリテラル型 カスタムステータス 種別コード 外部API関連  リクエスト‧レスポンス 逆に他の型定義の共有はどうなのか 部分的に共有する

15
 © toggle holdings inc. それ以外すべて 型定義したくないもの 逆に他の型定義の共有はどうなのか

16
 © toggle holdings inc. 過剰な型定義はしたくない 逆に他の型定義の共有はどうなのか ⼀⽅が、もう⼀⽅の処理を予測しやすく透過的 ロジックの責務が整理しきれていない

17
 © toggle holdings inc. 型定義と共有⽅法

18
 © toggle holdings inc. npm , bit type User 外部 import { type User } … Frontend import { type User } … Backend 型定義と共有⽅法 1.外部からimportして共有 プライベートパッケージとして公開 npm publish--access=restrictedで 制限付き公開 プライベート空間に共有 公開する

19
 © toggle holdings inc. Monorepo type User zodスキーマから推測 Packages 型定義と共有⽅法 1.外部からimportして共有 プライベートパッケージとして公開 npm publish--access=restrictedで 制限付き公開 プライベート空間に共有 2.バリデーションライブラリからの 型定義の⽣成→伝播 型を⽣成して利⽤する Zod, Yup など import { type User } … Frontend import { type User } … Backend

20
 © toggle holdings inc. ● API通信のリクエスト / レスポンスは ぜひ型の共通化をしましょう！ ● 他の部分は基本的に共有化するメリットは薄い ● 型の共通化‧共有 1.バリデーションライブラリからの型定義の⽣成  伝播 2.外部からimportして共有 まとめ

21
 © toggle holdings inc. Thank you !!!