【TypeScript】ユニオン(Union)型の判定方法！typeof・in・instanceofを使い分けよう

// ユニオン型の基本的な例
let value: string | number;
value = "こんにちは"; // string型として有効
value = 42; // number型として有効
// value = true; // エラー：booleanは許可されていません

function processValue(value: string | number) {
  // この時点では、valueはstring | number型
  // value.toUpperCase(); // エラー：numberにはtoUpperCaseメソッドがない

  if (typeof value === 'string') {
    // この分岐内では、valueはstring型として扱われる
    console.log(value.toUpperCase()); // 正常に動作
  } else {
    // この分岐内では、valueはnumber型として扱われる
    console.log(value.toFixed(2)); // 正常に動作
  }
}

function formatValue(value: string | number | boolean): string {
  if (typeof value === 'string') {
    return `文字列: ${value.toUpperCase()}`;
  } else if (typeof value === 'number') {
    return `数値: ${value.toFixed(2)}`;
  } else if (typeof value === 'boolean') {
    return `真偽値: ${value ? 'はい' : 'いいえ'}`;
  }
  return '不明な型です';
}

console.log(formatValue("hello")); // "文字列: HELLO"
console.log(formatValue(123.456)); // "数値: 123.46"
console.log(formatValue(true)); // "真偽値: はい"

class Dog {
  name: string;
  constructor(name: string) {
    this.name = name;
  }

  bark(): string {
    return "ワンワン！";
  }
}

class Cat {
  name: string;
  constructor(name: string) {
    this.name = name;
  }

  meow(): string {
    return "ニャー！";
  }
}

function makeSound(animal: Dog | Cat): string {
  if (animal instanceof Dog) {
    // この分岐内では、animalはDog型として扱われる
    return `${animal.name}が${animal.bark()}`;
  } else {
    // この分岐内では、animalはCat型として扱われる
    return `${animal.name}が${animal.meow()}`;
  }
}

const myDog = new Dog("ポチ");
const myCat = new Cat("タマ");

console.log(makeSound(myDog)); // "ポチがワンワン！"
console.log(makeSound(myCat)); // "タマがニャー！"

function processData(data: string | Date): string {
  if (data instanceof Date) {
    return `日付: ${data.toLocaleDateString()}`;
  } else {
    return `文字列: ${data}`;
  }
}

console.log(processData("今日は良い天気")); // "文字列: 今日は良い天気"
console.log(processData(new Date())); // "日付: 2025/1/15" (現在の日付)

type Fish = {
  name: string;
  swim(): void;
}

type Bird = {
  name: string;
  fly(): void;
}

function moveAnimal(animal: Fish | Bird): void {
  if ('swim' in animal) {
    // この分岐内では、animalはFish型として扱われる
    console.log(`${animal.name}が泳いでいます`);
    animal.swim();
  } else {
    // この分岐内では、animalはBird型として扱われる
    console.log(`${animal.name}が飛んでいます`);
    animal.fly();
  }
}

const fish: Fish = {
  name: "金魚",
  swim() { console.log("スイスイ泳ぎます"); }
};

const bird: Bird = {
  name: "スズメ",
  fly() { console.log("パタパタ飛びます"); }
};

moveAnimal(fish); // "金魚が泳いでいます" "スイスイ泳ぎます"
moveAnimal(bird); // "スズメが飛んでいます" "パタパタ飛びます"

type User = {
  name: string;
  email?: string;
  phone?: string;
}

function getContactInfo(user: User): string {
  let contact = `名前: ${user.name}`;

  if ('email' in user && user.email) {
    contact += `、メール: ${user.email}`;
  }

  if ('phone' in user && user.phone) {
    contact += `、電話: ${user.phone}`;
  }

  return contact;
}

type Rectangle = {
  type: 'rectangle';
  width: number;
  height: number;
}

type Circle = {
  type: 'circle';
  radius: number;
}

type Shape = Rectangle | Circle;

// ユーザー定義型ガード関数
function isRectangle(shape: Shape): shape is Rectangle {
  return shape.type === 'rectangle';
}

function isCircle(shape: Shape): shape is Circle {
  return shape.type === 'circle';
}

function calculateArea(shape: Shape): number {
  if (isRectangle(shape)) {
    // この分岐内では、shapeはRectangle型として扱われる
    return shape.width * shape.height;
  } else if (isCircle(shape)) {
    // この分岐内では、shapeはCircle型として扱われる
    return Math.PI * shape.radius * shape.radius;
  }

  return 0;
}

const rect: Rectangle = { type: 'rectangle', width: 10, height: 5 };
const circle: Circle = { type: 'circle', radius: 3 };

console.log(calculateArea(rect)); // 50
console.log(calculateArea(circle)); // 約28.27

type AdminUser = {
  name: string;
  role: 'admin';
  permissions: string[];
}

type RegularUser = {
  name: string;
  role: 'user';
}

type User = AdminUser | RegularUser;

function isAdminUser(user: User): user is AdminUser {
  return user.role === 'admin' && 'permissions' in user;
}

function displayUserInfo(user: User): string {
  if (isAdminUser(user)) {
    return `管理者: ${user.name} (権限: ${user.permissions.join(', ')})`;
  } else {
    return `一般ユーザー: ${user.name}`;
  }
}

type LoadingState = {
  status: 'loading';
}

type SuccessState = {
  status: 'success';
  data: string[];
}

type ErrorState = {
  status: 'error';
  message: string;
}

type AppState = LoadingState | SuccessState | ErrorState;

function handleAppState(state: AppState): string {
  switch (state.status) {
    case 'loading':
      // この分岐内では、stateはLoadingState型
      return "データを読み込み中...";

    case 'success':
      // この分岐内では、stateはSuccessState型
      return `データを${state.data.length}件取得しました`;

    case 'error':
      // この分岐内では、stateはErrorState型
      return `エラーが発生しました: ${state.message}`;

    default:
      // TypeScriptが全ての場合を網羅していることを確認
      const _exhaustive: never = state;
      return _exhaustive;
  }
}

// 使用例
const loadingState: LoadingState = { status: 'loading' };
const successState: SuccessState = { status: 'success', data: ['item1', 'item2'] };
const errorState: ErrorState = { status: 'error', message: 'ネットワークエラー' };

console.log(handleAppState(loadingState)); // "データを読み込み中..."
console.log(handleAppState(successState)); // "データを2件取得しました"
console.log(handleAppState(errorState)); // "エラーが発生しました: ネットワークエラー"

function processDate(input: string | Date): string {
  const isDate = input instanceof Date;

  if (isDate) {
    // この分岐内では、inputはDate型として扱われる
    return `日付: ${input.getFullYear()}年${input.getMonth() + 1}月`;
  } else {
    // この分岐内では、inputはstring型として扱われる
    return `文字列: ${input}`;
  }
}

function validateInput(value: unknown): boolean {
  const isString = typeof value === 'string';
  const isNumber = typeof value === 'number';

  if (isString) {
    return value.length > 0; // valueはstring型として扱われる
  } else if (isNumber) {
    return value > 0; // valueはnumber型として扱われる
  }

  return false;
}