인프런 강의 - 한 입 크기로 잘라먹는 타입스크립트 (유틸리티 타입)

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

 

📌 유틸리티 타입 소개

 

✅ 유틸리티 타입이란?

• 타입스크립트가 내장으로 제공하는 특수한 타입 모음
• 제네릭, 조건부 타입, 맵드 타입 등 기초 타입 조작 기능들을 조합해 실무에서 자주 쓰이는 형태로 구성
• 즉, 자주 반복되는 패턴을 간편하게 적용할 수 있도록 만들어진 재사용 가능한 타입 도구

 

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

// ✅ Partial<T>
// 부분적인, 일부분의
// 특정 객체 타입의 모든 프로퍼티를 '선택적 프로퍼티'로 바꿔주는 유틸리티 타입

interface Post {
    title: string;
    tags: string[];
    content: string;
    thumbnailURL?: string;
};

// 직접 구현
type Partial<T> = {
    [key in keyof T]?: T[key];
};

// 예시: 임시 저장용 게시글은 일부 프로퍼티만 있어도 됨
const draft: Partial<Post> = {
    title: "제목 나중에 짓자",
    content: "초안...",
};

// ✅ Required<T>
// 필수의, 필수적인
// 특정 객체 타입의 모든 프로퍼티를 '필수 프로퍼티'로 바꿔주는 유틸리티 타입

// 직접 구현
type Required<T> = {
    [key in keyof T]-?: T[key];
};

// 예시: 썸네일이 반드시 포함되어야 하는 게시글
const withThumbnailPost: Required<Post> = {
    title: "한입 타스 후기",
    tags: ["ts"],
    content: "",
    thumbnailURL: "https://...",
};

// ✅ Readonly<T>
// 읽기 전용, 수정 불가
// 특정 객체 타입의 모든 프로퍼티를 '읽기 전용 프로퍼티'로 바꿔주는 유틸리티 타입

// 직접 구현
type Readonly<T> = {
    readonly [key in keyof T]: T[key];
}

// 예시: 수정이 금지된 보호 게시글
const readonlyPost: Readonly<Post> = {
    title: "보호된 게시글 입니다.",
    tags: [],
    content: "",
};

 

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

// ✅ Pick<T, K>
// 뽑다, 고르다
// 객체 타입에서 특정 key만 골라 새로운 객체 타입을 생성

interface Post {
    title: string;
    tags: string[];
    content: string;
    thumbnailURL?: string;
};

// 직접 구현
type Pick<T, K extends keyof T> = {
    [key in K]: T[key];
}

// 예시: 오래된 글에는 태그나 썸네일이 없다고 가정
const legacyPost: Pick<Post, "title" | "content"> = {
    title: "옛날 글",
    content: "옛날 컨텐츠",
}

// ✅ Omit<T, K>
// 생략하다, 빼다
// 객체 타입에서 특정 key만 제거한 나머지로 구성된 타입을 생성

// 직접 구현
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

const noTitlePost: Omit<Post, "title"> = {
    content: "",
    tags: [],
    thumbnailURL: "",
};

// ✅ Record<K, V>
// 동일한 구조를 갖는 객체 타입을 빠르게 생성
// key 목록(K)을 기준으로 각 key에 동일한 value 타입(V)을 부여

// 직접 구현
type Record<K extends keyof any, V> = {
    [key in K]: V;
};

// 예시: 썸네일 유형별 속성 정의
type Thumbnail = Record<"large" | "medium" | "small | watch", { url: string, size: number }>;

 

📌 조건부 타입 기반의 유틸리티 타입 - Exclude, Extract, ReturnType

// ✅ Exclude<T, U>
// 제외하다, 추방하다
// 유니온 타입 T에서 U에 해당하는 타입만 제거

// 직접 구현
type Exclude<T, U> = T extends U ? never: T;

type A = Exclude<string | boolean, boolean>;
// 분산 조건부 타입으로 평가됨
// Exclude<string>; // => string
// Exclude<boolean>; // => never
// 따라서 A는 string

// ✅ Extract<T, U>
// 추출하다, 뽑아내다
// 유니온 타입 T에서 U에 해당하는 타입만 추출

// 직접 구현
type Extract<T, U> = T extends U ? T : never;

type B = Extract<string | boolean, boolean>;
// 분산 조건부 타입으로 평가됨
// Extract<string>; // => never
// Extract<boolean>; // => boolean
// 따라서 B는 boolean

// ✅ ReturnType<T>
// 함수의 반환값 타입을 추출하는 유틸리티 타입

// 직접 구현
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R: never;

function funcA() {
    return "hello";
}

function funcB() {
    return 10;
}

type ReturnA = ReturnType<typeof funcA>; // string
type ReturnB = ReturnType<typeof funcB>; // number