[TS] 타입스크립트의 유용한 유틸리티 타입

타입스크립트를 사용하다 보면 여러 타입 변환이나 특정 속성만을 추출하고 싶은 상황이 자주 생깁니다. 이때 유용하게 활용할 수 있는 것이 타입스크립트가 제공하는 유틸리티 타입입니다. 

 

목차

1. Record 타입

2. Pick 타입

3. Partial 타입

4. Omit 타입

5. Readonly 타입

6. Required 타입

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. Record 타입

Record 타입은 키(key)와 값(value)의 타입을 정의하여 객체 타입을 생성할 때 사용됩니다. 특정 키에 해당하는 값 타입을 일괄적으로 설정하고 싶을 때 유용합니다.

Record<Keys, Type>
// Keys: 객체의 키 타입을 지정 (key의 union 타입도 가능)
// Type: 객체 값의 타입을 지정

type UserRoles = 'admin' | 'editor' | 'viewer';

type Permissions = Record<UserRoles, boolean>;

const permissions: Permissions = {
  admin: true,
  editor: false,
  viewer: true,
};

위 예시에서 Permissions 타입은 UserRoles 키와 boolean 타입의 값을 가진 객체를 생성합니다.

2. Pick 타입

Pick은 기존 타입에서 필요한 속성만 골라 새로운 타입을 생성할 수 있게 해줍니다. 대규모 타입 중 특정 속성만 선택해 타입을 구성할 때 유용하게 사용할 수 있습니다.

Pick<Type, Keys>
// Type: 참조할 기존 타입
// Keys: 선택할 속성의 키를 지정

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

type UserBasicInfo = Pick<User, 'id' | 'name'>;

const user: UserBasicInfo = {
  id: 1,
  name: 'Alice',
};

Pick을 사용하여 User 인터페이스에서 id와 name만 선택한 UserBasicInfo 타입을 만들 수 있습니다.

 

위 코드에서 'id' | 'name'이 Union 타입처럼 보일 수 있지만, 두속성은 모두 필수입니다. 그 이유는 Pick이 기존 타입에서 지정한 속성들을 그래도 재사용하기 때문입니다. User 인터페이스에서 id와 name이 ?로 옵셔널 값일 경우가 아니라면 두 값 모두 필수입니다.

const user: UserBasicInfo = {
  id: 1 // 'name' 속성이 '{ id: number; }' 형식에 없지만 'UserBasicInfo' 형식에서 필수입니다.
};

 

3. Partial 타입

Partial 타입은 모든 속성을 선택적으로 만듭니다. 주로 일부 데이터만 업데이트하거나 선택적으로 값을 지정할 때 유용합니다.

Partial<Type>

interface User {
  name: string;
  job: string;
  age: number;
}

const person: Partial<User> = {
  name: "Kim",
  // Partial 타입은 모든 속성이 선택적입니다.
};

 

위 예시에서는 Partial<User> 타입을 사용하여 User의 일부 속성만 선택적으로 사용할 수 있게 했습니다.

 

4. Omit 타입

Omit은 특정 속성을 제외하여 새로운 타입을 만들고자 할 때 사용합니다. Pick과 반대되는 개념으로, 제외하고 싶은 속성을 지정할 수 있습니다.

Omit<Type, Keys>
// Type: 참조할 기존 타입
// Keys: 제외할 속성의 키를 지정

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

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

const user: UserWithoutEmail = {
  id: 1,
  name: 'Alice',
  age: 25,
};

 

Omit을 사용하여 User 인터페이스에서 email 속성을 제외한 타입을 만들었습니다.

 

5. Readonly 타입

Readonly는 타입의 모든 속성을 읽기 전용으로 설정합니다. 데이터가 수정되지 않게 하고 싶은 경우 유용하게 사용할 수 있습니다.

Readonly<Type>

interface Point {
  x: number;
  y: number;
}

const origin: Readonly<Point> = { x: 0, y: 0 };

// origin.x = 5; // 오류 발생 (읽기 전용 속성)

 

위 예시에서 Readonly를 사용해 origin 객체의 속성을 읽기 전용으로 설정했기 때문에 수정이 불가능합니다.

 

6. Required 타입

Required<Type>

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

const user1: Required<User> = {
  id: 1,
  name: "Kim",
  age: 25,
};

const user2: Required<User> = {
  id: 2,
  name: "Kang",
  // 'age' 속성이 '{ id: number; name: string; }' 형식에 없지만 'Required<User>' 형식에서 필수입니다.
};

 

Required<User>를 사용해 User의 모든 속성을 필수로 만들어 user1에서 모든 속성을 정의하게 했습니다.

 

 

타입스크립트는 Record, Pick, Partial, Omit, Readonly, Required 등의 유틸리티 타입을 제공해 개발자가 타입을 더 유연하게 다룰 수 있도록 돕습니다. 각 타입의 특성을 이해하고 필요에 따라 적절하게 활용하면 타입스크립트의 강력한 타입 시스템을 최대한 활용할 수 있습니다.

 

Record : 특정 키에 해당하는 값 타입을 일괄적으로 설정하고 싶을 때 사용

Pick : 대규모 타입 중 특정 속성만 선택해 타입을 구성할 때 사용

Partial : 일부 데이터만 업데이트하거나 선택적으로 값을 지정할 때 사용

Omit : Pick과 반대되는 개념으로, 제외하고 싶은 속성을 지정할 때 사용

Readonly : 데이터가 수정되지 않게 하고 싶은 경우 사용

Required : 모든 선택적 속성을 필수 속성으로 바꾸고 싶은 경우 사용

 

 

[TS] 타입스크립트 주요 기능과 기본 문법 소개

 

[TS] 타입스크립트 : 자바스크립트에 타입을 더하다