#keyof

react-navigation navigate 파라미터 type

안녕하세요, @react-navigation의 useNavigation을 통해 페이지 이동을 하는 함수를 만들던 중 타입 설정이 되지 않아서 질문 드립니다. navbar와 같은 곳에서 사용할 목적으로 navigateTo와 params 를 받아 스크린을 이동시켜주는 함수를 만들고 싶지만 params의 타입에서 에러가 나고 있어서 이 부분에서 어떻게 해줘야 하는지 질문드려요.. 에러 내용을 보면 아래와 같이 나오는게 각 페이지 별 type이 일치하지 않아서 그런걸로 보이는데 각 메뉴마다 navigation.navigate('Login', {~~}); navigation.navigate('Foo'); 이런식으로 하게되면 동작은 하지만 너무 중복된 코드가 되는 것 같아 pgae를 받는 함수로 만드려고 하는 중인데 잘 안되네요..! Argument of type '[keyof RootStackParamList, { page: string; data?: object | undefined; } | undefined]' is not assignable to parameter of type '[screen: "Login"] | [screen: "Login", params: { page: string; data?: object | undefined; } | undefined] | [screen: "Foo"] | [screen: "Foo", params: undefined] | [screen: "Bar"] | [screen: "Bar", params: undefined]'. Type '[keyof RootStackParamList, { page: string; data?: object | undefined; } | undefined]' is not assignable to type '[screen: "Login", params: { page: string; data?: object | undefined; } | undefined]'. Type at position 0 in source is not compatible with type at position 0 in target. Type 'keyof RootStackParamList' is not assignable to type '"Login"'. Type '"Foo"' is not assignable to type '"Login"'.ts(2345)

TS 고수님, TS에서 타입 캐스팅 'as', 이렇게 이해해도 될까요

안녕하세요, 타입스크립트 고수님들에게 타입스크립트의 키워드 "as"에 대해서 문의 드립니다. 관건은 'as' 인데요 as의 의미를 다음의 순서대로 풀어보았습니다. 아래 코드에서 as의 역할/의미를 아래 순서대로 이해하는게 맞을까요? (=똑 떨어지는 설명이 없다보니, 나름 의미를 풀어서 이해해봤습니다.) 1.*[k in keyof O as O[K] 만약 k가 k in keyof o의 첫번째 값으로 'who'가 들어오고, 텍스트 'who'를 타입을 string이라고 합니다(as는 왼쪽의 값을 오른쪽의 값으로 '간주'하기 때문에) 라고 종종 서적에서 볼 수 있습니다. 2.*k in keyof O == O[K] 저는 as를 "=="이라고 이해하는데요, who(k in keyof O)는 string이라는 타입값이라고 간주합니다(=who는 string 입니다 라는 확정적인 의미가 아니라, "이렇게 할래" 이런 어조로 말입니다.) 3.[핵심!] who ==(비슷하다라고 간주하다) string 이기 때문에, who를 쓰는건 곧 "잠재적?"으로 string이라고 이해해도 될까요??.. (즉, who라고 쓰고 who라는 자리에 타입 string이라고 읽는다..처럼 말이죠...) 4.*who(==string) extends T(number) ? never : K(who) 텍스트 who는 곧(==) string 타입이기 때문에, 3번에서 말한 것처럼, who의 타입은 string이기 때문에 never가 아닌, K즉 who로 종료된다 요약하면, as를 쓰면 위 코드 상에서는 2가지 의미가 떠오르는데요, 1.k라는 텍스트를 o[k]의 타입으로 바인딩을 시키고 2.k는 o[k]라는 타입을 갖게 되어(= 타입 캐스팅), k를 사용하는 건 곧, k의 타입 o[k]를 사용하는 것이다 라고 이해했습니다. k라고 쓰고 o[k]라고 읽는 다 처럼 말이죠, as가 as 이하의 타입으로 "만든다" 라고만 생각하면, 위의 3번 내용이 생각이 나질 않습니다. 아래 코드에서 as를, 코드"순서대로" 이해해보려 하니 조금은 억지스러운 면이 있었지만, 조금은 컴퓨터 답게? as를 제대로 이해하고 있는지 고수님들에게 조언을 듣고 싶습니다! 감사합니다!

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

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

typescript enum은 지양해야하나요?

프로젝트 진행 중에 typescript enum 관련해서 팀원들과 의견이 갈려서 질문드립니다. 우선 기존 코드부터 설명드리면, enum Categories { Value, Value2, Value3 } 와 같은 형태가 있고 또 const categoryDataMap = { [Categories.Value]: { name: "카테고리1", }, [Categories.Value2]: { name: "카테고리2", }, [Categories.Value3]: { name: "카테고리3", } } const getCategoryDataByCategory = (category: Categories) => { return categoryDataMap[category] } 와 같은 mapper 오브젝트와 유틸 함수도 존재합니다. 저는 typescript 관련 공부를 했을때 enum 보다는 object as const를 사용하라고 배웠었는데요. 예를 들면 위의 코드를 const Categories = { 1: { name: "카테고리1" }, 2: { name: "카테고리2" }, 3: { name: "카테고리3" } } as const type CategoryKeys = keyof typeof Categories; const getCategoryDataByCategory = (category: CategoryKeys) => { return Categories[category] } 이렇게 바꿔줄수 있는데요. 저는 이 방법이 getCategoryDataByCategory를 사용했을때 category 인자의 타입이나 해당 함수가 리턴하는 타입이 더 명시적으로 나와서 편하다고 느꼈었습니다. 하지만, 팀원들은 다른 견해를 가지고 있었어요. 굳이 enum을 저렇게 바꿔야하는가? 라는 의문을 제기해주셨는데요. ---- 저도 typescript enum을 지양해야한다라고 어렴풋이 알고 있어서 "왜 굳이 enum인 친구들을 더 가독성이 떨어지는 후자의 방법으로 바꿔야하지"라는 궁금증이 생겨서 여쭤봅니다. 흔히 얘기하시는 enum 사용시 발생하는 treeshaking 문제는 enum을 cont enum으로 선언해주면 어느정도 해결되는 것 같은데, 굳이 const 형태로 바꿔줘야하는 이유가 있을까요? typescript에서 enum을 지양하라는 맥락에 대해 좀 더 구체적인 이유를 알고 싶습니다. 긴글 봐주셔서 감사합니다

타입스크립트 keyof typeof 는 뭔가요?

안녕하세요 코드를 보다가 type PackageTypes = keyof typeof Package; 라는 코드를 봤는데 여기서 keyof typeof는 뭔가요? PacakgeTypes에 마우스를 올려보면 "curated" | "drafted" | "single" 이런식으로 나오는데 뭔지 잘 모르겠네요.