개발자
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
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 02월 07일
타입스크립트에서는 유니온 타입에 대한 keyof를 사용해서 모든 서브 객체의 키로 만들 수 있습니다. 그러나 이 경우 중첩 객체에서 더 깊은 단계의 키를 가져오려면 사용자 정의 타입을 작성해야 할 수도 있습니다. 다음은 중첩 객체의 각 하위 객체에 대한 키를 모두 얻기 위한 방법 중 하나입니다: ```typescript export const colors = { page1: { Gray000: '#F5F5F5', Gray50: '#F2F2F2', }, page2: { Red000: '#F5F5F5', Red50: '#F2F2F2', }, page3: { Blue000: '#F5F5F5', Blue50: '#F2F2F2', } }; type NestedColors = typeof colors; type ColorType = { [K in keyof NestedColors]: keyof NestedColors[K] }; // 이제 ColorType은 {'page1': 'Gray000' | 'Gray50', 'page2': 'Red000' | 'Red50', 'page3': 'Blue000' | 'Blue50'} 과 같습니다. ``` 위 코드에서 `ColorType`는 원하는 대로 동작하지만, `'page1.Gray000'`와 같이 문자열 리터럴 공통 형식으로 억제할 수 없습니다. 따라서 이 접근 방식이 좋은지 여부는 작업에 따라 다릅니다. 만약 이런 식의 접근이 필요하다면, 해당 `ColorType` 을 처리하는 로직을 더 개발해야 할 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!