TypeScript의 객체 타입 지정에 편리한 내장 Record 유틸리티 타입

TypeScript에서는 객체의 타입을 명시할 때 보통 아래처럼 key-value 형태로 정의합니다:

const user: { name: string; age: number } = {
  name: 'Alice',
  age: 30,
};

하지만 더 유연하고 깔끔하게 작성할 수 있는 유틸리티 타입이 있습니다. 그중 대표적인 것이 바로 **Record<K, V>**입니다.

---

Record<K, V>란?

"키가 K 타입이고, 값이 V 타입인 객체를 정의한다"는 의미입니다.

Record<K, V>

 문자열 키와 문자열 값

const colorMap: Record<string, string> = {
  primary: 'blue',
  danger: 'red',
  success: 'green',
};

 

위는 아래와 동일한 의미를 가집니다.

const colorMap: { [key: string]: string } = { ... };

---

유니언 타입 키(리터럴 타입)으로 제한된 객체 만들기

사실 아래 내용은 버튼 컴포넌트를 분리했을때, 각 버튼들의 스타일을 구분하기 위한 type alias였는데 이를 좀 더 효율적으로 타입 안전을 보장하기 위해선 아래와 같이 하는게 더 좋다고 판단했습니다.

즉, 타입 키를 만들고, 각 객체의 벨류를 써서 버튼들을 분류하는데, 이때 객체의 타입을 Record라는 유틸리티 타입으로 판단하는 것 입니다.

type ButtonVariant = 'primary' | 'danger' | 'black';

const buttonStyles: Record<ButtonVariant, string> = {
  primary: 'bg-blue-500',
  danger: 'bg-red-500',
  black: 'bg-black',
};

•  위처럼 하면 'primary', 'danger', 'black' 이외의 키를 쓰면 컴파일 에러 발생 → 타입 안전!

---

숫자 키와 객체 값

const userMap: Record<number, { name: string }> = {
  1: { name: 'Alice' },
  2: { name: 'Bob' },
};

---

 

const variantClassMap: Record<string, string> = {
  primary: 'bg-blue-500 hover:bg-blue-600',
  danger: 'bg-red-500 hover:bg-red-600',
  append: 'bg-green-500 hover:bg-green-600',
  reduce: 'bg-yellow-500 hover:bg-yellow-600',
};

const varStyle = variantClassMap[variant] ?? ''; // ??는 null이거나 undefined일 경우를 대비합니다.

---