Angular中使用TanStack Query：是否需为injectQuery显式指定类型？

我在Angular中尝试使用TanStack Query时，VS Code提示必须为injectQuery的返回结果显式指定CreateQueryResult<Data, Error>类型，但官方文档中的示例均未使用显式类型。

官方文档示例代码：

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signals can be combined with expressions
    enabled: !!this.filter(),
  }))
}

我当前的代码如下：

class ServiceOrComponent {
  filter = signal('')

  todosQuery: CreateQueryResult<Data, Error> = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signals can be combined with expressions
    enabled: !!this.filter(),
  }))
}

请问是否必须为每个injectQuery都指定CreateQueryResult类型？

回答 #

不需要强制为每个injectQuery显式指定CreateQueryResult类型，原因及解决方案如下：

• TypeScript自动类型推导足够可靠：TanStack Query的injectQuery设计时就支持TS自动类型推导，只要你的queryFn（比如示例中的fetchTodos）有明确的返回类型定义，TS就能自动推断出CreateQueryResult对应的泛型参数，无需手动声明。

• 官方示例的设计逻辑：官方文档示例省略显式类型，正是为了利用TS的自动推导特性，让代码更简洁易读，这是推荐的写法。

• VS Code提示的可能原因：

  • fetchTodos函数没有明确的返回类型，导致TS无法识别Data的具体类型
  • 项目的TypeScript严格模式配置（如strict、strictNullChecks）过于严格，触发了额外的类型检查提示
  • TanStack Query的库版本与类型定义版本不匹配

优化建议 #

1. 给queryFn明确返回类型：
   先定义数据类型，再给请求函数指定返回类型，示例：

   // 定义Todo数据类型
   interface Todo {
     id: number;
     title: string;
     completed: boolean;
   }
   
   // 给fetchTodos指定返回Promise<Todo[]>
   async function fetchTodos(filter: string): Promise<Todo[]> {
     const response = await fetch(`/api/todos?filter=${filter}`);
     return response.json();
   }
   

   这样TS就能自动推导出todosQuery的类型为CreateQueryResult<Todo[], Error>。

2. 检查TypeScript配置：
   打开项目的tsconfig.json，如果strict模式下的子选项导致不必要的提示，可以针对性调整，但建议保留核心严格选项以保障类型安全。

3. 同步库与类型版本：
   确保@tanstack/angular-query的版本为最新稳定版，避免因版本不一致导致的类型推导问题。

内容的提问来源于stack exchange，提问作者Eternal Sunshine