본문 바로가기
카테고리 없음

TypeScript 24강: 유니온 타입과 교차 타입(Union & Intersection Types) 이해하기

by mystory55776 2025. 5. 24.

유니온 타입(Union Type)이란?

TypeScript 유니온 타입은 하나의 변수나 매개변수가 여러 타입 중 하나를 가질 수 있도록 정의하는 기능입니다. | 기호를 사용해 여러 타입을 조합할 수 있으며, 동적으로 타입을 구분해 처리할 수 있습니다.

let value: string | number;

value = "hello"; // OK
value = 42;      // OK
value = true;    // Error: 'boolean'은 허용되지 않음

유니온 타입은 특히 함수에서 다양한 입력을 처리할 때 유용합니다.

function printId(id: number | string) {
  console.log("ID:", id);
}

printId(101);         // OK
printId("abc-123");   // OK

타입 가드(Type Guard)를 이용한 유니온 타입 처리

유니온 타입을 사용할 경우, 타입에 따라 다르게 동작하게 하려면 타입 가드를 사용해야 합니다. 가장 일반적인 방식은 typeof를 활용한 조건문입니다.

function formatInput(input: string | number): string {
  if (typeof input === "string") {
    return input.trim();
  } else {
    return input.toFixed(2);
  }
}

이처럼 typeof를 사용하면 런타임에 타입을 안전하게 판별하여 올바른 처리를 할 수 있습니다.

교차 타입(Intersection Type)이란?

TypeScript 교차 타입은 여러 타입을 결합하여 하나의 타입으로 만드는 기능입니다. & 연산자를 사용하며, 해당 타입은 포함된 모든 타입의 속성을 모두 가져야 합니다.

type Person = { name: string };
type Employee = { company: string };

type WorkingPerson = Person & Employee;

const dev: WorkingPerson = {
  name: "철수",
  company: "OpenAI"
};

WorkingPerson은 Person과 Employee의 모든 속성을 포함해야 하며, 둘 중 하나라도 누락되면 컴파일 에러가 발생합니다.

유니온 타입 vs 교차 타입의 차이점

구분 유니온 타입 (Union) 교차 타입 (Intersection)
기호 | &
역할 둘 중 하나의 타입을 허용 모든 타입의 특성을 병합
실행 예 string | number Person & Employee
사용 목적 다양한 입력 허용 복합 객체 모델링

유니온 타입과 인터페이스 조합

유니온 타입은 인터페이스와도 함께 사용할 수 있습니다. 이를 통해 다양한 형태의 객체를 하나의 매개변수로 처리할 수 있습니다.

interface Dog {
  type: "dog";
  bark: () => void;
}

interface Cat {
  type: "cat";
  meow: () => void;
}

type Pet = Dog | Cat;

function handlePet(pet: Pet) {
  if (pet.type === "dog") {
    pet.bark();
  } else {
    pet.meow();
  }
}

이 방식은 리터럴 타입을 활용한 타입 구분(discriminated union)으로, 코드 가독성과 안정성을 높여줍니다.

고급 예제: 유니온 + 교차 타입 함께 사용

유니온 타입과 교차 타입은 단독으로도 강력하지만, 함께 사용할 경우 복잡한 구조를 효과적으로 모델링할 수 있습니다.

type Admin = { role: "admin"; accessLevel: number };
type Guest = { role: "guest"; expiresIn: number };
type User = { name: string };

type FullAdmin = User & Admin;
type AnyUser = User & (Admin | Guest);

const superAdmin: FullAdmin = {
  name: "관리자",
  role: "admin",
  accessLevel: 10
};

const visitingUser: AnyUser = {
  name: "방문자",
  role: "guest",
  expiresIn: 3600
};

AnyUser는 공통 타입 User에 Admin 또는 Guest 중 하나가 결합된 구조로, 현실적인 사용자 모델에 적합한 방식입니다.

유니온과 교차 타입 사용 시 주의점

  • 유니온 타입에서는 공통 속성만 접근 가능하므로, 타입 가드를 활용해야 함
  • 교차 타입은 모든 타입의 속성을 요구하므로, 속성이 중복되면 충돌 가능성 있음
  • 실제 객체 설계에서는 너무 많은 타입 조합은 복잡성을 유발할 수 있음

결론: 타입 조합의 유연성과 안전성 모두 잡기

TypeScript의 유니온 타입(|)과 교차 타입(&)은 복잡한 타입 관계를 표현하고, 다양한 상황에서 안전하게 타입을 다룰 수 있는 핵심 기능입니다. 상황에 따라 적절한 타입 조합을 선택하고, 타입 가드나 리터럴 구분자 등을 함께 사용하면 보다 견고하고 읽기 쉬운 코드를 작성할 수 있습니다.

실제 프로젝트에서는 API 응답, 사용자 권한 모델, 상태 관리 등에서 유니온과 교차 타입이 자주 활용되므로, 이 두 가지를 자유자재로 활용하는 능력은 TypeScript 마스터의 핵심이라 할 수 있습니다.

티스토리툴바