유틸리티 타입

1. 유틸리티 타입이란?

유틸리티 타입은 이미 정의된 타입을 변환하여 재사용하고 싶을 때 유용한 타입입니다.

유틸리티 타입은 타입스크립트에 내장되어 있기 때문에 설정 파일의 compilerOptions의 lib 속성만 변경해 주면 바로 사용할 수 있습니다.

{
	"compilerOptions": {
      "lib": ["ESNext"]
    }
}

유틸리티 타입에 대해 알아보았으니 유틸리티 타입의 종류에 대해 알아봅시다.

2. Partial

Partial<Type>

Type 집합의 모든 프로퍼티를 선택적으로 사용할 수 있습니다.

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

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

const todo1 = {
  title: "Study ts",
  description: "utility type"
};

const todo2 = updateTodo(todo1, {
  description: "mapped type"
});

• Todo 인터페이스를 선언하고 속성으로 title, description을 추가하였습니다.
• updateTodo 함수는 Todo 타입의 todo와 Partial<Todo> 타입인 fieldsToUpdate를 인자로 받아 todo에 fieldsToUpdate를 추가합니다.
  • Partial은 Todo에 있는 속성들을 선택적으로 사용할 수 있습니다. 따라서 Partial<Todo>는 다음과 같이 정의된 것과 같습니다.

    type Todo = {
      title?: string;
      description?: string;
    }

📝 Partial은 HTTP PUT처럼 데이터를 수정하는 REST API를 전송할 때 자주 사용되는 타입입니다.

3. Record

Record<Keys, Type>

Keys를 객체의 키로 Type을 객체의 값으로 하는 타입을 생성합니다. 이 유틸리티는 타입의 프로퍼티를 다른 타입에 매핑 시키는데 사용될 수 있습니다.

interface PageInfo {
  title: string;
}

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

type nav: Record<Page, PageInfo>;

• PageInfo 인터페이스를 선언하고 title 속성을 추가하였습니다.
• Page 타입에는 home, about, contact를 유니언 타입으로 지정하였습니다.
• nav 타입은 Record로 Page를 객체의 키로 PageInfo를 객체의 값으로 한 새 타입을 생성합니다. 따라서 nav는 다음과 같이 정의된 것과 같습니다.

  type nav = {
    home: PageInfo;
    about: PageInfo;
    contact: PageInfo;
  }

4. Pick

Pick<Type, Keys>

Type에서 프로퍼티 Keys의 집합을 선택해 타입을 생성합니다.

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

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

const todo: TodoPreview = {
  title: "Study ts",
  completed: true,
};

todo;    // const todo: TodoPreview

• Todo 인터페이스를 선언하고 속성으로 title, description, completed를 추가하였습니다.
• TodoPreview 타입은 Pick을 사용해 Todo 인터페이스에서 title과 completed 속성을 추출하였습니다.
  • 따라서 TodoPreview는 다음과 같이 정의된 것과 같습니다.

    type TodoPreview = {
      title: string;
      completed: boolean;
    }

5. Omit

Omit<Type, Keys>

Type에서 모든 프로퍼티를 선택하고 Keys를 제거한 타입을 생성합니다.

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

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

const todo: TodoPreview = {
  title: "Study ts",
  completed: true,
};

todo;    // const todo: TodoPreview

• Todo 인터페이스를 선언하고 속성으로 title, description, completed를 추가하였습니다.
• TodoPreview 타입은 Omit을 사용해 Todo 인터페이스에서 description을 제외한 모든 속성을 선택하였습니다.
  • 따라서 TodoPreview는 다음과 같이 정의된 것과 같습니다.

    type TodoPreview = {
      title: string;
      completed: boolean;
    }

• 위의 예제에서 본 것처럼 Pick과 Omit으로 타입을 똑같이 추출할 수 있습니다. 이때는 가급적 코드를 줄일 수 있는 유틸리티 타입을 선택하는 것이 유리합니다.

6. Exclude

Exclude<Type, ExcludedUnion>

ExcludedUnion에 할당한 유니언 타입을 Type에서 제외하여 타입을 생성합니다.

type Languages = 'C' | 'Java' | 'TypeScript' | 'React';
type TrueLanguages = Exclude<Languages, 'React'>;

• Languages 타입에는 C, Java, TypeScript, React를 유니언 타입으로 선언하였습니다.
• TrueLanguages는 Exclude로 Languages 타입에서 React를 제외하였습니다. 따라서 TrueLanguages는 다음과 같이 정의된 것과 같습니다.

  type TrueLanguages = 'C' | 'Java' | 'TypeScript';

참고
📖 쉽게 시작하는 타입스크립트
🔗 https://www.typescriptlang.org/ko/docs/handbook/utility-types.html