[TanStakQuery] TypeScript

이제 라이브러리와 프로젝트가 타입 안전성을 보장하기 위해 React Query가 TypeScript로 작성되었습니다!

명심해야 할 사항들:

• 현재 타입을 사용하려면 TypeScript v4.1 이상을 사용해야 합니다.
• 이 레포지토리의 타입에 대한 변경은 non-breaking으로 간주되며 일반적으로 patch sember 변경으로 릴리스됩니다(그렇지 않으면 모든 타입 개선 사항이 메이저 버전이 될 것입니다!).
• 리액트 쿼리 패키지 버전을 특정 패치 릴리스에 고정하고 릴리스 사이에 유형이 수정되거나 업그레이드될 수 있다는 것을 예상하여 업그레이드하는 것이 좋습니다.
• 타입과 관련이 없는 React Query의 공용 API는 여전히 semver를 매우 엄격하게 따릅니다.

Type Inference

React 쿼리의 유형은 일반적으로 매우 잘 전달되므로 유형 주석을 직접 제공할 필요가 없습니다.

const { data } = useQuery({
  //    ^? const data: number | undefined
  queryKey: ['test'],
  queryFn: () => Promise.resolve(5),
})

typescript playground

const { data } = useQuery({
  //      ^? const data: string | undefined
  queryKey: ['test'],
  queryFn: () => Promise.resolve(5),
  select: (data) => data.toString(),
})

typescript playground

이 방법은 queryFn에 잘 정의된 리턴 타입이 있는 경우에 가장 잘 작동합니다. 대부분의 data fetching 라이브러리는 default로 any를 반환하므로 적절한 유형의 함수로 추출해야 합니다:

const fetchGroups = (): Promise<Group[]> =>
  axios.get('/groups').then((response) => response.data)

const { data } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
//      ^? const data: Group[] | undefined

typescript playground

Type Narrowing

React Query는 status 필드와 파생된 상태 boolean flags로 구분되는 식별된 유니언 유형(discriminated union type)을 사용합니다. 이를 통해 예를 들어 success 상태 등을 확인하여 data를 정의할 수 있습니다:

const { data, isSuccess } = useQuery({
  queryKey: ['test'],
  queryFn: () => Promise.resolve(5),
})

if (isSuccess) {
  data
  //  ^? const data: number
}

typescript playground

Typing the error field

오류 유형은 기본적으로 unknown으로 설정됩니다. 이는 TypeScript가 catch clauses에서 기본적으로 제공하는 것과 일치합니다(useUnknownInCatchVariables 참조). 오류를 처리하는 가장 안전한 방법은 런타임 검사를 수행하는 것이고, 다른 방법은 data, error 타입을 명시적으로 정의하는 것입니다:

const { error } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
//      ^? const error: unknown

if (error instanceof Error) {
  error
  // ^? const error: Error
}

typescript playground

const { error } = useQuery<Group[], Error>(['groups'], fetchGroups)
//      ^? const error: Error | null

typescript playground

Further Reading

타입 추론과 관련된 팁과 요령은 커뮤니티 리소스에서 React Query and TypeScript를 참조하십시오. 최상의 타입 안전성을 확보하는 방법을 알아보려면 Type-safe React Query를 참조하십시오.

Reference

• TypeScript | TanStack Query Docs