[TS] 타입스크립트 맵드 타입 / 유틸리티 타입 / Enum

타입스크립트의 맵드 타입(Mapped Types)은 기존 타입을 새로운 타입으로 변환해주는 문법이다. 자바스크립트의 map 배열 메서드를 타입에 적용한 것과 비슷하다(그래서 이름이 Mapped Types다).

 

맵드 타입 개념 톺아보기

---

아래 디바이스 브랜드를 나타내는 유니온 타입 Devices가 있다. 여기에 각 디바이스 브랜드의 가격 정보가 포함된 객체를 만들고 싶을 때 맵드 타입을 활용할 수 있다.

type Devices = 'APPLE' | 'OPPO' | 'XIAOMI'; // 디바이스 브랜드를 나타내는 유니온 타입
type DevicePrices = { [P in Devices]: number }; // 디바이스 브랜드 타입을 순회해서 key로 정의되는 맵드 타입

const deviceInfo: DevicePrices = {
  APPLE: 1_200_000, // 언더스코어 "_"를 이용해 숫자를 구분하는 Numeric Seperators 문법
  OPPO: 800_000,
  XIAOMI: 700_000,
};

 

[P in Devices] 코드는 Devices 타입의 각 문자열을 순회한 후 number 타입을 값으로 가지는 객체의 키로 정의된다. 자바스크립트의 for in 문법과 비슷하다. 키 부분에 유니온 타입을 직접 명시할 수도 있다.

type DevicePrices = { [P in 'APPLE' | 'OPPO' | 'XIAOMI']: number };

 

맵드 타입을 사용하지 않았다면 아래처럼 각 브랜드마다 number 타입을 일일이 정의해야 한다.

type DevicePrices = {
  APPLE: number;
  OPPO: number;
  XIAOMI: number;
};

 

맵드 타입 예제

---

서브셋 타입

아래 Subset 맵드 타입은 인터페이스 같은 객체를 정의하는 타입을 받아, 해당 객체의 타입을 부분적으로 사용할 수 있는 타입으로 변환해준다(부분 집합을 만족하는 타입으로 변환).

type Subset<T> = { [P in keyof T]?: T[P] };
// keyof T : T로 받은 객체의 모든 속성명을 유니온 타입으로 나열
// [P in keyof T]?... : T 객체의 속성 값 자체를 타입으로 만듦. 물음표를 붙였으므로 선택적 속성

interface Student {
  name: string;
  age: number;
}

const ageOnly: Subset<Student> = { age: 18 }; // OK
const nameOnly: Subset<Student> = { name: 'Smith' }; // OK
const smith: Subset<Student> = { name: 'Smith', age: 18 }; // OK
const empty: Subset<Student> = {}; // OK (선택 속성이므로)

 

Boolean 타입으로 변환

기존 인터페이스의 모든 속성을 Boolean 타입으로 변환해주는 맵드 타입을 만들 수 있다. 위에서 살펴봤던 서브셋(부분 집합) 타입으로 변환하는 맵드 타입과 같은 원리다.

type MakeBoolean<T> = { [P in keyof T]?: boolean };
// keyof T : T로 받은 객체의 모든 속성명을 유니온 타입으로 나열
// [P in keyof T]?... : T의 모든 속성 값을 Boolean 타입으로 만듦. 물음표를 붙였으므로 선택적 속성

interface Student {
  name: string;
  age: number;
}

const studentMap: MakeBoolean<Student> = {
  name: true, // OK
  age: undefined, // OK (선택 속성이므로)
};

studentMap.name = 3; // Error (boolean 타입이 아니므로)

 

유틸리티 타입

---

타입 재활용 — Partial

Partial<Type>

 

💡 Readonly, Partial, Required, Pick, Omit 등은 타입스크립트에 이미 내장되어 있는 유틸리티 타입이다. 더 많은 유틸리티 타입은 공식 문서 참고.

 

아래 사용자의 프로필 정보에 어떤 필드가 있는지 정의되어 있는 Profile 타입이 있다.

interface Profile {
  id: number;
  username: string;
  email: string;
}

 

만약 사용자 프로필 정보를 수정한다면 각 필드를 부분적으로 수정하는게 일반적이다. 하지만 기존 Profile 타입은 모든 필드가 필수 속성이다. 때문에 Profile의 각 필드를 선택적 속성으로 가지는 프로필 정보 업데이트 타입을 따로 정의해야 된다. 이때 맵드 타입을 이용하면 기존 Profile 타입을 재활용할 수 있다.

type ProfileUpdate = {
  [P in keyof Profile]?: Profile[P];
  // [P in 'id' | 'username' | 'email']?... 와 동일
};

 

맵드 타입으로 구현된 내장 유틸리티 타입인 Partial을 이용하면 더 간결하게 작성할 수 있다. Partial은 넘겨 받은 타입의 모든 프로퍼티를 선택적(Optional)으로 설정한 타입을 생성한다. 반대로 Required는 모든 프로퍼티를 필수로 설정한 타입을 생성한다.

type ProfileUpdate = Partial<Profile>;
// Partial 내부 구현 : type Partial<T> = { [P in keyof T]?: T[P] };
// ProfileUpdate : { id?: number, username?: string, email?: string }

 

만약 맵드 타입을 사용하지 않았다면 Profile 타입이 가지고 있는 각 필드를 중복해서 작성해야 된다.

// 맵드 타입을 사용하지 않았을 때 1
interface ProfileUpdate {
  id?: number;
  username?: string;
  email?: string;
}

// 맵드 타입을 사용하지 않았을 때 2
type ProfileUpdate = {
  id?: Profile['id']; // number
  username?: Profile['username']; // string
  email?: Profile['email']; // string
};

 

읽기전용 타입으로 변환 — Readonly

Readonly<Type>

 

맵드 타입을 이용해 기존 타입(T)을 읽기 전용(Readonly)으로 만들 수 있다. Readonly 타입은 타입스크립트에 이미 내장되어 있으므로(유틸리티 타입) 따로 정의하지 않고 바로 사용할 수 있다.

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

type Readonly<T> = { readonly [P in keyof T]: T[P] }; // TS 내장 유틸리티 타입
type T1 = Readonly<Person>;
// T1 : { readonly name: string, readonly age: number }

 

객체 타입에서 일부 속성만 선택 — Pick

Pick<Type, Keys>

 

💡 extends 키워드는 인터페이스 / 타입을 확장할 때 사용한다. 예를들어 K extends T 코드는 제네릭 K를 제네릭 T의 하위 타입으로 인식하도록 한다. 따라서 T가 가진 속성을 K도 가지게 된다.

 

맵드 타입을 이용해 특정 타입(T)의 일부 속성(K)만 선택해서 새로운 타입으로 만들 수 있다. Pick 타입 역시 타입스크립트에 이미 내장되어 있는 유틸리티 타입이다.

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

type Pick<T, K extends keyof T> = { [P in K]: T[P] }; // TS 내장 유틸리티 타입
type T1 = Pick<Person, 'name' | 'age'>;
// T1 : {name: string, age: number}

 

제네릭 T에 Person 인터페이스를 넘기므로 keyof T는 'name' | 'age' | 'language' 가 된다. 때문에 제네릭 K에 넘기는 값은 keyof T의 일부 혹은 전부여야 한다.

 

💡 Pick 과 반대로 특정 타입의 일부 속성만 제거한 타입을 정의할 수 있는 Omit 유틸리티 타입도 있다. 사용법은 Pick 과 동일하다.

 

유니온 타입에서 특정 타입만 추출 — Extract

Extract<Type, Union>

 

Extract<T, U> 유틸리티 타입은 T 타입에서 U에 명시한 타입을 추출한다. Extract는 주로 유니온 타입에서 특정 타입을 추출할 때 사용한다. U에 유니온 타입을 사용해 여러 속성을 한 번에 추출할 수도 있다.

type UserKey = 'name' | 'age' | 'address';
type UserName = Extract<UserKey, 'name'>; // 'name'
type UserNameAge = Extract<UserKey, 'name' | 'age'>; // 'name' | 'age'

 

객체 타입에서 특정 속성 제외 — Omit

Omit<Type, Keys>

 

Omit<T, K> 유틸리티 타입은 T 타입에서 K에 명시한 속성을 제거한 새로운 타입을 생성한다. Omit은 주로 객체 타입에서 특정 속성을 제외할 때 사용한다. K에 유니온 타입을 사용해 여러 속성을 제거할 수도 있다.

type User = { name: string; age: number; address: string };

type UserWithoutAddress = Omit<User, 'address'>;
// { name: string; age: number; }

type UserName = Omit<User, 'age' | 'address'>;
// { name: string; }

 

유니온 타입에서 특정 타입 제외 — Exclude

Exclude<Type, ExcludedUnion>

 

Exclude<T, U> 유틸리티 타입은 T 타입에서 U에 명시한 타입을 제거한 새로운 유니온 타입을 생성한다. Exclude은 주로 유니온 타입에서 특정 타입을 제외할 때 사용한다. U에 유니온 타입을 사용해 여러 속성을 제거할 수도 있다.

type UserKey = 'name' | 'age' | 'address';
type UserKeyWithoutAddress = Exclude<UserKey, 'address'>; // 'name' | 'age'
type UserName = Exclude<UserKey, 'address' | 'age'>; // 'name'

 

속성값을 다른 타입으로 지정 — Record

Record<Keys, Type>

 

맵드 타입을 이용해 특정 속성(K)의 값이 다른 타입(T)으로 지정된 타입을 만들 수 있다. Record 타입 역시 타입스크립트에 이미 내장되어 있는 유틸리티 타입이다. [P in K]: T 코드를 통해 K 속성('Smith' | 'John')으로 구성된 인터페이스를 만들고, K 속성 값의 타입은 T(Person 타입)가 된다.

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

type Record<K extends keyof any, T> = { [P in K]: T }; // TS 내장 유틸리티 타입
type T1 = Record<'Smith' | 'John', Person>;
// T1 : {Smith: Person, John: Person} 
// Smith, John 속성의 값은 Person 인터페이스 구조의 객체여야 함

 

객체 속성을 선택적으로 변경 — Optional

Optional<Type, Keys>

 

Optional은 T 타입에서 K 프로퍼티를 선택적으로 만드는 커스텀 유틸리티 타입이다. 먼저, ①제네릭으로 받은 K 프로퍼티를 제외한 타입을 생성하고(Omit<T, K>), ②제외하지 않은 나머지(Pick<T, K>) 프로퍼티를 ③선택적으로 만든 후(Partial) ④이 둘 타입을 & 연산자로 다시 합치는 방식으로 구현됐다. Optional은 타입스크립트에선 제공하지 않는 커스텀 유틸리티 타입이다.

type Optional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
// K -> 'age'
// Omit<T, K> -> { name: string }
// Pick<T, K> -> { age: number }
// Partial<...> -> { age?: number }

type Person = { name: string, age: number };
type OnlyName = Optional<Person, 'age'> // { name: string, age?: number }

 

Enum 이넘 활용

---

💡 이넘은 본질적으로 객체이므로 런타임에선 객체로 동작한다. 반면, 타입스크립트(타입 문맥)에선 이넘의 모든 멤버 값을 유니온 타입으로 취급한다.

 

이넘은 명확한 의미를 지닌 상수 값을 그룹화하여 코드의 가독성과 안정성을 높여준다. 또한 타입 / 값 모두 활용할 수 있어서 효율적인 코드 작성에 유용하다.

 

실수 방지

스마트폰 브랜드 리스트를 나열한 Brands 이넘 타입이 있고, 이넘 타입에 있는 모든 브랜드의 가격을 (객체 형식으로)정의해야 된다고 가정해본다.

enum Brands {
  APPLE,  // 0
  OPPO,   // 1
  XIAOMI, // 2
}

 

각 브랜드의 가격을 표시하기 위해 Brands 이넘 타입을 참조하여 BRAND_PRICE 객체를 정의했다. 실수로 샤오미 브랜드가(Brands.XIAOMI) 누락됐지만 따로 타입을 지정하지 않았으므로 에러가 발생하지 않는다. 만약 Brands 이넘 타입에 나열된 모든 브랜드의 가격을 명시하도록 강제하고 싶다면?

const BRAND_PRICE = {
  [Brands.APPLE]: 100_000_000,
  [Brands.OPPO]: 80_000_000,
  // Brands.XIAOMI 속성 누락
};

 

BRAND_PRICE 객체의 타입을 [key in Brands]... 맵드 타입으로 지정하면 된다. 그럼 Brands 이넘 타입의 모든 속성을 정의해야만 에러가 발생하지 않는다. 아래 코드에선 Brands.XIAOMI 속성이 누락됐으므로 컴파일 에러가 발생한다. 이처럼 맵드 타입을 이용하면 객체의 특정 속성이 누락되는 실수를 방지할 수 있다.

// Error! XIAOMI 속성이 없으므로 에러 발생
const BRAND_PRICE: { [key in Brands]: number } = {
  [Brands.APPLE]: 100_000_000,
  [Brands.OPPO]: 80_000_000,
  // Brands.XIAOMI 속성 누락
};

 

이넘 특징

이넘 멤버에 값을 명시적으로 지정하지 않으면 0부터 증가하는 숫자를 자동으로 할당한다. 숫자 기반의 이넘은 런타임 때 key / value 정보를 모두 저장한다. 따라서 key / value(숫자)를 사용해서 접근할 수 있다.

enum Brands {
  APPLE,  // 0
  OPPO,   // 1
  XIAOMI, // 2
}

console.log(Brands); // { '0': 'APPLE', '1': 'OPPO', '2': 'XIAOMI', APPLE: 0, OPPO: 1, XIAOMI: 2 }

console.log(Object.keys(Brands)); // ['0', '1', '2', 'APPLE', 'OPPO', 'XIAOMI']
console.log(Object.values(Brands)); // ['APPLE', 'OPPO', 'XIAOMI', 0, 1, 2]

console.log(Brands[0]); // 'APPLE'
console.log(Brands.APPLE); // 0

 

이넘 각 멤버에 문자열 값을 할당하면 런타임에선 해당 문자열 값만 가진다. 숫자 이넘처럼 key / value 값을 이중으로 저장하지 않는다.

enum Brands {
  APPLE = '애플',
  OPPO = '오포',
  XIAOMI = '샤오미',
}

console.log(Brands); // { APPLE: '애플', OPPO: '오포', XIAOMI: '샤오미' }

console.log(Object.keys(Brands)); // ['APPLE', 'OPPO', 'XIAOMI']
console.log(Object.values(Brands)); // ['애플', '오포', '샤오미']

console.log(Brands.APPLE); // '애플'
console.log(Brands[0]); // Error! TS7053: ...

 

타입스크립트(타입 문맥)에서 이넘을 사용하면 모든 멤버 값을 유니온 타입으로 취급한다. 따라서 Record key 슬롯에 사용한 Colors 타입은 '빨강'|'파랑'|'녹색' 이 된다.

enum Colors {
  RED = '빨강',
  BLUE = '파랑',
  GREEN = '녹색',
}

type ColorType = Record<Colors, number>;
// { 빨강: number, 파랑: number, 녹색: number }

 

변수, 함수 파라미터 등의 타입을 문자열 이넘으로 지정하면 해당 이넘의 멤버만 허용한다. 즉, 이넘 멤버의 값이 문자열일 때 이넘 멤버가 아닌 일반 문자열을 사용하면 에러가 발생한다(숫자형 이넘에서 일반 숫자는 가능).

enum Colors {
  RED = '빨강',
  BLUE = '파랑',
  GREEN = '녹색',
}

// 파라미터 타입 : Colors.RED | Colors.BLUE | Colors.GREEN
function paintWall(color: Colors) {
  console.log(`Painting the wall with ${color} color.`);
}

paintWall(Colors.RED); // 'Painting the wall with 빨강 color.'
paintWall('RED'); // Error! TS2345: Argument of type 'RED' is not assignable ...

 

번외 — 객체의 Key / Value로 구성된 타입 만들기

---

아래 각 이름(fox, chick, ...)에 해당하는 색상값을 나타내는 colors 객체가 있다.

const colors = {
  fox: '#FFC7CC',
  chick: '#FFD784',
  alien: '#B2E9E3',
  devil: '#E1BCEA',
} as const; // 객체에 할당된 리터럴 값으로 프로퍼티 타입 추론

 

맵드 타입과 keyof 키워드를 이용해 객체의 value만 추출해서 타입으로 만들 수 있다. 객체 key는 유틸리티 타입 없이 keyof typeof 객체 코드로 바로 추출할 수 있다.

type ValueOf<T> = T[keyof T]; // T로 받은 객체의 모든 값을 유니온 타입으로 나열

// key만 추출해서 타입으로 설정 / Object.keys 반환값에 사용
type ColorKey = keyof typeof colors; // 'fox' | 'chick' | 'alien' | 'devil'

// value만 추출해서 타입으로 설정 / Object.values 반환값에 사용
type ColorValue = ValueOf<typeof colors>; // '#FFC7CC' | '#FFD784' | '#B2E9E3' | '#E1BCEA'

// 추출한 key/value를 tuple 타입으로 설정 / Object.entries 반환값에 사용
type ColorEntries = Array<[ColorKey, ColorValue]>;

 

Object.keys|values는 타입 추론을 통해 따로 타입을 지정하지 않아도 되는 경우가 많다. 반면 타입 추론이 잘 안되는 Object.entries는 아래처럼 유틸리티 타입으로 만들어두고 쓰면 편하다.

// 코드 참고 StackOverFlow
type Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T][];
const colorEntries = Object.entries(colors) as Entries<typeof colors>;

 

Entries에 넘긴 타입이 { a: number, b: string } 이라고 가정해보자. 먼저 각 키와, 해당 키의 값으로 구성된 튜플을 생성하고, 이를 맵드 타입으로 구성한다.

// { [K in keyof T]: [K, T[K]] } 부분에서 생성한 타입
{
  a: ['a', number];
  b: ['b', string];
}

 

생성한 맵드 타입을 인덱싱하여 각 키에 대응하는 튜플 타입을 참조하고, 모든 키(a, b)에 대한 튜플을 유니온 타입으로 결합한다.

// [keyof T] 부분에서 생성한 타입
['a', number] | ['b', string];

 

마지막으로 이 유니온 타입의 요소들을 모두 포함할 수 있는 배열 타입을 생성한다.

// [] 부분에서 생성한 타입
(['a', number] | ['b', string])[]

 

레퍼런스

---

• 맵드 타입 | 타입스크립트 핸드북
• [TypeScript] 맵드 타입
• Typescript 유틸리티 클래스 파헤치기
• Documentation - Utility Types  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요