typescript Record 타입 사용하기

오픈소스 라이브러리를 보면, 타입스크립트에서 사용되는 유틸 타입 키워드로 Record<Keys,Type> 가 있는 것을 종종 본적이 있다.

이번엔 Record에 대해서 기록하고, 사용처에 대해서 생각해보기로 하였다.

interface PageInfo {
  title: string;
}
 
type Page = "home" | "about" | "contact";
 
const nav: Record<Page, PageInfo> = {
  about: { title: "about" },
  contact: { title: "contact" },
  home: { title: "home" },
};

공식 문서에서 제공하는 예제는 위와 같다.

마치 반복문을 돈 것 처럼 key값을 기준으로 type값을 모두 가지게 할 수 있는 것을 확인할 수 있다.

이번엔 string이 아닌 값을 추가하여 예제를 만들어 보았다.

enum classType {
  rose,
  cloud,
  sunflower
}

interface Survey {
  className: classType;
  checked: boolean;
}
 
type name = "lee" | "park" | "shin" | 'james';
 
const students: Record<name, Survey> = {
  lee: {
    className: classType.rose,
    checked: false,
  },
  park: {
    className: classType.cloud,
    checked: true,
  },
  shin: {
    className: classType.sunflower,
    checked: false
  },
  james: {
    className: classType.rose,
    checked: true
  }
}

위의 예제는 checked라는 boolean 값을 가지고, 학생들이 설문 조사를 했는지와 학생이 어떤 클래스에 속했는지 보여주는 데이터를 만들었다.

Record는 이미 고정된 타입들의 데이터가 있을 때, 굳이 더 타입이나 인터페이스를 생성하지 않고 기존의 것을 재사용할 수 있는 장점이 있는 것 같다.

 

https://www.typescriptlang.org/ko/docs/handbook/utility-types.html#recordkeystype

Documentation - Utility Types