サンプルコードで身につける: 判別可能ユニオン

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; sideLength: number };

function calcArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return shape.radius * shape.radius * 3.14; // ここでは radius が使える
  }
  return shape.sideLength * shape.sideLength;
}

console.log(calcArea({ kind: "circle", radius: 2 }));
console.log(calcArea({ kind: "square", sideLength: 3 }));

type AppNotification =
  | { channel: "email"; address: string }
  | { channel: "sms"; phoneNumber: string };

function sendNotification(notification: AppNotification): void {
  if (notification.channel === "email") {
    console.log(notification.address + " にメールを送信");
  } else {
    console.log(notification.phoneNumber + " にSMSを送信");
  }
}

sendNotification({ channel: "email", address: "taro@example.com" });
sendNotification({ channel: "sms", phoneNumber: "090-0000-0000" });

type Payment =
  | { method: "cash" }
  | { method: "card"; cardBrand: string }
  | { method: "point"; usedPoints: number };

function describePayment(payment: Payment): string {
  switch (payment.method) {
    case "cash":
      return "現金で支払い";
    case "card":
      return payment.cardBrand + "カードで支払い";
    case "point":
      return payment.usedPoints + "ポイントで支払い";
  }
}

console.log(describePayment({ method: "cash" }));
console.log(describePayment({ method: "card", cardBrand: "VISA" }));
console.log(describePayment({ method: "point", usedPoints: 500 }));

type SubmitState =
  | { kind: "editing"; draftText: string }
  | { kind: "sending" }
  | { kind: "done"; sentAt: string }
  | { kind: "failed"; reason: string };

function renderState(state: SubmitState): string {
  if (state.kind === "editing") return "入力中: " + state.draftText;
  if (state.kind === "sending") return "送信中...";
  if (state.kind === "done") return state.sentAt + " に送信済み";
  return "送信失敗: " + state.reason;
}

console.log(renderState({ kind: "editing", draftText: "こんにちは" }));
console.log(renderState({ kind: "sending" }));
console.log(renderState({ kind: "done", sentAt: "12:30" }));
console.log(renderState({ kind: "failed", reason: "通信エラー" }));

type UserEvent =
  | { kind: "click"; targetId: string }
  | { kind: "scroll"; distance: number }
  | { kind: "purchase"; amount: number };

const eventLog: UserEvent[] = [
  { kind: "click", targetId: "buy-button" },
  { kind: "scroll", distance: 1200 },
  { kind: "purchase", amount: 480 },
  { kind: "purchase", amount: 1200 },
];

let clickCount = 0;
let totalAmount = 0;
for (const userEvent of eventLog) {
  if (userEvent.kind === "click") {
    clickCount += 1;
  } else if (userEvent.kind === "purchase") {
    totalAmount += userEvent.amount; // purchase のときだけ amount がある
  }
}
console.log("クリック数: " + clickCount);
console.log("購入合計: " + totalAmount + "円");