[TS] 유틸리티 타입(Utility Types)

Utility Types

Utility Types이란?

존재하는 Type들을 기반으로 타입 변환을 보다 쉽게 하기 위해 변형해서 사용하는 타입

초급

Awaited

released: 4.5

• async-await 또는 .then() 등에서 발생하는 Promise 타입을 ‘unwrap’할 때 사용

type A = Awaited<Promise<string>>;   
// type A = string
 
type B = Awaited<Promise<Promise<number>>>;
// type B = number
 
type C = Awaited<boolean | Promise<number>>; 
// type C = number | boolean

Record<Keys, Type>

released: 2.1

• 프로퍼티 키가 Keys이고 프로퍼티 값이 Type인 객체 유형을 생성
• 이 유틸리티는 타입의 프로퍼티를 다른 타입에 매핑하는 데 사용

interface CatInfo {
  age: number;
  breed: string;
}
 
type CatName = "miffy" | "boris" | "mordred";
 
const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: "Persian" },
  boris: { age: 5, breed: "Maine Coon" },
  mordred: { age: 16, breed: "British Shorthair" },
};

Pick<Type, Keys>

released: 2.1

• 타입에서 특정 속성(들)을 ‘pick’해서 부분적으로 사용할 때 사용
• 단일 속성을 뽑을 때에는 string literal, 여러 속성들을 뽑을 때에는 union을 사용

// 대상 타입
interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

// Todo 타입에서 title, completed 속성만 뽑아 구성한 유틸리티 타입
type TodoPreview = Pick<Todo, "title" | "completed">;
 
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

Extract<Type, Union>

released: 2.8

• Type으로부터 Union에 해당하는 union을 뽑아낼 때 사용
• Pick이 interface 버전이라면, Extract는 유니온 버전

type T0 = Extract<"a" | "b" | "c", "a" | "f">;  
// type T0 = "a"

type T1 = Extract<string | number | (() => void), Function>;  
// type T1 = () => void

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; x: number }
  | { kind: "triangle"; x: number; y: number }; 

type T2 = Extract<Shape, { kind: "circle" }>  
// type T2 = {
//     kind: "circle";
//     radius: number;
// }

Omit<Type, Keys>

released: 2.1

• 타입에서 특정 속성(들)을 제거한 나머지를 사용할 때 사용
• 즉, Pick과 반대되는 유틸리티 타입

// 속성 제거 대상 타입
interface Todo {
  title: string;
  description: string;
  completed: boolean;
  createdAt: number;
}

// Todo 타입에서 description 속성을 제거한 유틸리티 타입
type TodoPreview = Omit<Todo, "description">;
 
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
  createdAt: 1615544252770,
};

// Todo 타입에서 completed, createdAt 속성을 제거한 유틸리티 타입
type TodoInfo = Omit<Todo, "completed" | "createdAt">;
 
const todoInfo: TodoInfo = {
  title: "Pick up kids",
  description: "Kindergarten closes at 5pm",
};

Exclude<UnionType, ExcludeMembers>

released: 2.8

• UnionType으로부터 ExcludeMembers를 제외한 나머지
• Omit이 interface 버전이라면, Exclude는 union 버전

type T0 = Exclude<"a" | "b" | "c", "a">;
// type TO = "b" | "c"

type T1 = Exclude<"a" | "b" | "c", "a" | "b">;
// type T1 = "c"

type T2 = Exclude<string | number | (() => void), Function>;
// type T2 = string | number

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; x: number }
  | { kind: "triangle"; x: number; y: number };

type T3 = Exclude<Shape, { kind: "circle" }>
// type T3 = { kind: "square"; x: number; } | 
//           { kind: "triangle"; x: number; y: number; }

Partial

released: 2.1

• 특정 타입의 일부 속성들을 optional하게 사용할 때 사용
• 주어진 타입의 모든 부분집합을 대표

interface Todo {
  title: string;
  description: string;
}

// fieldsToUpdate 인자는 Todo 타입 속성 중 일부를 가진 객체라면 모두 만족
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
  return { ...todo, ...fieldsToUpdate };
}
 
const todo1 = {
  title: "organize desk",
  description: "clear clutter",
};
 
const todo2 = updateTodo(todo1, {
  description: "throw out trash",
});

중급

Required

released: 2.8

• 특정 타입의 optional한 속성들이 모두 반드시 있는 타입
• 즉, Partial의 성질과는 반대의 기능

interface Props {
  a?: number;
  b?: string;
}
 
const obj: Props = { a: 5 };
 
const obj2: Required<Props> = { a: 5 };
// 🚫 Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.

Readonly

released: 2.1

• 이 유틸리티 타입으로 정의된 경우 재할당(reassign)될 수 없음을 의미

interface Todo {
  title: string;
}
 
const todo: Readonly<Todo> = {
  title: "Delete inactive users",
};
 
todo.title = "Hello";
// 🚫 Cannot assign to 'title' because it is a read-only property.

• 이 유틸리티는 런타임에 실패하는 할당 표현식을 표현하는 데 유용
  • (예: frozen object의 프로퍼티를 재할당하려고 할 때)

function freeze<Type>(obj: Type): Readonly<Type>;

NonNullable

released: 2.8

• 타입으로부터 null과 undefined를 제외한 나머지를 나타낼 때 사용

type T0 = NonNullable<string | number | undefined>;   
// type T0 = string | number

type T1 = NonNullable<string[] | null | undefined>;     
// type T1 = string[]

Parameters

released: 3.1

• 함수 타입의 parameter의 타입을

declare function f1(arg: { a: number; b: string }): void;
 
type T0 = Parameters<() => string>;
// type T0 = []

type T1 = Parameters<(s: string) => void>;
// type T1 = [s: string]

type T2 = Parameters<<T>(arg: T) => T>;
// type T2 = [arg: unknown]

type T3 = Parameters<typeof f1>;
// type T3 = [arg: {
//     a: number;
//     b: string;
// }]

type T4 = Parameters<any>;
// type T4 = unknown[]

type T5 = Parameters<never>;
// type T5 = never

type T6 = Parameters<string>;
// 🚫 Type 'string' does not satisfy the constraint '(...args: any) => any'.
// 🚫 Parameters<Type>의 Type은 함수형이어야 함
// type T6 = never

type T7 = Parameters<Function>;
// 🚫 Type 'Function' does not satisfy the constraint '(...args: any) => any'.
//    Type 'Function' provides no match for the signature '(...args: any): any'.
// 🚫 Function 타입은 parameters에 대한 signature가 없어 불가능
// type T7 = never

ReturnType

released: 2.8

• 함수 타입의 return값에 대한 타입을 설정할 때 사용

declare function f1(): { a: number; b: string };
 
type T0 = ReturnType<() => string>;
// type T0 = string

type T1 = ReturnType<(s: string) => void>;  
// type T1 = void

type T2 = ReturnType<<T>() => T>;  
// type T2 = unknown

type T3 = ReturnType<<T extends U, U extends number[]>() => T>;     
// type T3 = number[]

type T4 = ReturnType<typeof f1>;  
// type T4 = {
//     a: number;
//     b: string;
// }

type T5 = ReturnType<any>;     
// type T5 = any

type T6 = ReturnType<never>;     
// type T6 = never

type T7 = ReturnType<string>;
// 🚫 Type 'string' does not satisfy the constraint '(...args: any) => any'.
// type T7 = any

type T8 = ReturnType<Function>;
// 🚫 Type 'Function' does not satisfy the constraint '(...args: any) => any'.
//    Type 'Function' provides no match for the signature '(...args: any): any'.     
// type T8 = any

고급

InstanceType

released: 2.8

• 타입의 생성자 함수의 인스턴스 타입으로 구성된 타입을 생성할 때 사용

class C {
  x = 0;
  y = 0;
}
 
type T0 = InstanceType<typeof C>;
// typeof C: C class의 constructor function
// type T0 = C

type T1 = InstanceType<any>;     
// type T1 = any

type T2 = InstanceType<never>;     
// type T2 = never

type T3 = InstanceType<string>;
// 🚫 Type 'string' does not satisfy the constraint 'abstract new (...args: any) => any'.
// type T3 = any

type T4 = InstanceType<Function>;
// 🚫 Type 'Function' does not satisfy the constraint 'abstract new (...args: any) => any'.
//    Type 'Function' provides no match for the signature 'new (...args: any): any'.
// type T4 = any

ThisParameterType

released: 3.3

• 함수 타입의 this parameter의 타입을 추출
• 함수 타입에 this parameter가 없는 경우 unknown

function toHex(this: Number) {
  return this.toString(16);
}

console.log(toHex.apply(1234)); // "4d2"
 
function numberToString(n: ThisParameterType<typeof toHex>) {
  return toHex.apply(n);
}

console.log(numberToString(1234)); // "4d2"

OmitThisParameter

released: 3.3

• Type에서 this parameter를 제거할 때 사용
• Type에 명시적으로 this parameter가 없다면, 유틸리티 타입은 Type과 동일
• 그렇지 않으면, Type에서 this parameter가 없는 새 함수 타입이 생성
• generic은 지워지고, 마지막 overload signature만 새 함수 유형으로 전파

function toHex(this: Number) {
  return this.toString(16);
}
 
const fiveToHex: OmitThisParameter<typeof toHex> = toHex.bind(5);
 
console.log(fiveToHex()); // 5

References

• TS핸드북 - utility-types