[TS] intersection & 타입 합치기

 

 

💡 intersection 에 대해 알아보자.

 

interface Product {
  id: string; // 세 타입 모두 공통
  name: string;
  price: number;
  membersOnly?: boolean;
}

interface User {
  id: string; // 세 타입 모두 공통
  userName: string;
  email: string;
  createdAt: Date; // 두 타입에서 공통
  updateAt: Date; // 두 타입에서 공통
}

interface Review {
  id: string; // 세 타입 모두 공통
  productId: string;
  userId: string;
  content: string;
  createdAt: Date; // 두 타입에서 공통
  updateAt: Date; // 두 타입에서 공통
}

 

여기서 공통되는 프로퍼티들을 합쳐보자!

 

// interface 를 만들어주고
interface Id {
  id: string;
}

interface Timestamp {
  createdAt: Date;
  updateAt: Date;
}

// 기존에 있던 타입들은 타입 별칭을 써서 id &(ampersand) 식으로 작성
type Product = Id & {
  name: string;
  price: number;
  membersOnly?: boolean;
};

type User = Id & Timestamp & {
  userName: string;
  email: string;
};

type Review = Id & Timestamp & {
  productId: string;
  userId: string;
  content: string;
};

 

유니온과 마찬가지로 여러번 쓸 수 있다.

 

이 경우도 타입별칭 & intersection 대신 interface 상속으로 구현이 가능하다.

interface Entity {
  id: string;
}

interface TimestampEntity extends Entity {
  createdAt: Date;
  updateAt: Date;
}

interface Product extends Entity {
  name: string;
  price: number;
  membersOnly?: boolean;
}

interface User extends TimestampEntity {
  userName: string;
  email: string;
}

interface Review extends TimestampEntity {
  productId: string;
  userId: string;
  content: string;
}

 

조합하며 쓰기엔 intersection 이 더 나은 것 같은..? 😲

✚ 상속을 한번만 받는 경우라면 interface 상속을 쓰자.

 

 

~ 활용 ~

수정 전

// printEquipment() 함수의 타입과 item1 변수의 타입을 Weapon 타입과 Armor 타입을 합친 타입으로 수정해보자.
interface Equipment {
  id: string;
  name: string;
  price: number;
}

interface Weapon extends Equipment {
  attack: number
}

interface Armor extends Equipment {
  defence: number
}

function printEquipment(equipment: Equipment) {
  console.log(`이름: ${equipment.name}`);
  console.log(`이 장비는 공격력을 ${equipment.attack}, 방어력을 ${equipment.defence} 증가 시킵니다.`);
}

const item1: Equipment = {
  id: 'g001',
  name: '서리불꽃 글러브',
  price: 100,
  attack: 5,
  defence: 42,
};


printEquipment(item1);

 

수정 후

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}`);
  console.log(`이 장비는 공격력을 ${equipment.attack}, 방어력을 ${equipment.defence} 증가 시킵니다.`);
}

const item1: Weapon & Armor = {
  id: 'g001',
  name: '서리불꽃 글러브',
  price: 100,
  attack: 5,
  defence: 42,
};

printEquipment(item1);

// 이름: 서리불꽃 글러브
// 이 장비는 공격력을 5, 방어력을 42 증가 시킵니다.

 

아래는 정답이 아니지만 .. 실행됐다.

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

interface Weapon {
  attack: number
}

type Armor = Equipment & Weapon & {
  defence: number
}

function printEquipment(equipment: Armor) {
  console.log(`이름: ${equipment.name}`);
  console.log(`이 장비는 공격력을 ${equipment.attack}, 방어력을 ${equipment.defence} 증가 시킵니다.`);
}

const item1: Armor = {
  id: 'g001',
  name: '서리불꽃 글러브',
  price: 100,
  attack: 5,
  defence: 42,
};


printEquipment(item1);