알아두면 좋은 제네릭 타입들

타입스크립트에서 기본적으로 제공하는 제네릭 타입 중에서 알아두면 유용한 것들을 소개해 드릴게요.

 

JavaScript 기능들

querySelector() 함수

기본적으로 어떤 DOM 노드가 리턴될지 모르기 때문에 HTMLElement라는 일반적인 타입으로 정의됩니다. 하지만 타입을 확신할 수 있는 경우에는 아래 코드처럼 직접 제네릭 타입을 정의해 주면 됩니다.

const elem = document.querySelector<HTMLInputElement>('input.username');

 

Map

키와 밸류를 갖는 자료구조입니다. 타입 파라미터로 키와 밸류의 타입을 정의하고 사용할 수 있습니다.

const productMap = new Map<string, Product>();
productMap.set(product1.id, product1);
productMap.set(product2.id, product2);

Set

배열과 비슷하지만 중복된 요소를 추가할 수 없는, 수학에서 집합에 해당하는 자료구조입니다. 타입 파라미터로 요소의 타입을 정의하고 사용할 수 있습니다.

const productSet = new Set<Product>();
productSet.add(product1);
productSet.add(product2);

 

유용한 타입들

키와 밸류 정하기: Record

객체에 키와 밸류 타입을 정해놓고 싶을 때 사용합니다. Map과 비슷하지만 차이점은 순수한 객체에 타입만 추가한다는 점입니다.

const productMap: Record<string, Product> = {}
productMap['c001'] = product1;
productMap['c002'] = product2;

객체 프로퍼티 고르기: Pick

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

type ProductInfo = Pick<Product, 'name' | 'price'>;

Pick으로 만든 타입은 아래와 같습니다. name 프로퍼티와 price 프로퍼티만 골라서 타입을 만들었습니다.

type ProductInfo = {
    name: string;
    price: number;
}

 

객체의 프로퍼티 생략하기: Omit

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

type ProductInfo = Omit<Product, 'id' | 'membersOnly'>;

Omit으로 만든 타입은 아래와 같습니다. id와 membersOnly를 제외하고 타입을 만들었습니다.

type ProductInfo = {
    name: string;
    price: number;
}

 

Union 제거하기: Exclude

Union을 사용해서 PromotionCoupon 또는 EmployeeCoupon 또는 WelcomCoupon 또는 RewardCoupon인 타입을 Coupon이라고 했습니다. 여기서 EmployCoupon에 해당하는 것만 제거를 하고 싶을 때 Exclude를 사용할 수 있습니다.

type Coupon = 
  | PromotionCoupon
  | EmployeeCoupon
  | WelcomCoupon
  | RewardCoupon
  ;

type InternalCoupon = EmployeeCoupon;
type PublicCoupon = Exclude<Coupon, InternalCoupon>;
// type PublicCoupon = PromotionCoupon | WelcomCoupon | RewardCoupon

 

함수 파라미터 타입 가져오기: Parameters

함수 파라미터들의 타입을 함수의 타입을 통해 정의할 수 있습니다. 만약 함수의 타입이 아니라, 선언된 함수라면 typeof 연산자로 함수의 타입으로 만들어서 사용하면 됩니다.

function addToCart(id: string, quantity: number = 1): boolean {
  // ...
  return true;
}

type AddToCartParameters = Parameters<typeof addToCart>;
// type AddToCartParameters = [id: string, quantity: number | undefined]

함수 리턴 타입 가져오기: ReturnType

Parameters와 마찬가지로 함수의 리턴 타입을 가져옵니다.

function addToCart(id: string, quantity: number = 1): boolean {
  // ...
  return true;
}

type AddToCartResult = ReturnType<typeof addToCart>;
// type AddToCartResult = boolean