[Typescript] Union 타입

타입스크립트의 Union 타입은 단순한 기술을 넘어 타입 시스템의 유연성과 안정성을 동시에 잡는 핵심 기능이다.

1. Union 타입이란? 🌈

여러 타입을 하나로 묶는 기술

let id: string | number = "USER_001"; 
id = 12345; // ✅ 가능

• | 연산자로 여러 타입을 조합한 새로운 타입 생성
• 동적 입력이 필요한 상황에서 any 대신 안전하게 사용

기본 문법

type Status = "loading" | "success" | "error"; // 리터럴 타입 조합
type ID = string | number; // 기본 타입 조합
type Mixed = string | number | boolean | null; // 4가지 타입 동시 허용

2. 왜 Union 타입을 써야 할까? 🚀

1. any 타입의 위험성 제거

// ❌ 위험한 any 사용
function printAny(value: any) {
  console.log(value.toUpperCase()); // 런타임 에러 가능성
}

// ✅ 안전한 Union 타입
function printUnion(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase()); // 안전한 사용
  } else {
    console.log(value.toFixed(2)); // 숫자 처리
  }
}

2. API 응답 처리 패턴

type ApiResponse<T> = {
  status: "success" | "error";
  data: T | null;
  error: string | null;
};

function handleResponse(response: ApiResponse<User>) {
  if (response.status === "success") {
    console.log(response.data); // User 타입 보장
  } else {
    console.error(response.error); // 에러 메시지 보장
  }
}

3. Union 타입의 진짜 힘을 끌어내는 법 💪

1. 타입 가드(Type Guard)

function format(input: string | number): string {
  // 타입 narrowing
  if (typeof input === "number") {
    return `$${input.toFixed(2)}`;
  }
  return input.trim().toUpperCase();
}

2. 식별 가능한 Union 타입 (Discriminated Union)

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; size: number }
  | { kind: "rectangle"; width: number; height: number };

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.size ** 2;
    case "rectangle":
      return shape.width * shape.height;
  }
}

3. 타입 추론 최적화

type Primitive = string | number | boolean;

function isString(value: Primitive): value is string {
  return typeof value === "string";
}

const values: Primitive[] = ["hello", 42, true];

values.forEach(value => {
  if (isString(value)) {
    console.log(value.toUpperCase()); // string으로 추론
  } else {
    console.log(value); // number | boolean
  }
});

4. 주의해야 할 함정 🚨

1. 공통 속성 접근

interface Car {
  wheels: 4;
  drive(): void;
}

interface Bike {
  wheels: 2;
  pedal(): void;
}

function useVehicle(vehicle: Car | Bike) {
  console.log(vehicle.wheels); // ✅ 공통 속성만 접근 가능
  vehicle.drive(); // ❌ Car 타입일 때만 존재
}

2. 배열 Union 타입

// 주의: (string | number)[]
const mixedArray = [1, "two", 3]; 

// 의도: string[] | number[]
const strictArray: string[] | number[] = [1, 2, 3]; 
strictArray.push("four"); // ❌ string[]일 때만 가능

5. Union vs Intersection: 쌍둥이 비교표 🔍

| 특징 | Union(|) | Intersection(&) |

|---------------------|--------------------------|----------------------------|

| 의미 | OR 조건 | AND 조건 |

| 사용 예시 | string | number | User & Admin |

| 타입 범위 | 더 넓은 범위 | 더 좁은 범위 |

| 주 사용처 | 다중 타입 허용 | 타입 확장/결합 |

| 함수 파라미터 | 모든 타입의 공통 동작 | 모든 타입의 속성 포함 필수|

6. 실전 Best Practices 🏆

1. 2~3개 타입 조합이 적당

// ✅ Good
type Size = "S" | "M" | "L";

// ❌ Bad (과도한 복잡성)
type Overkill = string | number | boolean | null | undefined | object;

2. 타입 별칭과 조합

type User = { name: string; age: number };
type Admin = { name: string; privileges: string[] };

type CombinedUser = User | Admin;

3. 유틸리티 타입 활용

type NonNullable<T> = T extends null | undefined ? never : T;
type StringOrNumber = Exclude<Primitive, boolean>; // string | number

📌 Union 타입 핵심 요약