13. オプショナルプロパティ ?

プロパティ名の後ろに ? を付けると「あってもなくてもよい」省略可能なプロパティになります。{ name: string; nickname?: string } なら、nickname のないオブジェクトも代入できます。

実務のデータには「設定されていれば使う」という任意項目がつきものです。プロフィールのニックネームや配送のメモ欄など、全員が持つとは限らない値を ? で表現します。

つまずきポイントは、省略可能なプロパティの値は undefined の可能性があることです。そのまま文字列メソッドなどを呼ぶとエラーになるため、使う前に undefined でないことを確認する一手間が必要です。

▶ サンプルコードを実行してみよう(自由に書き換えてOK)

TypeScript

// nickname は省略できる
const taro: { name: string; nickname?: string } = { name: "Taro" };
const hanako: { name: string; nickname?: string } = {
  name: "Hanako",
  nickname: "Hana",
};

function displayName(profile: { name: string; nickname?: string }): string {
  // 省略可能なプロパティは undefined チェックをしてから使う
  if (profile.nickname !== undefined) {
    return profile.nickname;
  }
  return profile.name;
}

console.log(displayName(taro));
console.log(displayName(hanako));

公式ドキュメントで詳しく ↗