[TypeScript] TypeScript 유틸리티 타입 - 6

 

1. 유틸리티 타입?
2. 맵드 타입 기반
   1. Partial
   2. Required
   3. Readonly
   4. Pick
   5. Omit
   6. Record
3. 조건부 타입 기반
   1. Exclude
   2. Exreact
   3. ReturnType

 

---

유틸리티 타입?

- 지금까지의 타입 조작기능 (제너릭, 맵드, 조건부 타입 등)을 이용해 실무에서 자주 사용되는 유용한 타입을 모아놓은 기능

- https://www.typescriptlang.org/docs/handbook/utility-types.html

Documentation - Utility Types

 

 

맵드 타입 기반

Partial

- 특정 객체 타입의 모든 프로터티를 선택적 프로퍼티로 바꿔주는 타입

// Partial<T>
interface Post {
    title: string;
    tags: string[];
    content: string;
    thumbnailURL?: string;
}

// const draft: Post = { // error -  tags 프로퍼티가 없음
//   title: "제목은 나중에 짓자...",
//   content: "초안...",
// };

const draft: Partial<Post> = {
    title: "제목 나중에 짓자",
    content: "초안...",
  };

 

 

Required

- 특정 객체 타입의 모든 프로퍼티를 필수 프로퍼티로 변환

// Required<T>
interface Post {
    title: string;
    tags: string[];
    content: string;
    thumbnailURL?: string;
}

// const withThumbnailPost: Post = { // 오류는 나지 않지만 모든 프로퍼티를 필수로 하고 싶은 경우
//     title: "한입 타스 후기",
//     tags: ["ts"],
//     content: "",
//     thumbnailURL: "https://...",
// };
const withThumbnailPost: Required<Post> = {
    title: "한입 타스 후기",
    tags: ["ts"],
    content: "",
    thumbnailURL: "https://...",
};

 

Readonly

- 모든 프로퍼티를 읽기 전용 프로퍼티로 변환

// Readonly<T> 
interface Post {
    title: string;
    tags: string[];
    content: string;
    thumbnailURL?: string;
}

// Readonly<T> 
const readonlyPost: Readonly<Post> = {
    title: "보호된 게시글입니다.",
    tags: [],
    content: "",
};
// readonlyPost.content = '해킹당함'; // error - 수정 방지 프로퍼티

 

Pick

- 특정 객체 타입으로부터 특정 프로퍼티 만을 골라내는 그런 타입

// Pick<T, K>
interface Post {
    title: string;
    tags: string[];
    content: string;
    thumbnailURL?: string;
}
// const legacyPost: Post = { // error - tag가 없어서 오류 발생
//     title: "",
//     content: "",
// };
const legacyPost: Pick<Post, "title" | "content"> = {
    title: "",
    content: "",
};

Omit

- 특정 객체 타입으로부터 특정 프로퍼티 만을 제거하는 타입

// Omit<T, K>
interface Post {
    title: string;
    tags: string[];
    content: string;
    thumbnailURL?: string;
}
// const noTitlePost: Post = { // error - title이 없어서
//     content: "",
//     tags: [],
//     thumbnailURL: "",
// };
const noTitlePost: Omit<Post, "title"> = {
    content: "",
    tags: [],
    thumbnailURL: "",
};

Record

- 똑같이 생긴 프로퍼티가 계속해서 중복코드가 발생할때 지정하는 타입

// Record<K, V>
type ThumbnailLegacy = {
    large: {
        url: string;
    };
    medium: {
        url: string;
    };
    small: {
        url: string;
    };
};
type Thumbnail = Record<"large" | "medium" | "small", { url: string }>;

 

 

조건부 타입 기반

Exclude

- T로부터 U를 제거하는 타입

// Exclude
type A = Exclude<string | boolean, string>; // // boolean

Exreact

- T로 부터 U를 추출하는 타입

// Exreact
type B = Extract<string | boolean, boolean>; // boolean

ReturnType

- T에 할당된 함수 타입의 반환값 타입을 추출하는 타입

// ReturnType
function funcA() {
    return "hello";
}
function funcB() {
    return 10;
}

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

 

 

출처

• 한 입 크기로 잘라먹는 타입스크립트(TypeScript)