[TS] 10. 타입스크립트의핵심 #3 - Utility Types

 

Utility Types:

• TS에서는 타입 변환을 쉽게 하기 위해 유틸리티 타입을 제공해준다.

 

Readonly<Type>

• 모든 프로퍼티를 읽기전용(readonly)으로 설정해준다.

type ToDo = {
  title: string;
  description: string;
};

function display(todo: Readonly<ToDo>) {
  todo.title = 'jaja';  // error
}

 

 

Partial<Type>

• 모든 프로퍼티의 타입을 optional로 지정해준다.

type ToDo = {
  title: string;
  description: string;
  label: string;
  priority: 'high' | 'low';
};

function updateTodo(todo: ToDo, fieldsToUpdate: Partial<ToDo>): ToDo {
  return { ...todo, ...fieldsToUpdate };
}

const todo: ToDo = {
  title: 'learn TypeScript',
  description: 'study hard',
  label: 'study',
  priority: 'high',
};

const updated = updateTodo(todo, { priority: 'low' });
console.log(updated);

 

 

Pick<Type,Keys>

• 특정 타입에서 원하는 속성만을 선택하여 타입을 정의할 수 있습니다.

type Video = {
  id: string;
  title: string;
  url: string;
  data: string;
};

type VideoMetadata = Pick<Video, 'id' | 'title'>;

function getVideo(id: string): Video {
  return {
    id,
    title: 'video',
    url: 'https://..',
    data: 'byte-data..',
  };
}

function getVideoMetadata(id: string): VideoMetadata {
  return {
    id: id,
    title: 'title',
  };
}

 

 

Omit<Type>

• Pick 과 반대되는 개념으로, 특정 타입에서 원하는 속성들을 제거한 타입을 정의할 수 있습니다.

type Video = {
  id: string;
  title: string;
  url: string;
  data: string;
};

type VideoMetadata = Omit<Video, 'url' | 'data'>;

function getVideo(id: string): Video {
  return {
    id,
    title: 'video',
    url: 'https://..',
    data: 'byte-data..',
  };
}

function getVideoMetadata(id: string): VideoMetadata {
  return {
    id: id,
    title: 'title',
  };
}

 

 

Record<Keys,Type>

• Type 타입의 키들을 갖는 객체 타입을 정의합니다.
• 타입의 프로퍼티를 다른 타입에 매핑 시키는데 사용할 수 있습니다.

type PageInfo = {
  title: string;
};
type Page = 'home' | 'about' | 'contact';

const nav: Record<Page, PageInfo> = {
// Page를 key로, PageInfo를 value로 갖게!

  home: { title: 'Home' },
  about: { title: 'About' },
  contact: { title: 'Contact' },
};