GitBook 링크

개요

크롬에 '유틸리티 타입'을 치자마자 맨 위에 위의 GitBook가 떴다. 먼저 대략적으로 읽고 이해하고나서 자주 사용하거나 들어본 타입 위주로 정리했다.

종류

Partial<T>

T의 모든 속성을 optional하게 만든다. (모든 속성 뒤에 '?'를 붙인 것과 동일)

Pick<T, K>

T에서 K 속성들만 선택해서 타입을 구성한다.

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

// Todo를 활용하여 TodoPreview라는 타입 생성
type TodoPreview = Pick<Todo, 'title' | 'completed'>;

Omit<T, K>

T에서 특정 속성 K만 제거해서 타입을 만든다.

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

// 속성 title과 completed만 포함
type TodoPreview = Omit<Todo, 'description'>;

NonNullable<T>

T에서 null과 undefined를 빼고 타입을 구성한다.

오늘 Next.js를 사용하던 중 getServerSideProps로 받아온 상세 페이지의 id가 string | string[] | undefined 타입이었는데 이 속성으로 undefined를 제거할 수 있을 것 같다.

type Type0 = NonNullable<string | number | undefined>;  // string | number
type Type1 = NonNullable<string[] | null | undefined>;  // string[]

ReturnType<T>

함수 T의 반환 타입으로 구성된 타입을 만든다.

ReturnType의 T에는 무조건 함수가 들어가야 한다.
예시의 맨 아래 Function은 '함수'가 아니라 '함수 타입'이기 때문에 오류인 것 같다.

declare function f1(): { a: number, b: string }
type T0 = ReturnType<() => string>;  // string
type T1 = ReturnType<(s: string) => void>;  // void
type T2 = ReturnType<(<T>() => T)>;  // 제네릭은 빈 객체({ }) 반환
type T3 = ReturnType<(<T extends U, U extends number[]>() => T)>;  // 제네릭은 빈 도화지와 같은 것이다. 따라서 T -> U, U -> number[]를 상속하면 반환값 T는 자연히 number[] 가 된다
type T4 = ReturnType<typeof f1>;  // { a: number, b: string }
type T5 = ReturnType<any>;  // any
type T6 = ReturnType<never>;  // never도 any로 인식한다
type T7 = ReturnType<string>;  // 함수가 아니라서 오류
type T8 = ReturnType<Function>;  // (함수가 아닌 '타입'이라서) 오류

Required<T>

'?(optional)'이 포함되어 있던 타입의 속성을 전부 필수(required) 속성으로 바꿔준다.

interface Props {
    a?: number;
    b?: string;
};

const obj: Props = { a: 5 }; // 성공

const obj2: Required<Props> = { a: 5 }; // 오류: 프로퍼티 'b'가 없음

우선은 많이 들어본 것 위주로 먼저 정리해보았다. 나머지는 타입스크립트를 계속 쓰면서 추가하려고 한다.