4つの状態を型で書く

01 / 03

画面には4つの状態がある

データを取りにいくアプリには、画面の状態が4つあるよ。

loading — 読み込み中（「ちょっと待ってね」）
success — データが取れた（一覧を表示する）
empty — データが0件だった（「まだ何もないよ」）
error — 失敗した（「もう一度試してね」）

この4つを型で書けるのが TypeScript の強みだよ。

02 / 03

タグ付きユニオンで4通りを並べる

ch3 で学んだタグ付きユニオンを使う。status という共通の目印を持たせて、4通りを | で並べるよ。

success だけが data を持つ。error だけが message を持つ。状態によって持つものが違うのを型で表現できるんだ。

type ViewState =  | { status: "loading" }  | { status: "empty" }  | { status: "error"; message: string }  | { status: "success"; data: string[] };

03 / 03

switch で4つに分岐する

switch (state.status) で分岐すると、各 case の中では TypeScript が型を絞り込んでくれる。

"success" の中でだけ state.data が使える。"error" の中でだけ state.message が使える。間違った状態で間違ったプロパティを触る事故が起きないんだ。

type ViewState =  | { status: "loading" }  | { status: "empty" }  | { status: "error"; message: string }  | { status: "success"; data: string[] };function render(state: ViewState): string {  switch (state.status) {    case "loading": return "読み込み中...";    case "empty":   return "データがありません";    case "error":   return `エラー: ${state.message}`;    case "success": return state.data.join(", ");  }}console.log(render({ status: "success", data: ["買い物", "掃除"] }));

実行結果

買い物, 掃除