타입스크립트에서 중첩객체에 대한 type of & key of 사용에 대해 질문 있습니다!

Question

color와 같은 스타일 theme값을 객체로 만들어 놓고, type of key of를 통해 객체의 키값으로 만들고 있습니다!
해당 tpye을 만드는 목적은 컴포넌트에 color prop을 추가하려고 합니다!

단순한 객체는 아래 예시처럼 처리하면 객체의 키값을 가져와서 type으로 만들 수 있는걸로 알고 있습니다.
export const colors = {
  Gray000: #F5F5F5,
  Gray50: #F2F2F2,
  
  Red100: #FFECEF,
  Red200: #F47F88,

Blue: #005E9E,
};

export type colorType = keyof typeof colors;

하지만 아래 예시와 같은 중첩 객체문에서는 해당 키값을 어떻게 빼내야할지 고민입니다.
export const colors = {
   page1: {
       Gray000: #F5F5F5,
       Gray50: #F2F2F2,
   } ,
   page2: {
       Red000: #F5F5F5,
       Red50: #F2F2F2,
   }  ,
   page3: {
       Blue000: #F5F5F5,
       Blue50: #F2F2F2,
   }  
};

아래 코드처럼 이런 식으로 따로 따로 처리해야하는걸까요?
type page1Type = keyof typeof colors.page1;
type page2Type = keyof typeof colors.page2;
type page3Type = keyof typeof colors.page3;

export type colorType = page1Type | page2Type | page3Type

조용구 · Accepted Answer

안녕하세요 :)

이렇게 하시면 직접 정의할 필요 없이 사용할 수 있어요!