如何在TypeScript中为useQueries指定错误类型？

要让useArtists的返回类型变为UseQueryResult<SuccessResponse, string>[]，可以通过以下几种方式实现：

方法一：给useQueries显式指定泛型参数 #

调用useQueries时，直接传入泛型参数<SuccessResponse, string>，明确指定成功数据类型和错误类型：

export const useArtists = (artistIds: string[]) => {
  // 泛型参数：第一个是成功数据类型，第二个是错误类型
  return useQueries<SuccessResponse, string>({
    queries: artistIds.map((artistId) => {
      return {
        queryKey: ["artists", artistId],
        queryFn: () => fetchArtist(artistId),
      };
    }),
  });
};

方法二：为自定义钩子标注返回类型 #

直接给useArtists的返回类型指定为UseQueryResult<SuccessResponse, string>[]，TypeScript会自动校验内部逻辑是否匹配：

import { UseQueryResult } from '@tanstack/react-query';

// ... 保留原有的SuccessResponse和fetchArtist定义

export const useArtists = (artistIds: string[]): UseQueryResult<SuccessResponse, string>[] => {
  return useQueries({
    queries: artistIds.map((artistId) => {
      return {
        queryKey: ["artists", artistId],
        queryFn: () => fetchArtist(artistId),
      };
    }),
  });
};

方法三：明确fetchArtist的错误抛出类型 #

在fetchArtist中，对抛出的错误添加类型断言，让TypeScript明确知道抛出的是string类型，再结合前两种方法进一步强化类型推断：

const fetchArtist = async (artistId: string): Promise<SuccessResponse> => {
  const response = await axios.get(`/artists/${artistId}`);

  if (response.status !== 200) {
    // 断言抛出值为string类型
    throw (response.data.error ?? "Unknown error") as string;
  }

  return response.data;
};

内容的提问来源于stack exchange，提问作者Misha Moroshko