Skip to content

인터섹션 타입 (Intersection Types)

TypeScript에서 인터섹션 타입은 여러 타입을 모두 만족하는 하나의 타입을 표현한다.
집합 이론에서의 교집합 (A ∩ B) 개념과 동일하며, & 기호를 사용한다.


1. 기본 사용법

인터섹션 타입은 & 기호를 사용하여 여러 타입을 합친다. 즉, 모든 타입의 속성을 동시에 가져야 한다.

ts
type Name = { name: string };
type Age = { age: number };

// 인터섹션
type Person = Name & Age;

let user: Person = {
  name: "Hyebin",
  age: 20,
};
  • Name과 Age를 합친 Person은 name과 age속성을 모두 가져야 한다.

2. 여러 개의 타입 결합

인터섹션 타입은 2개 이상도 가능하다.

ts
type Contact = { email: string };

type Employee = Name & Age & Contact;

let worker: Employee = {
  name: "Binny",
  age: 30,
  email: "binny@email.com",
};
  • Employee는 name, age, email을 전부 포함해야 한다.

3. 유니언과 차이점 비교

유니언 | : 여러 타입 중 하나만 만족하면 된다.
인터섹션 &: 여러 타입을 전부 만족해야 한다.

ts
type Cat = { meow: () => void };
type Dog = { bark: () => void };

// 유니언
let pet1: Cat | Dog;
pet1 = { meow: () => console.log("야옹") };
pet1 = { bark: () => console.log("멍멍") };

// 인터섹션
let pet2: Cat & Dog;
pet2 = {
  meow: () => console.log("야옹"),
  bark: () => console.log("멍멍"),
};
  • pet1은 고양이이거나 강아지 둘 중 하나면 된다.
  • pet2는 고양이면서 동시에 강아지여야 한다.

4. 실전 예시: API 응답 타입

API에서 공통 응답 속성에 추가 속성을 합칠 때 인터섹션 타입이 자주 쓰인다.

ts
type ApiResponse = { status: number; message: string };
type UserData = { id: string; name: string };

type UserResponse = ApiResponse & { data: UserData };

const response: UserResponse = {
  status: 200,
  message: "OK",
  data: { id: "1", name: "Hyebin" },
};
  • UserResponse는 status, message, data 속성을 모두 가져야 한다.
  • & 덕분에 API 응답 타입을 깔끔하게 조합할 수 있다.