TypeScript
React Query 现在是用TypeScript写的，以确保库和项目里有关的代码是类型安全的！
需要记住的是：
- 目前需要使用 TypeScript v4.1 或更高版本
- 对该库中的类型所做的更改被认为是**非破坏性(non-breaking)的，并且通常以补丁(小版本号)**的形式发布（每次类型的增强都会在主要版本中!）。
- 强烈建议您将
react-query包版本锁定在一个特定的小版本号上，并做好在任何版本之间类型都会固定或升级的打算。 - 与类型无关的公共 API 仍然非常严格地遵循 semver 版本守则。
类型推导
React Query 中的类型通常可以很好地被 ts 自动推导，因此你不需要自己来提供类型注释
TypeScript
1const { data } = useQuery({2 // ^? const data: number | undefined3 queryKey: ["test"],4 queryFn: () => Promise.resolve(5),5});TypeScript
1const { data } = useQuery({2 // ^? const data: string | undefined3 queryKey: ["test"],4 queryFn: () => Promise.resolve(5),5 select: (data) => data.toString(),6});如果 queryFn 有一个定义良好的返回类型，那么这种方法最有效。
请记住，大多数的数据获取库都会默认返回一个any类型来填充，所以请确保将其提取到一个拥有正确类型的函数：
TypeScript
1const fetchGroups = (): Promise<Group[]> =>2 axios.get("/groups").then((response) => response.data);3 4const { data } = useQuery({ queryKey: ["groups"], queryFn: fetchGroups });5// ^? const data: Group[] | undefined类型窄化
React Query 对查询结果使用可辨识的联合类型(discriminated union type)，其由status字段和派生的布尔状态字段区分。例如下面的示例，用success的相关状态来确保data是已被定义和赋值:
TypeScript
1const { data, isSuccess } = useQuery({2 queryKey: ["test"],3 queryFn: () => Promise.resolve(5),4});5 6if (isSuccess) {7 data;8 // ^? const data: number9}错误字段的类型
error 的类型默认是unknown。
这和 TypeScript 在 catch 语句中给出的默认值一致(请看useUnknownInCatchVariables)。
处理error最安全的方法是在运行时进行检查；或者是显式地定义data和error的类型:
TypeScript
1const { error } = useQuery({ queryKey: ["groups"], queryFn: fetchGroups });2// ^? const error: unknown3 4if (error instanceof Error) {5 error;6 // ^? const error: Error7}TypeScript
1const { error } = useQuery<Group[], Error>(["groups"], fetchGroups);2// ^? const error: Error | null延伸阅读
关于在 Typescript 中类型推断的技巧和建议，请参阅此社区资源。 要了解如何做到尽可能好的类型安全，你可以阅读Type-safe React Query