【TypeScript】union（ユニオン型）の基礎から判別可能なユニオンまで

// value は string 型 または number 型 を受け入れる
let value: string | number;

value = "Hello"; // OK
value = 100;     // OK
// value = true; // NG: boolean は指定されていないためコンパイルエラー

// 引数 text は string または string[] のどちらか
function formatText(text: string | string[]): string {
  // 注意：この時点では、text が string か string[] か確定していません
  // そのため、text.join() などを直接呼ぶとエラーになります
  
  if (Array.isArray(text)) {
    // ここでは text は string[] として扱われる
    return text.join(", ");
  } else {
    // ここでは text は string として扱われる
    return text.trim();
  }
}

console.log(formatText(" Apple "));        // 出力: "Apple"
console.log(formatText(["Apple", "Pen"])); // 出力: "Apple, Pen"

function printId(id: number | string) {
  if (typeof id === "string") {
    // このブロック内では id は string 型
    console.log(`ID is a string: ${id.toUpperCase()}`);
  } else {
    // このブロック内では id は number 型
    console.log(`ID is a number: ${id.toFixed(2)}`);
  }
}

interface Bird {
  fly: () => void;
  layEggs: () => void;
}

interface Fish {
  swim: () => void;
  layEggs: () => void;
}

type Pet = Bird | Fish;

function movePet(pet: Pet) {
  // pet.fly() と直接書くと、Fish だった場合にエラーになるためコンパイルが通らない
  // 両方に存在する layEggs() なら呼べる

  if ("fly" in pet) {
    // "fly" プロパティを持つのは Bird なので、ここは Bird 型に絞り込まれる
    pet.fly();
  } else {
    // それ以外は Fish 型に絞り込まれる
    pet.swim();
  }
}

// 戻り値の型に `pet is Fish` と記述する
function isFish(pet: Pet): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

function handlePet(pet: Pet) {
  if (isFish(pet)) {
    // ここで pet は Fish 型になる
    pet.swim();
  } else {
    // ここで pet は Bird 型になる
    pet.fly();
  }
}

// 各インターフェースに、固定の文字列を持つ 'type' プロパティを含める
interface CreditCardPayment {
  type: "CREDIT_CARD"; // これがタグになる
  cardNumber: string;
  securityCode: string;
}

interface PayPayPayment {
  type: "PAYPAY";
  phoneNumber: string;
}

interface BankTransferPayment {
  type: "BANK_TRANSFER";
  bankName: string;
  accountNumber: string;
}

// 判別可能なユニオン型の定義
type PaymentMethod = CreditCardPayment | PayPayPayment | BankTransferPayment;

function processPayment(payment: PaymentMethod) {
  switch (payment.type) {
    case "CREDIT_CARD":
      // ここでは CreditCardPayment 型に確定している！
      console.log(`カード番号: ${payment.cardNumber} で決済します`);
      break;
    case "PAYPAY":
      // ここでは PayPayPayment 型に確定している！
      console.log(`電話番号: ${payment.phoneNumber} に請求します`);
      break;
    case "BANK_TRANSFER":
      // ここでは BankTransferPayment 型に確定している！
      console.log(`${payment.bankName} への振込を確認します`);
      break;
  }
}

interface State {
  isLoading: boolean;
  error: string | null;
  data: any | null;
}
// isLoading が false なのに error と data の両方に値が入る、といった矛盾した状態を作れてしまう。

type FetchState<T> =
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; error: Error };

// 状態が "success" の時にしか data プロパティは存在しないため、
// 矛盾した状態を型レベルで完全に排除できる！

function processPaymentSafe(payment: PaymentMethod) {
  switch (payment.type) {
    case "CREDIT_CARD":
      // 処理...
      return;
    case "PAYPAY":
      // 処理...
      return;
    case "BANK_TRANSFER":
      // 処理...
      return;
    default:
      // ここがポイント！すべてのケースを網羅していれば、
      // ここに到達した時点での payment の型は `never`（あり得ない型）になります。
      const _exhaustiveCheck: never = payment;
      throw new Error(`未知の決済方法です: ${_exhaustiveCheck}`);
  }
}

interface HasName { name: string; }
interface HasAge { age: number; }

// Union: どちらかのプロパティがあればOK
type UnionType = HasName | HasAge;
const u1: UnionType = { name: "Alice" }; // OK

// Intersection: 両方のプロパティが必須
type IntersectionType = HasName & HasAge;
const i1: IntersectionType = { name: "Bob", age: 30 }; // OK
// const i2: IntersectionType = { name: "Charlie" }; // NG: ageがない