Guppi StudioDRILL 05 / 安全な分岐
ユニオン型と型の絞り込み
複数の型を受け取る関数で、実行時の判定から安全に処理を分けます。
COURSE ROUTETypeScript Foundation
0 / 8
YOUR TASK
normalizeId() を完成させる
文字列または数値のIDを表示用に正規化してください。数値は先頭に # を付け、文字列は前後の空白を除いて大文字にします。
- 入力
- id は string または number です。
- 出力
- 数値なら `#42`、文字列なら `USER-42` のような文字列を返します。
BEFORE CODING
string と number を安全に分ける
id の型は string | number なので、分岐の前には片方の型だけが持つメソッドを呼べません。typeof で number を先に判定すると、その分岐の中では数値として、分岐を抜けた後は文字列として扱えます。
normalizeId(" user-42 ") → "USER-42" number の処理はその場で返す
数値なら # を付けて return します。この分岐がそこで終わるため、残りの行へ到達する id は string だけです。
文字列メソッドを順に使う
trim() が前後の空白を除き、toUpperCase() が英字を大文字にします。どちらも新しい文字列を返します。
SYNTAX RECALL
確認する構文
function print(value: string | number): string {
if (typeof value === "number") {
return value.toFixed(0);
}
return value.trim();
}- | で受け取れる型を列挙する
- typeof で現在の型を判定する
- 分岐後の型に対応するメソッドを使う
STEPWISE HINTS
ヒント
01最初の一手
まず `typeof id === "number"` を判定します。
02処理の組み立て
number の分岐ではテンプレート文字列で # を付けます。
03コードの形
string の分岐では trim() の後に toUpperCase() を呼びます。
AFTER ACCEPTED
解説
AC 後に解説が開きます
まずは自分の言葉で方針を説明し、コードに落としてみましょう。