$30 off During Our Annual Pro Sale. View Details »

Full-Stack TypeScript開発で共通化すべき型とは (2024年 / TSKa...

takumi_tatsuno
November 16, 2024
790

Full-Stack TypeScript開発で共通化すべき型とは (2024年 / TSKaigi Kansai 登壇資料)

2024年11月16日(土) TSKaigi Kansai LT登壇資料です。
これからもイベントには参加していきたいと思いますので、ぜひお声がけください!!
もしよろしければ..., 「⭐️ Star 」 もいただければ励みになります! > 🐉🐉🐉

近年、フロントエンドもバックエンドもTypeScriptで統一する「Full-Stack TypeScript」開発が急速に普及しています。しかし、モジュール間の型共有や連携に関する知見はまだ十分に共有されていません。フロントエンドとサーバーサイド間で言語の切り替えコストを抑える鍵となるのが「型の共有」です。本セッションでは、実務上で共有することで特に効果を発揮した「定義して良かった型」と実例について紹介します。開発効率を向上させる実践的な型定義とその共有方法をお伝えし、プロジェクトで活用できるノウハウを提供します。

takumi_tatsuno

November 16, 2024
Tweet

Transcript

  1. 11
 © toggle holdings inc. hoge.com/:id API通信のリクエスト / レスポンス 描画したフォーム項⽬

    = バックエンド側処理の直感的な形 定義して良かった型 = ⼀⽅が、もう⼀⽅の処理を予測しやすく透過的
  2. 14
 © toggle holdings inc. 認証‧権限‧ロール 業務ドメイン固有のリテラル型 カスタムステータス 種別コード 外部API関連 

    リクエスト‧レスポンス 逆に他の型定義の共有はどうなのか 部分的に共有する
  3. 18
 © toggle holdings inc. npm , bit type User

    外部 import { type User } … Frontend import { type User } … Backend 型定義と共有⽅法 1.外部からimportして共有 プライベートパッケージとして公開 npm publish--access=restrictedで 制限付き公開 プライベート空間に共有 公開する
  4. 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
  5. 20
 © toggle holdings inc. • API通信のリクエスト / レスポンスは ぜひ型の共通化をしましょう!

    • 他の部分は基本的に共有化するメリットは薄い • 型の共通化‧共有 1.バリデーションライブラリからの型定義の⽣成  伝播 2.外部からimportして共有 まとめ