[Typescirpt] 유틸리티 타입

유틸리티 타입(untility type) 이란?

유틸리티 타입(untility type)은 이미 정의된 타입 구조를 변경하여 재사용 하기위해 사용하는 타입입니다.

유틸리티 타입 적용법

유틸리티 타입은 타입스크립트 내장 타입이므로 타입스크립트를 설치한 후 타입스크립트 설정 파일 tsconfig.json에서 lib 속성만 변경해주면 됩니다.

{
  "compilerOptions" : {
    "lib": ["ESNext"]
  }
}

대표적인 유틸리티 타입

1. Pick

Pick 유틸리티 타입은 특정 타입 속성을 뽑아서 새로운 타입을 만들어 낼 때 사용합니다.

Pick<대상 타입, "대상 속성"> 형식으로 사용합니다.
Pick<대상 타입, "대상 속성1" | "대상 속석2"> 혹은 Pick<대상 타입, "대상 속성1","대상 속성2">
속성은 여러개가 올 수 있으면 유니언 타입( | ) 형태로 적거나 콤마( , ) 적어 속성을 여러개 적을 수 있습니다.

interface Data {
  id: string;
  title: string;
  content: string;
}

type IdAndTitle = Pick<Data, "id" | "title">;
/** 
type IdAndTitle = {
  id: string;
  title: string;
}
**/

2. Omit

Omit 유틸리티 타입은 특정 타입 속성을 제외 시켜 새로운 타입을 만들어 낼 때 사용합니다.

사용 문법은 Pick 타입과 같습니다.
Omit<대상 타입, "대상 속성"> (T: type, P: property)
Omit<대상 타입, "대상 속성1" | "대상 속성2"> 혹은 Omit<대상 타입, "대상 속성1", "대상 속성2">

interface Data {
  id: string;
  title: string;
  content: string;
}

type Id = Omit<Data, "title" | "content">;
/** 
type Id = {
  id: string;
}
**/

3. Partial

Partial 유틸리티 타입은 대상 타입의 속성을 모두 옵셔널 속성으로 바꾸어 줍니다.
주로 데이터를 수정하는 REST API를 전송할 때 종종 사용되는 타입입니다.

Partial<대상 타입> 형식으로 사용합니다.

interface Data {
  id: string;
  title: string;
  content: string;
}

type OptionalData = Partial<Data>;
/** 
type OptionalData = {
  id?: string;
  title?: string;
  content?: string;
}
**/

4. Exclude

Exclude 유틸리티 타입은 유니언 타입을 구성하는 특정 타입을 제외할 때 사용됩니다.

Partial<대상 유니언 타입, "제거 할 타입"> 형식으로 사용합니다.

Pick, Omit과 동일하게 여러개의 아래와 같은 형식으로 유니언 타입을 삭제할 수 있습니다.
Partial<대상 유니언 타입, "제거 할 타입1" | "제거 할 타입2">
Partial<대상 유니언 타입, "제거 할 타입1", "제거 할 타입2">

type Product = "BAG" | "BOOK" | "PENCIL" ;
type CurrentProduct = Exclude<Product, "BAG">;
/**
type CurrentProduct = "Book" | "PENCIL"
**/

5. Record

Record 유틸리티 타입은 타입 1개를 속성의 키로 받고 다른 타입 1개를 속성 값으로 받아 객체 타입으로 변환해줍니다. 배열의 map() API와 비슷한 역할을 합니다.

Record<객체 속성의 키로 사용할 타입, 객체 속성의 값으로 사용할 타입> 형식으로 사용합니다.

interface Profile = {
  nickname: string;
  level: number;
}

type Users = "jon" | "mike" | "jane";

type UserProfileList = Record<Profile, Users>;
/**
type UserProfileList = {
  jon : {
  	nickname: string;
    level: number;
  },
  mike: {
  	nickname: string;
    level: number;
  },
  jane: {
  	nickname: string;
    level: number;
  }
}
**/

6. Required

Required 유틸리티 타입은 대상 타입을 속성을 모두 필수 속성으로 바꾸어 줍니다. Partial 유틸리티 타입의 반대입니다.

Record<대상 타입> 형식으로 사용합니다.

interface Data {
  id?: string;
  title?: string;
  content?: string;
}
  
type ReqData = Required<Data>;
/**
type ReqData = {
  id: string;
  title: string;
  content: string;
}
**/

7. Readonly

Required 유틸리티 타입은 대상 타입을 속성을 모두 읽기 전용 속성으로 변경합니다. 즉, 생성된 타입의 속성을 재할당 할 수 없습니다.

Required<대상 타입> 형식으로 사용합니다.

interface Profile {
  name: string;
}
  
type ReadonlyProfile = Readonly<Profile>;
// 타입 에러: 읽기 전용 속성 재할당 불가
const myData: ReadonlyProfile = {
 name: "jon"
}

8. Extract

Extract 유틸리티 타입은 대상 타입에서 유니온 타입에 할당할 수 있는 모든 속성을 가져와서 타입을 반환해줍니다.
즉, 대상 타입에서 유니온 타입과 겹치는 타입만을 추출합니다.

Extract<대상 타입, 유니언 타입> 형식으로 사용합니다.

type A = Extract<"a", "a" | "b" | "c"> // a
type B = Extract<number | string, number | string | boolean> // number | string

9. NonNullable

NonNullable 유틸리티 타입은 대상 타입에서 null과 undefined을 제외하고 타입을 반환해줍니다.

NonNullable<대상 타입> 형식으로 사용합니다.

type A = NonNullable<number | string | undefined> // number | string
type B = NonNullable<number | undefined | null> // number 

10. ReturnType

ReturnType 유틸리티 타입은 함수 타입의 반환 타입으로 구성된 타입을 반환해줍니다.

ReturnType<대상 함수 타입> 형식으로 사용합니다.

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)>;  // number[]
type T4 = ReturnType<typeof f1>;  // { a: number, b: string }
type T5 = ReturnType<any>;  // any
type T6 = ReturnType<never>;  // any
type T7 = ReturnType<string>;  // 오류
type T8 = ReturnType<Function>;  // 오류

📌 참고

이외 유틸리티 타입들은 TypeScript 공식문서 에서 확인할 수 있습니다.