[TypeScript] 객체의 key를 type으로 분리하기

 

 

객체의 key를 type으로 분리하기

프로젝트에서 type을 지정하는 파일들을 분리하던 중 조금 불편한 부분이 생겼다.

 

 

// Icon/types.ts
export const ICON_URLS = {
  heart: '/assets/icons/heart.svg',
  bookmark: '/assets/icons/bookmark.svg',
  arrow: '/assets/icons/arrow.svg',
  calendar: '/assets/icons/calendar.svg',
  marker: '/assets/icons/marker.svg',
  route: '/assets/icons/route.svg'
};

export type IconName = 'heart' | 'bookmark' | 'arrow' | 'calendar' | 'marker' | 'route';


// Icon.tsx

interface IconProps {
  name: IconName;
  size?: number;
  rotate?: number;
}

 

이렇게 객체에 사용할 값들을 key와 value형태로 넣어두고

컴포넌트에서 객체를 불러와서 값을 사용하는 경우가 많았는데

props로 받을 name의 type을 정하기 위해 객체의 key를 일일이 적어주는게 여간 비효율적인게 아니었다..!

 

다들 이렇게 쓸리 없어!! 하고 방법이 있을 것 같아서 찾아보니 잘 안나와서 카페에 질문했다..

 

✅ 해결

export type IconName = keyof typeof ICON_URLS;

아주 아주 간단하게 처리할 수 있었다.👍

 

 

이게 어떻게 가능한 부분인지 찾아보니 관련 설명을 얻을 수 있었다.

 

Typescript Handbook - Keyof Type Operator

Documentation - Keyof Type Operator

 

keyof와  typeof를 조합해서 사용하는 형태여서 한번에 이해가 되진 않았지만

아래의 StackOverflow 글을 보고 이해할 수 있었다.

https://stackoverflow.com/questions/55377365/what-does-keyof-typeof-mean-in-typescript

What does "keyof typeof" mean in TypeScript?