타입스크립트 타입 정복: 내장 유틸리티 타입을 만들어보자

* 이 프로젝트는 기본적으로 TypeScript를 써 보았고, 내장된 유틸리티 타입들과 Generic 등을 알고 있는 상태에서 진행하는 것을 추천합니다. 그렇지 않다면, 공식 사이트 등을 참고해가며 학습과 병행하는 것을 추천합니다.

---

Documentation - Utility Types

 

keyof operator

keyof operator는 객체 유형의 키의 문자열 또는 숫자 리터럴 조합을 생성합니다.

type Point = { x: number; y: number };
type P = keyof Point; // 'x' | 'y'

in operator

JavaScript에서 in 연산자는 지정된 속성이 지정된 객체에 포함되면 true를 반환하는 연산자입니다.

TypeScript도 마찬가지지만, 타입 내에서는 키 조합을 모두 순회하며 반복하는 구문의 일부로 사용됩니다.

Indexed Access Types

다른 유형의 특정 속성을 조회할 수 있습니다.

type Person = { age: number; name: string; alive: boolean };
type Age = Person["age"]; // number

Pick<Type, Keys>

Pick은 타입스크립트에 내장 된 유틸리티 타입으로 Type으로 넘겨준 타입의 특정 키 집합 Key(문자열 리터럴 또는 문자열 리터럴 조합)을 가져와 새로운 타입을 구성합니다.

 

 

Type에서 Keys 프로퍼티를 가져와 새로운 타입을 만드는 Pick을 내장 유틸리티 타입을 사용하지 않고 구현해 봅시다.

TS Playground - An online editor for exploring TypeScript and JavaScript

Omit<Type, Keys>

Pick과 반대로 Type의 특정 키 집합을 제거한 새로운 타입을 구성합니다.

TS Playground - An online editor for exploring TypeScript and JavaScript

Readonly<Type>

Readonly는 Type의 모든 속성이 읽기 전용으로 설정된 새로운 타입을 구성합니다. 즉, 생성된 타입의 속성을 재할당 할 수 없습니다.

TS Playground - An online editor for exploring TypeScript and JavaScript

Exclude<UnionType, ExcludedMembers>

UnionType에서 ExcludedMembers의 속성을 제외 한 새로운 타입을 구성합니다.

TS Playground - An online editor for exploring TypeScript and JavaScript

Parameters<Type>

함수 유형 Type의 매개변수에 사용된 타입으로 새로운 튜플 타입을 구성합니다.

TS Playground - An online editor for exploring TypeScript and JavaScript

ReturnType<Type>

함수 유형 Type의 반환값으로 새로운 타입을 구성합니다.

TS Playground - An online editor for exploring TypeScript and JavaScript