打字稿：返回一个返回承诺类型定义的对象

Question

我对 TS 还很陌生，一直被这个特定问题所困扰。

我正在使用 reduce 构建一个对象，它将对象方法包装在一个函数中。我需要对象返回原始对象的键以及 apiDispatch 函数的承诺，据我所知。

任何帮助将不胜感激

const actions = {
  getSomething: ({ id }) => ({
    url: `/something/${id}`
  })
};

function buildClient() {
  const apiDispatch = async (data: any) => Promise;

  return Object.entries(actions).reduce((acc, [key, value]) => {
    acc[key] = (data: any, options: any): Promise<any> =>
      apiDispatch({
        ...value(data),
        ...options
      });
    return acc;
  }, {} as typeof actions);
}

const client = buildClient();

client.getSomething({ id: 123 }).then((res: any) => res);

1. acc[key] 给出以下错误 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type
2. client.getSomething().then() then 没有赋值给类型

codeandbox 链接：

https://codesandbox.io/s/typescript-playground-export-forked-2yg63?file=/index.ts

Answer 1

据我了解，getSomething 属性末尾应该有两个参数。

const acts = {
  getSomething: ({ id }: { id: string }) => ({
    url: `/something/${id}`
  }),
  getSomethingElse: ({ name }: { name: string }) => ({
    url: `/something/${name}`
  })
} as const;

type Actions = typeof acts;

type Fn = (...args: any[]) => object

const apiDispatch = <T,>(data: T) => Promise.resolve(data);

type Convert<T extends Record<string, Fn>> = {
  [Prop in keyof T]: <Options extends object>(data: Parameters<T[Prop]>[0], options: Options) => Promise<any>
}

type O = Convert<typeof acts>

const buildClient = <
  Keys extends string,
  Value extends Fn,
  Rec extends Record<Keys, Value>
>(actions: Rec) =>
  Object.entries<Value>(actions).reduce((acc, [key, value]) => ({
    ...acc,
    [key]: <T, U>(data: T, options: U) => apiDispatch({
      ...value(data),
      ...options
    })

  }), {} as Convert<Rec>);

const client = buildClient(acts)

const result = client.getSomething({ id: 'dsf' }, {}).then(data => data) // ok
const result2 = client.getSomethingElse({ name: 'dsf' }, {}).then(data => data) // ok
const result3 = client.getSomethingElse({ id: 'dsf' }, {}).then(data => data) // expected error

友情提示，尽量避免TS突变。 Here，在我的博客中，你可以找到一些你在 TS 中改变值时可能遇到的问题

Answer 2

我只改变了一行就解决了你的问题。在这种情况下，TypeScript 不够聪明，无法理解这个地方的赋值是允许的。所以我要做的就是稍微改变一下类型（比如 Sean），然后使用 TypeScript 中的as 运算符将其改回来。

这就是代码现在的样子：

type OverrideReturn<T extends (...args: any[]) => any, R> = (...args: Parameters<T>) => R;

const actions = {
  getSomething: ({ id }: { id: any }) => ({
    url: `/something/${id}`
  })
};

function buildClient() {
  const apiDispatch = async (data: any) => ({ name: "test object" });

  return Object.entries(actions).reduce((acc, [key, value]) => {
    acc[key] = (data: any, options: any): Promise<any> =>
      apiDispatch({
        ...value(data),
        ...options
      });
    return acc;
  }, {} as Record<string, any>) as {} as { [K in keyof typeof actions]: OverrideReturn<typeof actions[K], Promise<any>> };

}

const client = buildClient();

client.getSomething({ id: 123 }).then((res: any) => res);

TypeScript Playground

Answer 3

更新

您收到此错误的原因是您定义了{} as typeof actions。有了这个，Typescript 期望您的 acc 与您的 actions 相同。但由于您希望您的 acc 有所不同，因此您需要为它定义一个新的返回类型。

1. 为buildClient定义新类型，如果actions类型可以不时更改，这里可以使用Typescript Generic Type。使用下面的新类型定义，Client 类型将是一个对象，其属性键与泛型类型相同，每个键的值将是一个返回 Promise 的函数。

type Client<T> = Record<keyof T, (data: any, options?: any) => Promise<any>>;

1. 将buildClient定义为接收泛型类型T的泛型函数

function buildClient<T>()

1. 输入acc[key as keyof T]，让Typescript 知道属性键将来自泛型类型T。
2. 输入{} as Client<T>，让Typescript 知道{} 是Client<T> 类型而不是空对象。
3. 当您调用buildClient 时，只需在其旁边输入<typeof actions>，这样Typescript 就会将所有泛型类型T 替换为typeof actions

const client = buildClient<typeof action>()

在所有这些更改之后，Typescript 现在将理解 client 只有一个属性 getSomething 并且它是一个返回承诺的函数。所以，最终的代码是：

type Client<T> = Record<keyof T, (data: any, options?: any) => Promise<any>>;

const actions = {
  getSomething: ({ id }) => ({
    url: `/something/${id}`
  })
};

function buildClient<T>(): Client<T> {
  const apiDispatch = async (data: any) => Promise;

  return Object.entries(actions).reduce((acc, [key, value]) => {
    acc[key as keyof T] = (data: any, options: any): Promise<any> =>
      apiDispatch({
        ...value(data),
        ...options
      });
    return acc;
  }, {} as Client<T>);
}

const client = buildClient<typeof actions>();

client.getSomething({ id: 123 }).then((res: any) => res);