TypeScript中如何正确使用selectFromResult获取单条数据对应类型

你需要手动显式指定Hook的返回类型，或者给selectFromResult的返回结果做类型标注，具体操作如下：

方法1：显式定义Hook返回类型（最安全） #

假设你的列表项类型为Item，原getItemList接口返回类型为Item[]，你可以直接给useGetItemById标注返回类型：

import type { UseQueryResult } from '@reduxjs/toolkit/query/react';

// 替换为你实际的业务数据类型
interface Item {
  id: string;
  // 其他字段定义
}

function useGetItemById(id: string): UseQueryResult<Item | undefined> {
  return api.endpoints.getItemList.useQuery(undefined, {
    selectFromResult: ({ data, ...rest }) => ({
      ...rest,
      data: data?.find(item => item.id === id)
    })
  });
}

调用后data的类型会自动推导为Item | undefined，符合find方法可能返回空的实际逻辑。

方法2：给selectFromResult的返回值做类型断言（适合快速修改） #

如果你不想单独定义Hook返回类型，可以直接对筛选后的数据做类型断言：

function useGetItemById(id: string) {
  return api.endpoints.getItemList.useQuery(undefined, {
    selectFromResult: ({ data, ...rest }) => ({
      ...rest,
      data: data?.find(item => item.id === id) as Item | undefined
    })
  });
}

注意 #

不可能得到纯T类型的返回值，因为find操作存在匹配不到对应id数据的场景，所以返回类型必然是T | undefined的联合类型。

内容的提问来源于stack exchange，提问作者ilya kirillov