vt.给出

type Loadable<T> = () => T
type LoadableCombinerResult<T> = { result: T }

我希望定义具有如下输入的函数的类型:

  • 可变数量的Loadable<ResponseDataType>个输入,每个输入具有不同的ResponseDataType
  • combiner获取上述可加载对象的数据结果.

该函数将负责处理错误状态和可加载程序的加载进度,以及其他一些事情.仅当成功加载所有可加载文件时,该函数才会调用combiner.

这可以在非类型化的JavaScript中实现.然而,我无法正确地在Typescript 中输入它.

非变量类型将如下所示:

function useLoadableCombiner2<TResult, T1, T2>(
  combiner: (data1: T1, data2: T2) => TResult,
  loadable1: Loadable<T1>,
  loadable2: Loadable<T2>
): LoadableCombinerResult<TResult> { ... }

function useLoadableCombiner3<TResult, T1, T2, T3>(
  combiner: (data1: T1, data2: T2, data3: T3) => TResult,
  loadable1: Loadable<T1>,
  loadable2: Loadable<T2>,
  loadable3: Loadable<T3>
): LoadableCombinerResult<TResult> { ... }

function useLoadableCombiner4<TResult, T1, T2, T3, T4>(
  combiner: (data1: T1, data2: T2, data3: T3, data4: T4) => TResult,
  loadable1: Loadable<T1>,
  loadable2: Loadable<T2>,
  loadable3: Loadable<T3>,
  loadable4: Loadable<T4>
): LoadableCombinerResult<TResult> { ... }

function useLoadableCombinerN<...>(...): LoadableCombinerResult<TResult> { ... }

是否可以在一个声明中将其作为一个函数在打印脚本中输入?

它可以是数组/类型化元组,而不是可变数量的参数.

我们的目标是放入可变数量的可加载内容,然后在成功加载所有内容之后,能够调用包含所有数据的类型化combiner.

推荐答案

您可以使用泛型tuple type T表示the rest parameter listcombiner,然后使用map over that tuple type来获取loadable REST参数的类型:

declare function useLoadableCombiner<R, T extends any[]>(
  combiner: (...data: T) => R,
  ...loadable: { [I in keyof T]: Loadable<T[I]> }
): LoadableCombinerResult<R>;

现在,当您调用useLoadableCombiner时,类型判断器可以从combiner的参数类型推断出T,或者,如果您没有注释这些参数类型,则可以从loadable的每个元素的返回类型推断出T:

const x = useLoadableCombiner(
  //  ^? const x: LoadableCombinerResult<boolean>
  (str, num, dat) => str.length + num > dat.getTime(),
  () => "a", () => 1, () => new Date()
)

这里从loadable推断出T是类型[Loadable<string>, Loadable<number>, Loadable<Date>],然后判断combiner(您可以看到,即使我们没有注释strnumdat,类型判断器如何从loadable知道它们的类型),并返回boolean,因此x是类型LoadableCombinerResult<boolean>.

Playground link to code

Typescript相关问答推荐

具有映射返回类型的通用设置实用程序

防止获取发出不需要的请求

接口的额外属性作为同一接口的方法的参数类型'

如何推断哪个特定密钥与泛型匹配?

如何将类型从变量参数转换为返回中的不同形状?

在动态对话框中使用STEP组件实现布线

在TypeScrip的数组中判断模式类型

如何在Reaction路由v6.4加载器和操作中获得Auth0访问令牌?

带下拉菜单的Angular 响应式选项卡

TypeScrip:来自先前参数的参数中的计算(computed)属性名称

Vue3 Uncaught SyntaxError:每当我重新加载页面时,浏览器控制台中会出现无效或意外的令牌

如何在ANGLE中注册自定义验证器

下载量怎么会超过下载量?

无法将从服务器接收的JSON对象转换为所需的类型,因此可以分析数据

如何将spread operator与typescripts实用程序类型`参数`一起使用

界面中数组中的混合类型导致打字错误

无法缩小深度嵌套对象props 的范围

如何为带有参数的函数类型指定类型保护?

在 next.js 13.4 中为react-email-editor使用forwardRef和next/dynamic的正确方法

从平面配置推断嵌套递归类型