타입확장의 장점

타입확장의 가장 큰 장점은 코드 중복을 줄일 수 있다. 중복되는 타입을 반복적으로 선언하는 것보다 기존에 작성한 타입을 바탕으로 타입 확장을 함으로써 불필요한 코드 중복을 줄일 수 있다.

 

배달의민족 앱은 장바구니 기능을 제공한다. 장바구니에 들어갈 요소는 메뉴 요소 타입에서 확장된 타입으로 이루어진다.

**
* 메뉴 요소 타입
* 메뉴 이름, 이미지, 할인율, 재고 정보를 담고 있다
* */
interface BaseMenuItem {
  itemName: string | null;
  itemImageUrl: string | null;
  itemDiscountAmount: number;
  stock: number | null;
}

/**
 * 장바구니 요소 타입
 * 메뉴 타입에 수량 정보가 추가되었다
 */
interface BaseCartItem extends BaseMenuItem {
  quantity: number;
}

 

이 예시에서 메뉴 타입을 기준으로 타입을 확장하여 장바구니 요소 타입을 정의한 것을 볼 수 있다. 즉 장바구니 요소는 메뉴 요소가 가지는 모든 타입이 필요하다. 하지만 BaseMenuItem에 있는 속성을 중복해서 작성하지 않고 확장 ( extends BaseMenuItem )을 활용하여 타입을 정의했다. 타입 확장은 중복된 코드를 줄일 수 있게 해준다. 뿐만 아니라 BaseCartItem이 BaseMenuItem에서 확장되었다는 것을 쉽게 확인할 수 있는 것처럼 더 명시적인 코드를 작성할 수 있게 해준다. interface 키워드 대신 type을 쓴다면 아래와 같이 코드를 작성하면 된다.

 

type BaseMenuItem = {
  itemName: string | null;
  itemImageUrl: string | null;
  itemDiscountAmount: number;
  stock: number | null;
}

type BaseCartItem = {
  quantity: number;
} & BaseMenuItem

 

타입 확장은 중복 제거, 명시적인 코드 작성 외에도 확장성이란 장점을 가지고 있다. 앞에서 정의한 BaseCartItem을 활용하면 요구 사항이 늘어날 때마다 새로운 CartItem 타입을 확장하여 정의할 수 있다.

 

/**
 * 수정할 수 있는 장바구니 요소 타입
 * 품절 여부, 수정할 수 있는 옵션 배열 정보가 추가되었다
 */
interface EditableCartItem extends BaseCartItem {
  isSoldOut: boolean;
  optionGroups: SelectableOptionGroup[]
}

/**
 * 이벤트 장바구니 요소 타입
 * 주문 가능 여부에 대한 정보가 추가되었다
 */
interface EventCartItem extends BaseCartItem {
  orderable: boolean;
}

 

BaseCartItem을 확장하여 만든 EditableCartItem, EventCartItem 타입을 볼 수 있다. 이렇게 타입 확장을 활용하면 장바구니와 관련된 요구 사항이 생길 때마다 필요한 타입을 손쉽게 만들 수 있다. 기존 장바구니 요소에 대한 요구 사항이 변경되어도 BaseCartItem 타입만 수정하고 EditableCartItem이나 EventCartItem 타입은 수정하지 않아도 되기 때문에 효율적이다.

 

 

출처 -  우아한 타입스크립트 with 리액트