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