typescript RTK查询的动态返回类型

a11xaf1n  于 2023-05-19  发布在  TypeScript
关注(0)|答案(1)|浏览(124)

假设我们为所有restAPI调用都设置了这个钩子

fetchData: builder.query<any, string>({
      async queryFn(arg, _queryApi, _extraOptions, fetchWithBQ) {

        const result = await fetchWithBQ(arg);
        return result.data
          ? { data: result.data as any }
          : { error: result.error as unknown as FetchBaseQueryError };
      },
    }),

因此每个API都有不同结果类型,所以我们强制将返回类型设置为ANY

fetchData: builder.query<**any**, string>

我的问题是如何为每个API调用定义不同的返回类型

const { data } = useFetchDataQuery(
    `example/me1`
  );

 const { data } = useFetchDataQuery(
    `example/me2`
  );

比如

const { data } = useFetchDataQuery<DATA_TYPE_HERE>(
        `example/me1` as string
      );

const { data } = useFetchDataQuery<DATA_TYPE_HERE_2>(
        `example/me2` as string
      );
cx6n0qe3

cx6n0qe31#

我将假设有一个属性作为“键”来告诉你你真正拥有的类型,就像actions上的“type”属性告诉你要使用开关的哪一条腿(在老式的reducer中)。我会使用Discriminated unions,这是在老式的reducer中发生的事情。
比如说

type Me1 = {
   keyProp: 'me1';
   color: string;
}

type Me2 = {
    keyProp: 'me2';
    size: number;
}

type Us = Me1 | Me2;

现在,您可以将端点查询输入为fetchData<Us, string>,然后您将能够切换到keyProp,并根据包含“me1”还是“me2”自信地知道您是否会有颜色或大小。现在,如果类型实际上是随机的,你不能输入它,所以祝你好运。

相关问题