Utility types : Partial, Record, Pick, Omit ...

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

typescript-kr.github.io/pages/utility-types.html

TypeScript 한글 문서

 

 

우선 급하게 사용할 내용만 정리했습니다. 이후 시간이 날 때 나머지 유틸리티 타입을 살펴볼 계획입니다.

 

TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공합니다. 이런 유틸리티들은 전역으로 사용 가능합니다. * Nest의 Mapped Type의 개념과 비슷합니다. @PartialType, @OmitType ...

 

- Parital<T>

T의 모든 프로퍼티를 선택적으로 만드는 타입을 구성합니다

interface Book {
  category: string;
  name: string;
}

const hegel: Book = { category: "philo", name: "hegel" };
const episteme: Partial<Book> = { name: "foucault" };

 

 

- Readonly<T>

readonly 속성

interface Todo {
  title: string;
}

const todo: Readonly<Todo> = {
  title: "You can't change me",
};

todo.title = "Hello"; // 오류: 읽기 전용 프로퍼티에 재할당할 수 없음

 

- Record<K, T>

K타입을 Key값 타입으로, T타입을 밸류 값 타입으로 갖는 타입을 리턴합니다

아래 예시로 설명하자면, 키는 Page여야하고 값은 PageInfo가 되어야 합니다.

interface PageInfo {
  title: string;
}

type Page = "home" | "about" | "contact";

const WebPage: Record<Page, PageInfo> = {
  home: { title: "home page" },
  about: { title: "about page" },
  contact: { title: "contact page" },
};

 

- Pick<T, K>

T 타입으로부터 K 프로퍼티만 추출합니다.

쉽게말해 type에서 특정 부분만 pick할 수 있습니다. 아래의 경우 Todo 타입에서 "title" | "completed" 만 추출한 것입니다.

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

type TodoPreview = Pick<Todo, "title" | "completed">;

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

 

 

- Omit<T, K>

T에서 K 프로퍼티를 생략함.

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

type TodoPreview = Omit<Todo, 'description'>;

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
};

 

 

ReturnType<Type>

// NodeJS.Timeout(노드환경), number(브라우저)를 쓰게되면 플랫폼 종속적이게 됨.
// ReturnType<typeof setTimeout>을 쓰면 브라우저, 노드 두 곳에서 작동할 것으로 예상

const debounce = (callback: Function, ms = 1000) => {
  let timeoutId: ReturnType<typeof setTimeout> | null = null;
  return (...args: any[]) => {
    if (timeoutId) clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      callback.apply(null, args);
    }, ms);
  };
};

 

 

ref)

medium.com/harrythegreat/typescript-%EC%9C%A0%ED%8B%B8%EB%A6%AC%ED%8B%B0-%ED%81%B4%EB%9E%98%EC%8A%A4-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0-7ae8a786fb20