[240131] 제네릭, 유틸리티 타입(제네릭 타입)

✅    제네릭
✅    extends 키워드 활용하기
✅    인덱스 시그니처 활용하기
✅    의존성에 대한 이해
✅    TS Doc을 활용해보자.
✅    any를 구체화시키자. 혹은 unknown을 활용하자.
✅    declare 키워드의 활용
✅    타입 커버리지를 추적하자.

이펙타 스터디를 하면서 적은 추가로 공부해야 할 내용들을

지난 프로젝트에 하나씩 적용해보자 ! ~~

 

---

제네릭이란?

• 타입을 마치 함수의 파라미터처럼 사용하는 것
• 코드의 선언 시점이 아니라 생성 시점(런타임)에 타입을 명시

 

이런 코드를

function identity(arg: any): any {
  return arg;
}

 

이렇게 써볼 수 있다!

function identity<T>(arg: T): T {
  return arg;
}

any와 다른 점은, 매개변수로 받은 타입이 반환 타입으로 명시된다는 것이다.

예를 들어 런타임에 string 타입이 들어온다면 반환 타입이 string으로 명시되는 것.

 

---

유틸리티 타입

이러한 제네릭을 이용해서 이미 정의한 타입을 변환할 수 있도록 한 타입 문법을 유틸리티 타입이라고 한다.

 

Partial<T>

특정 타입의 부분집합으로 타입을 정의

type Partial<T> = {
    [P in keyof T]?: T[P];
};

Partial<옵셔널하게 만들 타입>;

colors들의 key를 뽑아서, key들의 부분집합으로 정의해볼 수 있다.

그런데 sort() 함수를 떼면 오류가 발생하지 않는데, 붙이면 오류가 발생한다. 왜 그럴까?

sort()함수의 대상이 되는 배열을 타입 지정 없이 바로 적었기 때문에, 반환값 역시 string[]으로 추론되는 것이 그 이유였다. 정렬 이전의 배열의 타입을 명시적으로 적어주었다.

 

---

Record<T, K>

• 제네릭의 key를 속성으로, 제네릭의 type을 속성값의 타입으로 지정하는 새로운 타입을 반환
• 인덱스 시그니처의 대안으로 활용 가능하다.

type Record<K extends string | number | symbol, T> = { 
	[P in K]: T; 
};

Record<속성 key의 타입, 속성 값의 타입>;

객체의 type을 아래와 같이 지정해서 일관성 있게 만들 수 있다.

---

Pick<T, K>

특정 타입에서 몇 개의 속성을 선택하여 타입을 정의

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

Pick<기준타입, 기준타입에서 사용할 속성의 key들의 타입>;

 

아래 코드를 보면 겹치는 부분이 상당하다는 것을 알 수 있다.

이 코드의 문제점은 User와 Friend 인터페이스를 작성할 때 수작업으로 타이핑해야 하고, 이에 따라 두 인터페이스가 공통적인 속성들을 가지고 있음에도 그 속성들이 동일한 타입인지 보장하기 어렵다는 점이다.

아래와 같이 활용해볼 수 있다.

 

---

Omit<T, K>

type Omit<T, K extends string | number | symbol> = { 
	[P in Exclude<keyof T, K>]: T[P]; 
}

Omit<기준타입, 기준타입에서 뺄 속성의 key들의 타입>;

 

Pick과 반대되는 Omit 타입을 활용해 보자.

Friend 타입에서 isFollowing, isBlocking 속성만 제외시키면 owner의 타입을 만들 수 있다.

 

---

참고자료

Documentation - Generics