Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- nextjs사용법
- SCSS extend
- react next
- KDT 프로그래머스 데브코스 프론트엔드
- 쌓임맥락
- 이벤트 수식어
- 프로그래머스 데브코스 프론트엔드
- netlify redirect
- SCSS import
- SCSS use
- 프로그래머스 K_Digital Training
- Spacer
- 프로그래머스 데브코스
- intersection opserver
- 프로그래머스 프론트엔드 데브코스
- vuex map
- SCSS forward
- postcss
- vue 이벤트 수신
- Vue
- flex
- vue 지역 컴포넌트
- KDT 프로그래머스
- git 같은계정 다른 컴퓨터
- 리스트 렌더링
- 다른컴퓨터에서 git사용
- 리액트
- 폼 입력 바인딩
- 고양이 사진 검색기
- vue mixin
Archives
- Today
- Total
혼자 적어보는 노트
[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
keyof와 typeof를 조합해서 사용하는 형태여서 한번에 이해가 되진 않았지만
아래의 StackOverflow 글을 보고 이해할 수 있었다.
https://stackoverflow.com/questions/55377365/what-does-keyof-typeof-mean-in-typescript
'Typescript' 카테고리의 다른 글
[TypeScript] String key로 객체에 접근하기 (0) | 2022.07.26 |
---|---|
타입스크립트 프로그래밍 - 4장 (0) | 2022.07.14 |
[Typescript] Type Guard로 타입 좁히기 (0) | 2022.07.13 |
[Typescript] React에서 Typescript 사용하기 (0) | 2022.05.24 |
[TypeScript] 제네릭(Generics) (0) | 2022.05.23 |
Comments