Skip to content

Qvil Blog

Github

[Typescript] Utility Types

— Typescript — 1 min read

지난 번 유용할 것 같은 Mapped Types를 정리하고 더 찾아보니 유용한 유틸리티 타입들이 있다.

공식문서에 좋은 정보들이 있다. 개인적으로 유용한 타입들을 간추리고 필요한 경우 이해를 돕기 위해 예제를 수정하여 소개한다.

Partial<Type>

Type의 모든 속성을 optional로 만듦.

API GET Return Type을 정의하고 동일한 Type으로 UpdateDTO를 만드는 경우 유용함.

1interface Todo {
2  title: string;
3  description: string;
4}
5
6function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
7  return { ...todo, ...fieldsToUpdate };
8}
9
10const todo1 = {
11  title: "organize desk",
12  description: "clear clutter",
13};
14
15const todo2 = updateTodo(todo1, {
16  description: "throw out trash",
17});

Required<Type>

Type의 모든 속성을 required로 만듦. Partial과 반대되는 타입.

1interface Props {
2  a?: number;
3  b?: string;
4}
5
6const obj: Props = { a: 5 };
7
8const obj2: Required<Props> = { a: 5 };
9// Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.

Record<Keys,Type>

Object의 key 타입을 Keys, value 타입을 Type으로 만듦.

1interface PageInfo {
2  title: string;
3}
4
5type Page = "home" | "about" | "contact";
6
7const nav: Record<Page, PageInfo> = {
8  about: { title: "about page" },
9  contact: { title: "contact us" },
10  home: { title: "home page" },
11};
12
13nav.about;
14// ^ = const nav: Record
15//   ^ (property) about: PageInfo

Pick<Type, Keys>

Type에서 Keys 타입을 선택하여 타입을 만듦.

1interface Todo {
2  title: string;
3  description: string;
4  completed: boolean;
5}
6
7type TodoPreview = Pick<Todo, "title" | "completed">;
8
9const todo: TodoPreview = {
10  title: "Clean room",
11  completed: false,
12};
13
14todo;
15// ^ = const todo: TodoPreview

Omit<Type, Keys>

Type에서 Keys 타입을 제외한 모든 속성으로 타입을 만듦. Pick과 반대되는 타입.

1interface Todo {
2  title: string;
3  description: string;
4  completed: boolean;
5}
6
7type TodoPreview = Omit<Todo, "description">;
8
9const todo: TodoPreview = {
10  title: "Clean room",
11  completed: false,
12};
13
14todo;
15// ^ = const todo: TodoPreview

NonNullable<Type>

Type에서 null과 undefined를 제외한 타입.

1type T0 = NonNullable<string | number | undefined>;
2//    ^ = type T0 = string | number
3type T1 = NonNullable<string[] | null | undefined>;
4//    ^ = type T1 = string[]

이 외에도 Parameters<Type>, ReturnType<Type>, ThisType<Type> 등 다양한 유틸리티 타입이 있다. 타입스크립트를 사용한다면 아래 참고 링크를 참고하여 다양한 유틸리티 타입을 사용해보길 추천한다.

참고