[이펙티브 타입스크립트+14] 타입 연산과 제너릭 사용으로 반복 줄이기

https://www.typescriptlang.org/docs/handbook/2/types-from-types.html

2장 타입스크립트의 타입 시스템
아이템 14 | 타입 연산과 제너릭 사용으로 반복 줄이기

3줄 요약
1. 타입의 불필요한 중복을 없애고 재활용하는 것이 중요하다. (DRY 원칙)
2. 타입연산자들 확인하고 많이 써보는 연습을 하자.
3. 타입스크립트 공식 홈페이지에 나오는 유틸리티 타입들을 직접 만들어보는 연습을 하자.

참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다.

---

이번 아이템에서의 주제는 타입의 재활용입니다.
타입스크립트에서 코드 재활용만큼 중요한 것이 타입 재활용입니다.

가장 간단한 방법은 타입 선언을 통해 중복을 제거하는 방법입니다.

(전) 인자 a와 b의 타입이 중복되어 있다.

(후) 타입 선언을 통해 중복된 타입을 제거했다.

또 간단한 방법은 기존의 타입에서 타입 연산자를 활용하여 타입을 확장시키는 것입니다.

(전) 중복된 타입을 공유하는 두 타입.

(후) 기존의 타입의 확장을 통해 중복 제거.

불필요한 타입의 중복을 제거하기 위해서 타입을 확장하였습니다.
그러나, 경우에 따라서는 기존의 타입의 축소시켜서 사용해야 할 경우도 있습니다.
예를 들어 Job이라는 타입과 PartTimeJob이라는 두 타입이 있다고 가정해보겠습니다.
그리고 그 속성들은 아래와 같이 생겼다고 가정해보겠습니다.

(전) 중복된 속성이 많은 Job 타입과 PartTimeJob 타입.

PartTimeJob 타입을 확장시켜 Job 타입을 만드는 방법이 있겠지만 Job 타입이라는 일반적인 타입을 바탕으로 PartTimeJob 타입을 만드는 것이 인터페이스의 일관성이라는 측면에서 더 적합해 보입니다.
먼저 Job 타입을 바탕으로 PartTimeJob 타입을 만들어보겠습니다.

(후) Job 타입을 이용하여 만든 PartTimeJob 타입

만들어놓은 PartTimeJob 타입을 보니 뭔가 중복되어 보이는 부분이 보입니다. 개발자이니깐요.
Mapped Types를 통해서 조금 더 간단하게 만들 수 있습니다.

Mapped types를 이용하여 만들기.

한번 더 추상화가 가능해 보입니다. 개발자이니깐요.
유틸리티 함수를 만드는 것처럼 keyof 연산자와 제너릭을 통해서 아래와 같이 유틸리티 타입을 만들 수 있습니다.
(해당 연산자들에 대한 자세한 설명은 공식 문서에서 확인할 수 있습니다.)

CustomPick을 이용하여 타입의 불필요한 중복 제거

타입 연산자들과 제너릭을 이용하여 유틸리티 타입을 만드는 것이 처음에는 이해하기 쉽지 않습니다.
그러나 반복적으로 접하고 공식 문서에 나오는 설명들을 찬찬히 읽어보면 이해하실 수 있습니다.

CustomPick 타입을 설명을 해보자면,
먼저 keyof 연산자를 통해 T 타입의 오브젝트 key들의 리터럴 유니온 타입을 만들어냅니다.
('category' | 'salary' | 'startDate' | 'bonus')
그리고 아이템 7에서 설명한 것처럼 타입을 extends 하는 것은 해당 타입의 부분집합을 의미합니다. 
이 부분 집합을 Job 다음의 제너릭으로 넘겨줍니다.
그다음 매핑된 타입(in keyof Type)을 이용하여 T 타입의 키로 접근하여 타입의 속성에 대한 타입을 가져옵니다.

이렇게 만든 CustomPick은 타입스크립트에서 제공하는 Pick 유틸리티 타입과 동일하게 생겼습니다.
그리고 유틸리티 타입 페이지에서는 많은 유틸리티 타입이 있으니 자주 살펴보고 필요한 상황에서 적절하게 사용하는 것이 좋습니다.

만일 기존 타입들의 속성을 모두 Optional로 바꾸고 싶은 경우에는 어떻게 하면 좋을까요?

OptionalSomething 타입은 Something 타입의 속성을 모두 optional로 만들었다.

이러한 경우에도 유틸리티 타입 중에서 Partial을 사용하면 됩니다.
주로 특정 타입의 Update 객체를 만들 때 사용합니다.
(값이 들어온 속성만 업데이트할 수 있도록)

// 유틸리티 타입 Partial은 이렇게 생겼습니다. 
type Partial<T> = { [k in keyof T]?: T[k] }

 

타입을 만들 때, 타입을 먼저 만들고 객체를 만드는 방법도 있습니다만
경우에 따라 객체를 만든 후에 해당 객체의 타입을 추출하는 경우도 있습니다.
이런 경우에는 객체에 typeof를 이용하면 쉽게 객체의 타입을 추출할 수 있습니다.
(물론, 타입을 먼저 정의하는 것을 더 권장합니다.)

객체로부터 타입을 추출.

 

Materials From
1. <이펙티브 타입스크립트>(댄 밴더캄 지음, 장원호 옮김, 인사이트 2021)
2. 타입스크립트 공식 홈페이지 | https://www.typescriptlang.org/

Typed JavaScript at Any Scale.