[TS] union | 타입 연산하기

 

 

💡 union 에 대해 알아보자.

 

function printSizes(product: Product) {
  const availableSizes = product.sizes.join(', ');
  console.log(`구매 가능한 사이즈는 다음과 같습니다: ${availableSizes}`);
}

 

파라미터로 받고 있는 Product 에 sizes 가 없어서 에러가 뜨고 있다.

 

 

ClothingProduct, ShoeProduct 중 하나만 받고 싶다면! ⬇️

function printSizes(product: ClothingProduct | ShoeProduct) {
  const availableSizes = product.sizes.join(', ');
  console.log(`구매 가능한 사이즈는 다음과 같습니다: ${availableSizes}`);
}

 

유니온 타입일 때는 두 프로덕트를 모두 고려하기 때문에

둘의 공통 프로퍼티만 참조할 수 있다.

 

 

만약 특정 타입에만 뭔갈 하고 싶다면 if in 을 활용한다.⬇️

function printSizes(product: ClothingProduct | ShoeProduct) {
  const availableSizes = product.sizes.join(', ');
  console.log(`구매 가능한 사이즈는 다음과 같습니다: ${availableSizes}`);

  if ('color' in product) {
    console.log(`색상: ${product.color}`);
  }

  if ('handmade' in product) {
    console.log(
      product.handmade
        ? '이 상품은 장인이 직접 만듭니다.'
        : '이 상품은 공장에서 만들어졌습니다.'
    );
  }

 

👀 union 은 리터럴 값과 같이 쓰면 유용!

type ShoeSize = 220 | 225 | 230 | 235 | 240;
// 타입별칭, 리터럴타입, 유니온타입

 

위에 enum 으로 정리한 사이즈도 타입 별칭의 문자열 리터럴, union 으로 쓸 수 있다.

type ClothingSize = 'S' | 'M' | 'L' | 'XL';

 

 

~ 활용 ~

interface Equipment {
  id: string;
  name: string;
  price: number;
}

interface Weapon extends Equipment {
  attack: number
}

interface Armor extends Equipment {
  defence: number
}

function printEquipment(equipment: Weapon | Armor) {
  console.log(`이름: ${equipment.name}`);

  if ('attack' in equipment) {
    console.log(`이 장비는 공격력을 ${equipment.attack} 증가 시킵니다.`);
  }

  if ('defence' in equipment) {
    console.log(`이 장비는 방어력을 ${equipment.defence} 증가 시킵니다.`);
  }
}

const item1: Weapon = {
  id: 'w001',
  name: '전쟁 도끼',
  price: 100,
  attack: 15,
};

const item2: Armor = {
  id: 'a001',
  name: '사슬 갑옷',
  price: 200,
  defence: 52,
};

printEquipment(item1);
printEquipment(item2);

// 이름: 전쟁 도끼
// 이 장비는 공격력을 15 증가 시킵니다.
// 이름: 사슬 갑옷
// 이 장비는 방어력을 52 증가 시킵니다.