본문 바로가기

Front-End: Web/TypeScript

[TypeScript] Partial & Required / Record / Exclude & Extract

반응형

Partial<T>

  • 제네릭 타입 T에 대해 기존의 타입은 유지하되, 모든 프로퍼티들을 Optional하게 변경함
type Partial<T> = {
	[P in keyof T]?: T[P];
}

 

예제

필수 타입과 Optional 타입을 구분해서 사용해야 하는 경우에 응용하면 좋을 것 같다.

type UserInformation = RequiredUserInformation & Partial<OptionalUserInformation>;

interface RequiredUserInformation {
  id: string;
  uid: string;
  name: string;
}

interface OptionalUserInformation {
  age: number;
  profile: string;
  phone: string;
}

 

 

Required<T>

  • Partial과 반대되는 개념
  • 제네릭 타입 T에 대해 기존의 타입은 유지하되, 모든 프로퍼티에 대해 Required 속성으로 만들어줌
type Required<T> = {
  [P in keyof T]-?: T[P];
};

여기서 마이너스 연산자는, Optional을 제거해준다는 의미의 연산자임.

 

예제

interface OptionalTodo {
  id: string;
  text?: string;
  isDone?: boolean;
}

type Todo1 = Required<OptionalTodo>;

interface Todo2 {
  id: string;
  text: string;
  isDone: boolean;
} // 타입 Todo1과 타입 Todo2 는 동일한 타입이다.

 

 

Record<K, T>

  • 여러 Key에 동일한 interface를 지정하고 싶을 때 사용
  • K: key값의 타입
  • T: 값의 타입으로 갖는 타입
type Record<K, T> = {
	[P in K]: T;
}

 

예제

type IFieldValue = {
  name: string;
  value: number;
};

type IFormName = 'event' | 'point';

const x: Record<IFormName, IFieldValue> = {
  event: {
    name: 'foo',
    value: 0,
  },
  point: {
    name: 'foo',
    value: 30,
  }
}

 

 

Exclude<T, U>

  • T 타입에서 U 타입과 겹치는 타입을 뺌(exclude)
  • 첫 번째 제너릭 타입 T 중, 두 번째 제너릭 타입 U와 겹치는 타입을 제외한 타입을 반환
  • 타입 T가 타입 U를 상속하거나 동일 타입이라면 무시(never)하고, 아닐 경우 타입을 반환함
type Exclude<T, U> = T extends U ? never : T;

 

예제

type OnlyNumber = Exclude<string | number, string>;
// type OnlyNumber = number;

 

 

Extract<T, U>

  • T 타입에서 U 타입과 겹치는 타입만을 추출함(extract)
  • 첫 번째 재너릭 타입 T에 대해 제너릭 타입 U 중, 할당 가능한 타입을 할당함
  • Exclude와 반대되는 개념
type Extract<T, U> = T extends U ? T : never;

 

예제

type Event = {
	id: string;
	pw: string;
}

type Point = {
	target: string;
	amount: number;
}

type PointInfo = Extract<Event | Point, Point>
// PointInfo = Point

내가 원하는 프로퍼티로 구성된 타입이 이미 있을 때 사용할 수 있다.

 

 

 

 

반응형