サンプルコードで身につける: オプショナルチェーン ?.

type MemberProfile = { nickname?: string };

const memberA: MemberProfile = { nickname: "Tar-kun" };
const memberB: MemberProfile = {};

// 値があれば続きが実行され、なければ undefined で止まる
console.log(memberA.nickname?.toUpperCase()); // TAR-KUN
console.log(memberB.nickname?.toUpperCase()); // undefined(エラーにならない)

// ?. を使わないなら、毎回 if での確認が必要だった
if (memberB.nickname !== undefined) {
  console.log(memberB.nickname.toUpperCase());
}

type Workplace = {
  companyName: string;
  branch?: {
    branchName: string;
    floorCount?: number;
  };
};

const officeA: Workplace = { companyName: "ABC商事", branch: { branchName: "大阪支社", floorCount: 12 } };
const officeB: Workplace = { companyName: "個人事業" };

// branch が無ければ、その先には進まず undefined になる
console.log(officeA.branch?.branchName); // 大阪支社
console.log(officeB.branch?.branchName); // undefined
console.log(officeA.branch?.floorCount); // 12

type SurveyAnswer = { freeComment?: string };

const answerList: SurveyAnswer[] = [{ freeComment: "使いやすいです" }, {}];

for (const answer of answerList) {
  // 結果の型は number | undefined になる
  const commentLength = answer.freeComment?.length;

  // そのまま表示すると undefined が出てしまうので、確認してから使う
  if (commentLength !== undefined) {
    console.log("コメントあり(" + commentLength + "文字)");
  } else {
    console.log("コメントなし");
  }
}

interface TaskOptions {
  // 完了時に呼ばれる関数。指定は任意
  onDone?: (result: string) => void;
}

function runTask(taskOptions: TaskOptions): void {
  console.log("集計処理を実行");
  // onDone があれば呼び、なければ何もしない
  taskOptions.onDone?.("集計結果: 3件");
}

runTask({
  onDone: function (result: string): void {
    console.log("通知: " + result);
  },
});
runTask({}); // コールバックなしでもエラーにならない

interface OrderResponse {
  orderId: number;
  customer?: { customerName: string; address?: { city: string } };
}

const orderList: OrderResponse[] = [
  { orderId: 101, customer: { customerName: "Taro", address: { city: "Tokyo" } } },
  { orderId: 102, customer: { customerName: "Jiro" } },
  { orderId: 103 },
];

for (const order of orderList) {
  // どの階層が欠けていても ?. が undefined で止めてくれる
  const cityValue = order.customer?.address?.city;
  if (cityValue !== undefined) {
    console.log(order.orderId + ": " + cityValue + " へ配送");
  } else {
    console.log(order.orderId + ": 配送先が未登録");
  }
}