TypeScript에서 & 연산자의 의미와 활용: DeliveryData 예제를 중심으로

안녕하세요, 개발자 여러분! 이번에는 TypeScript에서 자주 사용되는 & 연산자(Intersection Operator)에 대해 깊이 파헤쳐 보겠습니다. 질문에서 제공된 코드 export type DeliveryData = DeliveryInfo & { details: DeliveryDetail[]; };를 기반으로, &의 역할과 관련 정보를 블로그 글 형식으로 자세히 설명하겠습니다.

2025.03.29 - [Vue.js 를 배워보자] - Vue 컴포넌트와 TypeScript를 활용한 배송 정보 관리: 실무 예제

 

---

1. & 연산자란?

TypeScript에서 &는 **Intersection Operator(교차 연산자)**라고 불리며, 두 개 이상의 타입을 결합하여 하나의 새로운 타입을 만드는 데 사용됩니다. 이 연산자는 "모두 포함"의 의미를 가지며, 결과 타입은 각 타입의 모든 속성을 갖게 됩니다.

예를 들어, A 타입과 B 타입이 있다고 가정할 때:

type A = { name: string };
type B = { age: number };
type C = A & B;

C 타입은 { name: string; age: number }가 됩니다. 즉, A와 B의 속성을 모두 가진 타입이 생성됩니다.

---

2. DeliveryData에서의 & 사용 분석

질문에 나온 코드를 다시 보겠습니다:

export interface DeliveryInfo {
  id: number;
  recipient: string;
  address: string;
  status: 'pending' | 'shipped' | 'delivered' | 'canceled';
  createdAt: string;
}

export interface DeliveryDetail {
  orderId: string;
  itemName: string;
  quantity: number;
  price: number;
  status: string;
}

export type DeliveryData = DeliveryInfo & {
  details: DeliveryDetail[];
};

여기서 DeliveryData는:

• DeliveryInfo 인터페이스의 모든 속성(id, recipient, address, status, createdAt)과
• 추가로 정의된 { details: DeliveryDetail[] } 속성을 결합한 타입입니다.

결과적으로 DeliveryData의 구조는 다음과 같습니다:

{
  id: number;
  recipient: string;
  address: string;
  status: 'pending' | 'shipped' | 'delivered' | 'canceled';
  createdAt: string;
  details: DeliveryDetail[];
}

• 의미: DeliveryData는 DeliveryInfo의 기본 배송 정보를 상속받으면서, details라는 세부 항목 배열을 추가로 포함합니다. & 덕분에 두 타입을 자연스럽게 합칠 수 있었습니다.

---

3. &와 유사한 개념과의 비교

&를 이해하려면 비슷한 역할을 하는 다른 TypeScript 기능과 비교해보면 도움이 됩니다.

• | (Union Operator):
  • |는 "또는"을 의미하며, 두 타입 중 하나만 만족하면 됩니다.
  • 예: type Status = 'pending' | 'shipped'; → 값은 pending이거나 shipped 중 하나.
  • 반면 &는 "그리고"를 의미하므로 모든 조건을 만족해야 합니다.
• extends (인터페이스 확장):
  • 인터페이스에서 비슷한 기능을 구현하려면 extends를 사용할 수 있습니다:

    interface DeliveryData extends DeliveryInfo {
      details: DeliveryDetail[];
    }

  • &와의 차이점은 extends가 인터페이스에만 적용되고, &는 타입과 인터페이스 모두에 사용할 수 있다는 점입니다.

---

4. 실무에서의 & 활용 사례

&는 실무에서 유연하고 재사용 가능한 타입을 설계할 때 자주 사용됩니다. 몇 가지 예를 들어보겠습니다.

1. 기존 타입에 속성 추가:

   interface User {
     id: number;
     name: string;
   }
   
   type UserWithRole = User & { role: 'admin' | 'user' };

   • User에 role 속성을 추가한 새로운 타입을 생성.
2. 여러 인터페이스 결합:
    

   interface Person {
     name: string;
   }
   interface Employee {
     employeeId: string;
   }
   type Staff = Person & Employee & { department: string };

   • Staff는 name, employeeId, department를 모두 포함.
3. API 응답 타입 확장:
    

   interface ApiResponse {
     status: number;
     message: string;
   }
   type DeliveryResponse = ApiResponse & { data: DeliveryData };

   • API 응답의 기본 구조에 DeliveryData를 추가.

---

5. 주의할 점

&는 강력하지만, 부주의하게 사용하면 문제가 생길 수 있습니다.

• 속성 충돌:
  • 같은 이름의 속성이 서로 다른 타입을 가지면 오류가 발생합니다.
  • 예:

    type A = { id: string };
    type B = { id: number };
    type C = A & B; // 오류: 'id'가 string과 number로 동시에 정의될 수 없음

  • 해결법: 타입이 일치하도록 조정하거나, 충돌을 허용하지 않도록 설계.
• 복잡성 증가:
  • 너무 많은 타입을 &로 결합하면 코드 가독성이 떨어질 수 있으니 적절히 분리하세요.

---

6. 결론

TypeScript의 & 연산자는 타입을 조합해 더 풍부하고 유연한 타입을 만드는 데 유용합니다. DeliveryData = DeliveryInfo & { details: DeliveryDetail[] } 예제에서 보듯, 기존 타입(DeliveryInfo)에 새로운 속성(details)을 추가해 실무에서 자주 필요한 데이터 구조를 손쉽게 정의할 수 있었습니다. 이 연산자를 잘 활용하면 코드 재사용성과 타입 안정성을 동시에 높일 수 있으니, 프로젝트에서 적극적으로 사용해보세요!