제네릭

특정한 타입으로 고정시켜놓는 것이 아니라 <>로 임의의 타입을 정의해놓고 그때그때 다른 타입을 쓸 수 있도록 하는 문법

function printArrat<T> (items: T[]) {
  for (const item of items) {
    console.log(item);
  }
}

제네릭에서는 보통 T,U,V로 임의의 타입을 표현한다. (타입 파라미터)

함수를 호출할 때 직접 타입 파라미터를 정의해줄 수도 있다.
다음과 같이 작성하면 함수의 아규먼트로 불린형 배열을 받는다.

printArray<boolean>(shoeSizes);

인터페이스, 타입 별칭에서도 제네릭을 사용할 수 있다.
똑같이 이름 뒤에 <타입파라미터>를 적어주면 된다.

타입파라미터는 여러개를 쓸 수도 있다. 여러개를 쓸 때는 쉼표로 구분해서 사용하면 된다.

const map = new Map<string, Product>

타입파라미터는 아무 이름이나 써도 되지만 헷갈릴 수 있으므로 한글자로 쓰는것을 추천한다.

알아두면 유용한 제네릭 타입들

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