맵드 타입 기반의 유틸리티 타입 1 - Partial, Required, Readonly

한 입 크기로 잘라먹는 타입스크립트 - 맵드 타입 기반의 유틸리티 타입들 (Partial<T>, Required<T>, Readonly<T>)


1. Partial<T>
타입 변수로 전달된 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 바꿔주는 타입.

- chapter1.ts

/**
 * Partial<T>
 * -> 부분적인, 일부분의
 * -> 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 바꿔주는 타입
 */
// 블로그 게시글 객체
interface Post {
    title: string;
    tags: string[];
    content: string;
    thumbnailURL?: string;
}

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

// 직접 만들기 : 맵드 타입, 인덱스드 액세스 타입
type Partial<T> = {
    [key in keyof T]?: T[key]; // 물음표 추가
};

// 게시글 임시저장
const draft: Partial<Post> = {
    title: '제목 나중에 짓자'
  , content: '초안...'
};

2. Required<T>
타입 변수로 전달된 특정 객체 타입의 모든 프로퍼티를 필수 프로퍼티로 바꿔주는 타입.

- chapter1.ts

...
/**
 * Required<T>
 * -> 필수의, 필수적인
 * -> 특정 객체 타입의 모든 프로퍼티를 필수 프로퍼티로 바꿔주는 타입
 */
/* 원본 유틸리티 타입
type Required<T> = {
    [P in keyof T]-?: T[P];
};
*/

// 직접 만들기 : 맵드 타입, 인덱스드 액세스 타입
type Required<T> = {
    [key in keyof T]-?: T[key]; // -? 는 물음표를 빼겠다는 의미
};

const withThumbnailPost: Required<Post> = {
    title: '한입 타스 후기'
  , tags: ['ts']
  , content: ''
  , thumbnailURL: 'https://...'
};

3. Readonly<T>
타입 변수로 전달된 특정 객체 타입의 모든 프로퍼티를 읽기 전용 프로퍼티로 바꿔주는 타입.

- chapter1.ts

...
/**
 * Readonly<T>
 * -> 읽기전용, 수정불가
 * -> 특정 객체 타입의 모든 프로퍼티를 읽기 전용 프로퍼티로 바꿔주는 타입
 */
/* 원본 유틸리티 타입
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};
*/

// 직접 만들기 : 맵드 타입, 인덱스드 액세스 타입
type Readonly<T> = {
    readonly [key in keyof T]: T[key]; // readonly 속성 추가
};

const readonlyPost: Readonly<Post> = {
    title: '보호된 게시글 입니다.'
  , tags: []
  , content: ''
};

// 수정 불가
// readonlyPost.content = 'test';

참고링크 : 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 - 인프런