Typescript 유니언(Union), 교차(Intersection) 타입

TypeScript는 정적 타입 언어로, 코드를 더 안전하고 유지보수하기 쉽게 만듭니다. 여기서는 유니언 타입과 교차 타입이라는 두 가지 강력한 타입 시스템 개념을 설명합니다. 이 개념은 TypeScript에서 복잡한 데이터 구조를 다룰 때 매우 유용합니다.

유니언 타입(Union Type)

유니언 타입은 변수나 함수의 인자가 두 개 이상의 타입 중 하나를 가질 수 있도록 정의하는 타입입니다. 마치 "A 또는 B"를 표현합니다.

기본 문법

| 기호를 사용하여 유니언 타입을 정의합니다.

type Fruit = 'apple' | 'banana' | 'orange';

let myFruit: Fruit;

myFruit = 'apple';  // 정상
myFruit = 'banana'; // 정상
myFruit = 'grape';  // 오류: 'grape'는 Fruit 타입에 포함되지 않음

유니언 타입의 활용

함수에서 유니언 타입 사용하기

function printId(id: number | string): void {
  console.log(`ID: ${id}`);
}

printId(101);          // 정상
printId('user_12345'); // 정상

여기서 id는 숫자이거나 문자열일 수 있습니다.

타입 좁히기

유니언 타입을 사용할 때 TypeScript는 값이 어떤 타입인지 알 수 없기 때문에 타입 좁히기(Narrowing)가 필요합니다.

function printDetails(detail: number | string) {
  if (typeof detail === 'number') {
    console.log(`숫자 ID: ${detail}`);
  } else {
    console.log(`문자열 ID: ${detail}`);
  }
}

typeof 연산자를 사용하여 값의 타입을 좁힐 수 있습니다.

---

교차 타입(Intersection Type)

교차 타입은 여러 타입을 결합하여 모든 속성을 포함하는 타입을 생성합니다. 이는 "A 그리고 B"를 표현합니다.

기본 문법

& 기호를 사용하여 교차 타입을 정의합니다.

interface User {
  name: string;
  age: number;
}

interface Admin {
  role: string;
}

type AdminUser = User & Admin;

const admin: AdminUser = {
  name: 'Kim',
  age: 30,
  role: 'Manager',
};

AdminUser는 User와 Admin의 속성을 모두 포함해야 합니다.

교차 타입의 활용

다중 속성을 가진 객체 정의하기

interface Pet {
  name: string;
  species: string;
}

interface Owner {
  ownerName: string;
  contactNumber: string;
}

type PetOwner = Pet & Owner;

const petOwner: PetOwner = {
  name: 'Buddy',
  species: 'Dog',
  ownerName: 'John Doe',
  contactNumber: '010-1234-5678',
};

PetOwner 타입은 반려동물 정보와 소유자 정보를 함께 표현할 수 있습니다.

---

유니언 타입과 교차 타입의 차이점

• 유니언 타입은 두 타입 중 하나를 선택하는 논리입니다. 예를 들어, A | B는 A 또는 B 중 하나를 가질 수 있습니다.
• 교차 타입은 두 타입을 병합하는 논리입니다. 예를 들어, A & B는 A와 B의 모든 속성을 포함해야 합니다.

비교 예제

type Car = { make: string; model: string };
type Bike = { brand: string; type: string };

// 유니언 타입
type Vehicle = Car | Bike;

const vehicle1: Vehicle = { make: 'Hyundai', model: 'Sonata' }; // Car
const vehicle2: Vehicle = { brand: 'Trek', type: 'Mountain' };  // Bike

// 교차 타입
type AllVehicle = Car & Bike;

// Car와 Bike의 속성을 모두 포함해야 함
const vehicle3: AllVehicle = {
  make: 'Hyundai',
  model: 'Sonata',
  brand: 'Trek',
  type: 'Mountain',
};

---

실전 예제: 유니언과 교차 타입 혼합

유니언 타입과 교차 타입을 함께 사용할 수 있습니다. 예를 들어, 사용자가 관리자 또는 일반 사용자일 수 있지만 관리자일 경우 추가 속성을 포함하도록 요구하는 경우:

type RegularUser = {
  username: string;
  email: string;
};

type Admin = RegularUser & {
  isAdmin: true;
  permissions: string[];
};

type User = RegularUser | Admin;

const adminUser: User = {
  username: 'admin123',
  email: 'admin@example.com',
  isAdmin: true,
  permissions: ['read', 'write', 'delete'],
};

const regularUser: User = {
  username: 'user123',
  email: 'user@example.com',
};

---

정리

1. 유니언 타입은 값이 여러 타입 중 하나를 가질 수 있도록 허용합니다. (선택적 타입)
2. 교차 타입은 여러 타입의 속성을 모두 포함해야 합니다. (병합된 타입)
3. 유니언 타입은 타입 좁히기 기술과 함께 사용되며, 교차 타입은 복잡한 데이터 구조를 정의하는 데 유용합니다.
4. 유니언과 교차 타입을 조합하여 더욱 강력한 타입 시스템을 구현할 수 있습니다.

TypeScript의 유니언과 교차 타입을 적절히 사용하면 코드의 가독성과 안전성을 크게 향상시킬 수 있습니다.