[TypeScript] 타입스크립트 유틸리티 타입 Omit 알아보기

Intro

안녕하세요. 이번 시간에는 타입스크립트 유틸리티 타입인 Omit에 대해 알아보겠습니다.

 

참고로 유틸리티 타입 (Utility Types)은 TypeScript에서 기존 타입을 변형하거나 확장하여 새로운 타입을 쉽게 생성할 수 있도록 도와주는 내장 타입들입니다. TypeScript는 강력한 타입 시스템을 제공하는 동시에, 복잡한 타입 정의를 단순화하기 위해 여러 가지 유틸리티 타입을 제공합니다. 이 타입들은 특정한 작업(예: 선택적 필드로 변환, 특정 속성 제거 등)을 수행하기 위한 미리 정의된 템플릿처럼 작동합니다.

 

Omit 기본 문법

Omit은 TypeScript에서 제공하는 유틸리티 타입 중 하나로, 특정 객체 타입에서 지정된 키를 제거한 새로운 타입을 생성하는 데 사용됩니다. 이 유틸리티 타입은 객체의 일부 프로퍼티를 제외한 나머지로 새로운 타입을 정의할 때 매우 유용합니다.

Omit<Type, Keys>

• Type: 기존 객체 타입
• Keys: 제외하고자 하는 프로퍼티(키)들의 집합. 문자열 리터럴이나 유니온 타입으로 지정합니다.

 

Omit 동작 방식

Omit은 기본적으로 다음과 같이 구현되어 있습니다. Omit은 기존 타입에서 특정 키를 제외한 새로운 타입을 반환합니다.

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

• keyof T: T 타입의 모든 키를 가져옵니다. 
• Exclude<keyof T, K>: K에 해당하는 키를 제외한 나머지 키를 가져옵니다. 
• Pick<T, ...>: 특정 키들만 선택하여 새로운 타입을 만듭니다.

 

Omit Example

1. 간단한 사용

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

type UserWithoutEmail = Omit<User, "email">;

const user: UserWithoutEmail = {
  id: 1,
  name: "John",
  age: 30,
};

 

2. 여러 키 제외하기

type UserWithoutSensitiveInfo = Omit<User, "email" | "age">;

const user2: UserWithoutSensitiveInfo = {
  id: 2,
  name: "Alice",
};

 

실용적인 활용 사례

1. API 응답 필터링: 민감한 데이터를 제외한 객체 타입을 정의할 때 사용

type SafeUser = Omit<User, "email" | "password">;

 

2. 컴포넌트 Props 관리: 특정 컴포넌트에서 일부 Props를 제외한 새로운 Props 타입 생성

interface ButtonProps {
  onClick: () => void;
  color: string;
  disabled: boolean;
}

type ButtonWithoutOnClick = Omit<ButtonProps, "onClick">;

 

3. Redux 액션 데이터에서 불필요한 필드 제거

type ActionPayload = Omit<User, "id">;

 

 

Omit은 기존 타입에서 특정 키를 제거하여 새로운 타입을 정의하는 데 최적화된 유틸리티 타입입니다. 데이터 필터링, 타입 관리, Props 정의 등 다양한 상황에서 활용될 수 있어 TypeScript 개발에서 매우 유용합니다 :)