状態で表示を切り替える
状態の数だけ表示がある
No.33 で定義した通信状態の型を、もう一度出します。
TypeScript
type FetchStatus = "loading" | "success" | "error";画面はこの状態を見て、出すものを切り替えます。読み込み中なら待ってもらう文言、成功なら一覧、失敗ならやり直しの案内です。状態が 3 つなら、表示も 3 通り用意しなければいけません。
if を並べても書けますが、状態の数が増えると読みにくくなります。値そのもので分けるときは switch のほうが向いています。
switch で状態ごとに分ける
TypeScript
function statusMessage(status: FetchStatus): string {
switch (status) {
case "loading":
return "作品を読み込んでいます";
case "success":
return "作品を読み込みました";
case "error":
return "読み込みに失敗しました";
}
}case の右に書けるのは、FetchStatus に含まれる値だけです。型に無い値を書くと止まります。
TypeScript
case "loaded":
// エラー Type '"loaded"' is not comparable to type 'FetchStatus'.書き漏らしも型が見つける
この書き方の本当の価値は、case を 1 つ忘れたときに出ます。
TypeScript
function statusMessage(status: FetchStatus): string {
switch (status) {
case "loading":
return "作品を読み込んでいます";
case "success":
return "作品を読み込みました";
}
}
// エラー Function lacks ending return statement and not all code paths
// return a value."error" のときだけ、どの return にも当たらず関数が終わってしまいます。戻り値を string と約束してあるので、その穴が指摘されました。すべての状態を書き切ったときだけエラーが消える、という状況になっています。これを網羅と呼びます。
default を置くと網羅が効かなくなる
つい書きたくなりますが、default を置くと様子が変わります。
TypeScript
default:
return "";これがあると、case をいくつ忘れても穴が埋まってしまい、エラーが出ません。そして後日 "idle" のような状態を型に足したとき、その状態は誰にも気づかれないまま default に落ちます。
状態の union を switch で捌くときは default を置かない、と覚えてください。書き漏らしを教えてもらう権利を、自分から手放さないためです。
手を動かす
演習では、通信状態から画面に出すメッセージを返す関数を書きます。switch で 3 つの状態をすべて書き切ってください。
要件
switchで状態ごとに分ける- 3 つの状態すべてに
caseを書く defaultは置かない- 型の定義は変えない
入出力例
statusMessage("loading") → "作品を読み込んでいます"
statusMessage("success") → "作品を読み込みました"
statusMessage("error") → "読み込みに失敗しました。時間をおいて試してください"ヒント
編集 ゆめさく編集部