맵드 타입 기반의 유틸리티 타입 2 - Pick, Omit, Record

한 입 크기로 잘라먹는 타입스크립트 - 맵드 타입 기반의 유틸리티 타입들 2 (Pick<T, K>, Omit<T, K>, Record<T, K>)


1. Pick<T, K>
객체 타입으로부터 특정 프로퍼티만 딱 골라내는 타입.

- chapter2.ts

/**
 * Pick<T, K>
 * -> 뽑다, 고르다
 * -> 객체 타입으로부터 특정 프로퍼티만 딱 골라내는 타입
 */
// 블로그 게시글 객체
interface Post {
    title: string;
    tags: string[];
    content: string;
    thumbnailURL?: string;
}

/* 원본 유틸리티 타입
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};
*/

// 직접 만들기 : 맵드 타입, 인덱스드 액세스 타입, 조건부 타입
type Pick<T, K extends keyof T> = {
    // K extends 'title' | 'tags' | 'content' | 'thumbnailURL'
    // 'title' | 'content' extends 'title' | 'tags' | 'content' | 'thumbnailURL'
    [key in K]: T[key];
};

// 옛날에 작성된 게시글
const legacyPost: Pick<Post, 'title' | 'content'> = {
    title: '옛날 글'
  , content: '옛날 컨텐츠'
};

2. Omit<T, K>
객체 타입으로부터 특정 프로퍼티를 제거하는 타입.

- chapter2.ts

...
/**
 * Omit<T, K>
 * -> 생략하다, 빼다
 * -> 객체 타입으로부터 특정 프로퍼티를 제거하는 타입
 */
/* 원본 유틸리티 타입
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
*/

// 직접 만들기 : 조건부 타입
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
// T = Post, K = 'title'
// Pick<Post, Exclude<keyof Post, 'title'>>
// Pick<Post, Exclude<'title' | 'tags' | 'content' | 'thumbnailURL', 'title'>>
// Pick<Post, 'tags' | 'content' | 'thumbnailURL'>>

// 제목이 없는 글
const noTitlePost: Omit<Post, 'title'> = {
    tags: []
  , content: ''
  , thumbnailURL: ''
};

3. Record<T, K>
동일한 패턴을 갖는 객체 타입을 쉽게 정의해주는 유틸리티 타입.
인덱스 시그니처 처럼 유연하지만 좀 더 제한적인 객체타입 정의할 때 사용.
실무에서 자주 쓰인다.

- chapter2.ts

...
/**
 * Record<T, K>
 * -> 동일한 패턴을 갖는 객체 타입을 쉽게 정의해주는 유틸리티 타입
 * -> 인덱스 시그니처 처럼 유연하지만 좀 더 제한적인 객체타입 정의할 때 사용
 */
/* 원본 유틸리티 타입
type Record<K extends keyof any, T> = {
    [P in K]: T;
};
*/

// 직접 만들기 : 맵드 타입, 조건부 타입
type Record<K extends keyof any, V> = {
    [key in K]: V
};

// 레코드 타입 사용 전
type ThumbnailLegacy = {
    large: {
        url: string;
    };
    medium: {
        url: string;
    };
    small: {
        url: string;
    };
    watch: {
        url: string;
    };
};

// 레코드 타입 사용
type Thumbnail = Record<'large' | 'medium' | 'small' | 'watch', { url: string; size: number; }>;

참고링크 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8#

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런