2026年5月12日約6分で読めます
any に逃げず、型でバグを未然に防ぐ。判別可能なユニオンや as const を使った実践的な TypeScript の型設計を紹介します。
TypeScriptReact型設計
フロントエンドの不具合の多くは「想定していない状態」から生まれます。TypeScript の型をきちんと使うと、その「想定外」をコンパイル時に潰せます。
状態は判別可能なユニオンで
ローディング・成功・失敗を別々の boolean で持つと、ありえない組み合わせが表現できてしまいます。
// 良くない例: isLoading と error が同時に立てる
type State = { isLoading: boolean; data?: Data; error?: Error };
// 良い例: ありえない状態を型で禁止する
type State =
| { status: "loading" }
| { status: "success"; data: Data }
| { status: "error"; error: Error };
status で分岐すれば、success のときだけ data にアクセスできることを型が保証してくれます。
as const で値を型に持ち上げる
const ROLES = ["admin", "member", "guest"] as const;
type Role = (typeof ROLES)[number]; // "admin" | "member" | "guest"
定数の定義をそのまま型として使えるので、二重管理がなくなります。
any ではなく unknown
外部から来る値は any ではなく unknown で受け、使う前に絞り込みます。
anyは型チェックを止めるスイッチ。unknownは「まだ確認していない」という正直な型です。
型は書くコストがありますが、それ以上にレビューと将来の自分を助けてくれます。