[TS] Record 원시 타입 키 개선

• Record의 키를 string 이나 number 같은 원시 타입으로 명시하면 타입스크립트는 키가 유효하지 않더라도 타입상으로 문제가 없기 때문에 오류를 표시하지 않는다. 이는 런타임 에러를 야기할 수 있다.
• foodByCategory 객체는 무한한 키 집합을 가지게 된다. 객체에 없는 키값을 사용해도 타입스크립트는 오류를 표시하지 않는다. 그러나 런타임에서 westerns은 undefined 가 되어 오류를 반환한다.

type Category = string;
 
interface Food {
  name: string;
}
 
const foodByCategory: Record<Category, Food[]> = {
  한식: [{ name: '제육덮밥' }, { name: '뚝배기 불고기' }],
  일식: [{ name: '초밥' }, { name: '텐동' }],
};
 
const westerns = foodByCategory['양식'] // Food[]
westerns.map((food) => console.log(food)) // 에러가 발생하지 않는다.

• 자바스크립트의 옵셔널 체이닝 등을 사용해 런타임 에러를 방지할 수 있지만, 매번 확인해야 한다는 번거로움이 생긴다.

westerns?.map((food) => console.log(food))

• 타입스크립트의 기능을 활용하여 개발 중에 유효하지 않은 키가 사용되었는지 또는 undefined 일 수 있는 값이 있는지 등을 사전에 파악할 수 있다.
• 일단, 키가 유한한 집합이라면 유닛 타입을 사용할 수 있다.

type Category = '한식' | '일식';
 
interface Food {
  name: string;
}
 
const foodByCategory: Record<Category, Food[]> = {
  한식: [{ name: '제육덮밥' }, { name: '뚝배기 불고기' }],
  일식: [{ name: '초밥' }, { name: '텐동' }],
};
 
foodByCategory['양식'] // 타입 에러

• 키가 무한한 상황에서는 Partial을 사용하여 해당 값이 undefined 일 수 있는 상태임을 표현할 수 있다.

type PartialRecord<K extends string, T> = Partial<Record<K, T>>;
type Category = string;
 
interface Food {
  name: string;
}
 
const foodByCategory: PartialRecord<Category, Food[]> = {
  한식: [{ name: '제육덮밥' }, { name: '뚝배기 불고기' }],
  일식: [{ name: '초밥' }, { name: '텐동' }],
};
 
const westerns = foodByCategory['양식'] // Food[] | undefined
westerns?.map((food) => console.log(food)) // 에러가 발생하지 않는다.