Guppi StudioDRILL 04 / コレクション
オブジェクト型と省略可能なプロパティ
type で値の形を定義し、省略される値へ安全な代替値を用意します。
COURSE ROUTETypeScript Foundation
0 / 8
YOUR TASK
displayUser() を完成させる
ユーザーの表示名と役割を `表示名 [role]` の形式で返してください。nickname がない場合は name を表示名にします。
- 入力
- user は name、role、任意の nickname を持つオブジェクトです。
- 出力
- nickname を優先した表示用文字列を返します。
BEFORE CODING
nickname がないときの表示名
nickname の末尾に ? を付けると、そのプロパティがないオブジェクトも User として受け取れます。関数内では nickname が undefined の可能性を考え、先に displayName を決めてから出力を組み立てます。
{ name: "Taro", role: "admin" } → "Taro [admin]" ? は値の欠落を型に含める
nickname?: string は、nickname が string または undefined であることを表します。プロパティを読み取った直後には string と決めつけられません。
?? は undefined のときだけ補う
user.nickname ?? user.name は、nickname がないときだけ name を使います。空文字列を勝手に name へ置き換えない点が || との違いです。
SYNTAX RECALL
確認する構文
type User = {
name: string;
nickname?: string;
};
const label = user.nickname ?? user.name;- オブジェクトの形を type で定義する
- ? で省略可能なプロパティを表す
- ?? で undefined の場合だけ代替値を使う
STEPWISE HINTS
ヒント
01最初の一手
nickname の型には `?` を付けます。
02処理の組み立て
`nickname ?? name` は nickname が undefined の場合に name を選びます。
03コードの形
選んだ表示名と role をテンプレート文字列へ入れます。
AFTER ACCEPTED
解説
AC 後に解説が開きます
まずは自分の言葉で方針を説明し、コードに落としてみましょう。