인터섹션 타입 (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 응답 타입을 깔끔하게 조합할 수 있다.