状態を型で設計する

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

• loading — 通信中。「ちょっと待ってね」のぐるぐるを出す
• success — データが取れた。一覧を画面に出す
• empty — データが0件だった。「まだ何もないよ」と教える
• error — 通信に失敗した。「もう一度試してね」と出す

この4つを型で書けるのが TypeScript の真骨頂だよ。ch3 で学んだタグ付きユニオン（Discriminated Unions）を使って、status という共通の目印で4通りを並べる。

switch (state.status) で分岐すると、各 case の中では TypeScript が型を絞り込んでくれる。"success" の中でだけ state.data が使えて、"error" の中でだけ state.message が使える。

ここが書けると、画面のどの状態でどのデータが使えるかを型が教えてくれるようになる。「ローディング中なのにデータを読んでしまう」「エラーなのに一覧を出してしまう」という事故を、動かす前に防げるんだ。

これが、フェーズ4の「待って・受け取って・画面に出す」の型の土台だよ。