유틸리티 타입

유틸리티 타입?

• 유틸리티 타입이란 공통 타입 변환을 용이하게 하기 위해서 타입스크립트에서 지원하는 문법이다

자주 사용하는 7가지 타입

Partial<T>

• T라는 타입의 모든 프로퍼티를 선택적으로 만드는 타입을 구성하는 유틸리티 타입이다.
• 이 유틸리티 타입을 통해서 주어진 타입의 모든 하위 집합을 나타내는 타입을 반환할 수 있다.

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

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
    return { ...todo, ...fieldsToUpdate };
} // fieldsToUpdate는 Todo으 부분집합을 선언해 줄 수 있다

const todo1 = {
    title: 'organize desk',
    description: 'clear clutter',
};

const todo2 = updateTodo(todo1, {
    description: 'throw out trash',
}); // 첫 번째 Todo가 있고 두 번째 Todo가 Todo라는 인터페이스의 부분집합으로 description만 들어왔어도 정상적으로 잘 업데이트가 된다.

 

ReadOnly<T>

• T의 모든 프로퍼티를 읽기 전용으로 설정한 타입을 구성.
• 생성된 유틸리티 타입에 대해서는 재할당을 할 수 없다.

interface Todo {
    title: string;
}

const todo: Readonly<Todo> = {
    title: 'Delete inactive users',
};

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

 

Record<K,T>

• 타입 두 개를 제네릭으로 받는다
• 두 번째 인자인 타입 T에 프로퍼티의 집합 K로 타입을 구성한다.
• 이 유틸리티 타입은 타입의 프로퍼티를 다른 타입에 매핑 시키는데 사용할 수 있다.

interface PageInfo {
    title: string;
}

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

const x: Record<Page, PageInfo> = { // Page는 키 값이고 PageInfo는 이 value 값의 인터페이스가 된다
    about: { title: 'about' },
    contact: { title: 'contact' },
    home: { title: 'home' },
};

• Record 형태의 자료 구조로 객체를 가져가고 싶을 때 사용

Pick<T,K>

• 타입 T에서 프로퍼티 K의 집합을 선택해서 타입을 구성하는 요소이다.

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

type TodoPreview = Pick<Todo, 'title' | 'completed'>; 
// Todo 안에서 title 과 completed 만을 속성으로 가지는 타입이다 

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

• Todo의 부분집합을 만드는데 이 요소들을 가져간다라고 생각하면 된다.

Omit<T,K>

• T에서 모든 프로퍼티를 선택한 다음 K를 제거한 타입을 구성한다.
• Pick 과 반대

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

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

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

 

Exclude<T,U>

• T에서 U에 할당할 수 있는 모든 속성을 제외한 타입을 구성하는 역할이다

type T0 = Exclude<"a" | "b" | "c", "a">;  // "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">;  // "c"
type T2 = Exclude<string | number | (() => void), Function>;  // string | number

 

Extract<T,U>

• T에서 U에 할당할 수 있는 모든 속성을 추출해서 타입을 구성한다.

type T0 = Extract<"a" | "b" | "c", "a" | "f">;  // "a"
type T1 = Extract<string | number | (() => void), Function>;  // () => void