질문

이펙티브 타입스크립트 아이템7 에서 등장하는 Exclude 라는 것이 있다.
이를 유틸리티 타입이라고 말하는 부분이 있는데
타입스크립트 책을 몇권 보아도 나오지 않는 내용이다.

Exclude ? 유틸리티 타입? 이게 도대체 뭘까?

개요

• 유틸리티 타입이란 ?
• 예제
  • Exclude
  • Pick
• 결론

유틸리티 타입이란 ?

TypeScript Lang - Utility Type

• TypeScript provides several utility types to facilitate common type transformations. These utilities are available globally.
• TypeScript는 일반적인 type 변환을 용이하게 하기 위해 여러 유틸리티 type을 제공합니다. 이러한 유틸리티는 모든 곳에서 사용할 수 있습니다.

유틸리티 타입

유틸리티 타입이라는 것은 타입스크립트 문법으로는 제공되지 않는 유틸리티한 타입들을 의미한다.
그러니까 문법적으로는 제공되지 않지만 문법을 활용하여 다양한 종류의 타입을 생성해내는 것을 의미한다.

쉽게 말하자면 타입스크립트의 확장 이라고 이해하면 되고,
조금 설명을 곁들이자면 타입스크립트를 다양하게 활용하는 것을 쉽게 이용하게 정리해둔 것이라고 보면 된다.

공식적으로 타입스크립트에 함께 포함은 되지만
일반적으로 타입스크립트를 공부할때에는 다루지 않는 것이 대부분이다.

단상

이 책을 보기 전까지는, NTS 의 위대한 TS 에반젤리스트(가칭) 지니어스 아이언님에게서 들었었다.
타입스크립트 책을 두세권 정도 봤었는데 보통 기초, 개론, 이해에 관한 입문 책들인지라 언급된 적이 없었다.
유틸리티 타입이야말로 타입스크립트의 꽃이자 열매라고 보여진다.
다양하게 사용하며 개인적인 유틸리티 타입을 만들어서 사용하게 된다면
당신도 지니어스 하게 타입스크립트를 사용할 수 있다.

예제

Exclude

Exclude<UnionType, ExcludedMembers>

• Constructs a type by excluding from UnionType all union members that are assignable to ExcludedMembers.
• 'ExcludedMembers'에 할당할 수 있는 모든 union 멤버를 'UnionType'에서 제외하여 Type을 생성합니다.

Distributive Conditional Types

• "generic type 에 union type 을 전달하면 union type 을 구성하고 있는 각각의 type 에 대하여 연산을 수행 후 다시 union 을 적용한다."

Try TSL Playground - Exclude

type T0 = Exclude<"a" | "b" | "c", "a">;
//    type T0 = "b" | "c"

type T1 = Exclude<"a" | "b" | "c", "a" | "b">;
//    type T1 = "c"

type T2 = Exclude<string | number | (() => void), Function>;
//    type T2 = string | number

단상

이펙티브 타입스크립트 - 스터디 OSS - Exclude Types 에서 말하는 것처럼
타입 구문에서의 | 와 & 는 JS 문법에서의 | 와 & 와 다르다
'새로운 '집합 연산자' 로 이해하는 것이 편하다
extends 도 그렇고 'type'이라는 것을 기존의 타입으로 이해하는게 아니라 집합 이라고 생각을 하자
타입스크립트가 아니고 집합 스크립트 인 것이다 ㅋㅋ

Pick

Pick<Type, Keys>

• Constructs a type by picking the set of properties Keys (string literal or union of string literals) from Type.
• 'Type'에서 'Keys' 속성의 집합을 선택하여 Type을 구성합니다.
• Keys - 문자열 리터럴 또는 문자열 리터럴의 합집합

Try TSL Playground - Pick

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
 
type TodoPreview = Pick<Todo, "title" | "completed">;
 
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
}

단상

동일한 타입을 선언하는 것을 즐기지 않는 것이 타입스크립트이다.
그렇다면 어떤 상위의 타입이 있을때 그에 대한 부분 집합에 해당하는 서브 타입을 만드려면 어떻게 할까?
일반적으로는 서브타입을 선언하고 슈퍼 타입에서 서브 타입을 확장(extends) 할지도 모른다
하지만 그렇다면 최초에 작성헀던 의도를 왜곡하게 되는 일은 아닐까?
그럴때 필요한 것이 바로 Pick 이다!
픽을 한다면 Super Type 으로부터 원하는 Sub Type 을 만들 수 있다.

픽미 픽미 픽미업~

참조

• TypeScript Lang - Utility Type
• Effective TypeScript Study OSS - Exclude Types
• Distributive Conditional Types