개발자
제너릭 타입을 분리해 재사용하는 방법을 알려주세요.
React Query의 useQuery를 재사용 가능한 hook로 만들고 있습니다. config라는 options 객체를 hook를 사용하는 쪽에서 전달하고 싶었고 아래의 코드까지 도달했습니다. 실행은 되지만 <ResponseType, AxiosError, ParsedType> 제네릭 타입이 UseQueryOptions와 useQuery에서 중복으로 사용되고 있는게 마음에 들지 않습니다. 저 제네릭 타입을 별도로 분리해서 재사용할 수 없을까요?
1export const useHook = (
2 config: UseQueryOptions<
3 ResponseType,
4 AxiosError,
5 ParsedType
6 >,
7) => {
8 return useQuery<
9 ResponseType,
10 AxiosError,
11 ParsedType
12 >({
13 ...config,
14 queryKey: queryKeys.key,
15 queryFn: getFn,
16 select: (data) => parseData(data),
17 });
18};
답변 0
첫 답변을 기다리고 있어요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 12월 05일
네, `UseQueryOptions`에서 사용하는 제너릭 타입들을 별도의 타입으로 추출하고 이를 재사용하는 것이 가능합니다. 아래 타입스크립트 코드로 확인해주세요. 먼저, 제너릭 타입들을 타입 파라미터로 받는 새로운 타입을 정의할 수 있습니다: ```typescript type QueryOptions<ResponseType, ErrorType, ParsedType> = UseQueryOptions< ResponseType, ErrorType, ParsedType >; ``` 그 다음에 이를 `useHook` 함수에서 사용하면 됩니다. `useQuery`에서도 같은 타입을 사용할 수 있습니다: ```typescript export const useHook = <ResponseType, ErrorType, ParsedType>( config: QueryOptions<ResponseType, ErrorType, ParsedType> ) => { return useQuery<ResponseType, ErrorType, ParsedType>({ ...config, queryKey: queryKeys.key, queryFn: getFn, select: (data) => parseData(data), }); }; ``` 이렇게 하면 코드가 더 깔끔해지고 의미가 명확해집니다. 함수의 시그니처에서 사용되는 제너릭 타입이 실제로 어떤 역할을 하는지 더 잘 이해할 수 있습니다. 위 방법으로 제네릭 타입 코드의 중복성을 줄이면서 가독성을 유지하고 구조적 일관성을 확보할 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!