코드의 결과가 무엇인지, 결과의 이유가 무엇인지 설명해주세요.

[limejin]

📚 98p - 100p 📌 코드의 결과가 무엇인지, 결과의 이유가 무엇인지 설명해주세요. (만약 에러라면 어떻게 해결할 수 있는지도 적어주세요.)

type ProductItem = {
  id: number;
  name: string;
  type: string;
  price: number;
  imageUrl: string;
  quantity: number;
};

type CardItem = {
  id: number;
  name: string;
  type: string;
  imageUrl: string;
};

type PromotionEventItem = ProductItem | CardItem;

const printPromotionItem = (item: PromotionEventItem) => {
  console.log(item.quantity); // -> 해당 라인의 코드 결과가 무엇인지, 결과의 이유가 무엇인지 설명해주세요.
};

[hotdog1004]

결과

해당 코드에서 컴파일 에러가 발생하게 된다.

이유

PromotionEventItem 타입은 ProductItem 또는 CardItem 중 하나로 정의되어있는데 quantity라는 속성은 ProductItem 타입에만 정의되어있기 때문이다.

해결방법

타입 가드를 사용해서 item이 ProductItem 타입인지 확인 후 접근하면 된다.

const printPromotionItem = (item: PromotionEventItem) => {
    if('quantity' in item) console.log(item.quantity);
};

[kwonhygge]

속성 quantity가 해당 타입에 존재하지 않는다는 타입스크립트 에러가 발생할 것입니다. 위에서 답변해주신 것처럼 타입가드를 사용하여 quantity에 접근할 수 있습니다.

[devsomda]

PromotionEventItem = ProductItem | CardItem; 처럼 유니온 타입을 사용한 경우 두가지 타입이 모두 가지고 있는 id: number; name: string; type: string; imageUrl: string; 타입에만 접근할 수 있습니다. quantity는 ProductItem만 가지고 있는 속성이기 때문에 컴파일 에러가 발생합니다. 해결하기 위해서는 타입 가드(4장)를 사용할 수 있습니다

[limejin]

참조할 수 없기 때문에 컴파일 에러가 발생한다. 이를 타입 좁히기를 통해 해결이 가능하다. item이 ProductItem인지 확인한 후에 quantity 속성에 접근하도록 한다. in 연산자를 사용해 item에 quantity 속성이 있는지 확인할 수 있다:

[samseburn]

속성 quantity가 ProductItem과 CardItem이 공통으로 가지고 있는 속성이 아니기 때문에 컴파일 에러가 발생합니다. in 연산자를 이용한 타입 가드를 통해 해결할 수 있습니다.

const printPromotionItem = (item: PromotionEventItem) => {
  if ('quantity' in item) {
    console.log(item.quantity)
  }
}