オプショナルプロパティ(?)

このレッスンでは、interfaceの中で「あってもなくてもよいプロパティ」を表すオプショナルプロパティの書き方を学びます。「TypeScript interface オプショナル」で調べている方向けです。

プロパティ名の後ろに?を付けると、そのプロパティは省略可能になります。省略された場合、値はundefinedとして扱われます。

サンプルコードでは、interface Profile { name: string; nickname?: string; }のように、あだ名(nickname)を省略可能にしています。値がない場合は三項演算子で代わりの文言を表示しています。

初心者がよくつまずくのが、オプショナルプロパティにundefinedチェックをせずアクセスしてしまうことです。「値があるかもしれないし、ないかもしれない」プロパティを扱うときは、必ず存在確認をする習慣が大切です。

実際の開発現場では、フォーム入力のように「必須ではない項目」が多いデータを扱う場面で、オプショナルプロパティが頻繁に使われます。

📖 お手本コード

interface Profile {
  name: string;
  nickname?: string;
}

function show(p: Profile): string {
  return p.nickname ? `${p.name}(${p.nickname})` : p.name;
}
console.log(show({ name: "たろう", nickname: "たっちゃん" }));
console.log(show({ name: "はなこ" }));

✍️ あなたのコード

コードを書いたら「実行する」を押してください

🧪 このサイトではTypeScriptを直接コンパイル・実行できないため、お手本コードと同じ内容を入力できたかをその場で判定します(採点はブラウザ内だけで行われ、どこにも送信されません)。

🎯

ここまでできればゴール達成!
あだ名があってもなくても表示できる、柔軟なプロフィール表示処理が作れるようになります。