TS 교차타입

특징

• 교집합의 개념과 비슷

  // Filter는 DeliveryTip의 tip 속성과 StarRating의 rate 속성을 모두 만족하는 값이 된다
  
  /* 배달 팁 */
  interface DeliveryTip {
    tip: **string**;
  }
  
  /* 별점 */
  interface StarRating {
    rate: **number**;
  }
  
  /* 주문 필터 */
  type Filter = DeliveryTip & StarRating;
  
  const filter: Filter = {
    tip: "1000원 이하",
    rate: 4,
  };

• ❗주의
  • 교차 타입으로 사용 불가한 경우
    1. string & number
    2. string & boolean
    3. number & boolean
  • 교차 타입으로 사용 가능한 경우
    • number & number

extends와 교차 타입

• extends 키워드로 교차 타입을 작성할 수 있다

  interface BaseMenuItem {
    itemName: string | null;
    itemImageUrl: string | null;
    itemDiscountAmount: number;
    stock: number | null;
  }
  
  // BaseCartItem은 BaseMenuItem의 속성을 모두 포함
  interface BaseCartItem extends BaseMenuItem {
    quantity: number;
  }

• ❗주의

  • extends 키워드를 사용한 타입이 교차 타입과 100% 상응하지 않는다

    #1
    // 위에서 언급한 교차 타입으로 사용이 불가한 경우에 해당
    // DeliveryTip의 tip은 number, Filter의 tip은 string
    // 교차 타입으로 선언 X
    interface DeliveryTip {
      tip: **number**;
    }
    
    interface Filter extends DeliveryTip {
      tip: **string**;
    }
    
    // 오류: 'Filter' 인터페이스는 'DeliveryTip'을 잘못 확장하고 있습니다.
    // 'tip' 속성의 타입이 호환되지 않으며, 'string' 타입은 'number' 타입에 할당될 수 없습니다.
    
    #2
    // #1을 extends -> &으로 변환
    // #1처럼 에러가 나지 않고 Filter의 tip은 never가 된다
    type DeliveryTip = {
    	tip: number;
    }
    
    // 이유는 type 키워드는 교차 타입으로 선언된 새로운 속성에 대해 미리 알 수 없기 때문에 선언 시 에러가 발생하지 않음
    // 하지만 서로 호환되지 않는 타입이 선언되었기에 결국 never 타입이 되는 것
    type Filter = DeliveryTip & {
    	tip: string;
    }

• 유니온 타입, 교차 타입을 사용한 새로운 타입은 오직 type 키워드로만 선언 가능

  type BaseMenuItem = {
    itemName: string | null;
    itemImageUrl: string | null;
    itemDiscountAmount: number;
    stock: number | null;
  };
  
  type BaseCartItem = {
    quantity: number;
  } & BaseMenuItem;
  
  const baseCartItem: BaseCartItem = {
    itemName: "지은이네 떡볶이",
    itemImageUrl: 'https://www.woowahan.com/images/jjeun-tteokbokkio.png',
    itemDiscountAmount: 2000,
    stock: 100,
    quantity: 2,
  };