[Typescript] Section 11. 유틸리티 타입

유틸리티 타입 이란

타입스크립트에서는 유틸리티 타입이라는 것을 사용하여 타입을 쉽게 정의할 수 있습니다. 유틸리티 타입은 다양한 타입을 조작하고 결합하는 데 사용됩니다.

 

Pick <Type, Keys>

Pick <Type, Keys>은 주어진 Type에서 지정된 속성만 선택하여 새로운 Type을 만듭니다.

interface Person {
	name: string;
	age: number;
	address: string;
}

// bad
type PersonNameAndAddress = {
	name: string;
	address: string;	
}

// good
type PersonNameAndAddress = Pick<Person, "name" | "address">;

const person: PersonNameAndAddress = {
	name: "John",
	address: "123 Main St."
};

Omit <Type, Keys>

Omit <Type, Keys>은 주어진 Type에서 지정된 속성을 제외한 모든 속성을 선택하여 새로운 Type을 만듭니다.

interface Person {
  name: string;
  age: number;
  address: string;
}

type PersonWithoutAge = Omit<Person, "age">;

const person: PersonWithoutAge = {
  name: "John",
  address: "123 Main St."
};

Partial <Type>

Partial <Type>은 주어진 Type의 모든 속성을 선택적으로 만듭니다. 이 유틸리티 타입은 주로 객체를 복사하고 일부 속성을 업데이트하는 데 사용됩니다.

interface Person {
  name: string;
  age: number;
  address: string;
}

//bad
type PartialPerson ={
  name?: string;
  age?: number;
  address?: string;
}

//good
type PartialPerson = Partial<Person>;

const person: PartialPerson = {
  name: "John"
};

Partial 직접 구현해 보기

interface UserProfile {
  name: string;
  age: number;
  address: string;
}

// #1 노가다로 만들어보기
type UserProfileUpdate = {
  name?: UserProfile['name'];
  age?: UserProfile['age'];
  address?: UserProfile['address'];
}

// #2 맵드 타입으로 만들어보기(Mapped Type)
type UserProfileUpdate = {
	[p in 'name'|'age'|'address']?: UserProfile[p]
}

// #3 2번을 더 줄여보기
type UserProfileUpdate = {
	[p in keyof UserProfile]?: UserProfile[p]
}

// #4 제네릭으로 변환 해보기
type LikePartal<T> = {
	[p in keyof T]?: T[p]
}

// 결과
type UserProfileUpdate = LikePartal<UserProfile>;

const person: UserProfileUpdate = {
  name: "John"
};

Required <Type>

Required <Type>은 주어진 Type의 모든 속성을 필수 속성으로 만듭니다. 이 유틸리티 타입은 주로 객체를 검증하는 데 사용됩니다.

interface Person {
  name?: string;
  age?: number;
  address?: string;
}

type RequiredPerson = Required<Person>;

const person: RequiredPerson = {
  name: "John",
  age: 30,
  address: "123 Main St."
};

Readonly <Type>

Readonly <Type>은 주어진 Type의 모든 속성을 읽기 전용으로 만듭니다. 이 유틸리티 타입은 주로 불변성을 유지해야 하는 객체를 생성하는 데 사용됩니다.

interface Person {
   name: string;
   age: number;
   address: string;
}

const person: Readonly<Person> = {
  name: "John",
  age: 30,
  address: "123 Main St."
};

// person.name = "Jane"; // Error: Cannot assign to 'name' because it is a read-only property.

Record <Keys, Type>

Record<Keys, Type>은 주어진 Keys와 Type으로 맵을 만듭니다.

type Weekdays = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday";

interface Schedule {
  [key: string]: string;
}

type WeeklySchedule = Record<Weekdays, Schedule>;

const schedule: WeeklySchedule = {
  Monday: {
    "9AM": "Meeting with client A",
    "2PM": "Meeting with client B"
  },
  Tuesday: {
    "10AM": "Meeting with client C",
    "3PM": "Meeting with client D"
  },
  // ...
};