尝试将函数包装在另一个函数中的打字稿错误答案

【问题标题】：Typescript error trying to wrap a function inside another function尝试将函数包装在另一个函数中的打字稿错误
【发布时间】：2021-02-24 19:25:14
【问题描述】：

我正在尝试将一个函数封装在另一个函数中，然后再将它传递给一个库以供稍后运行。我在尝试使用 .apply() 和传播参数时遇到各种 Typescript 错误。

库要求我传递一个“选项”对象，其中包括一个名为 PromiseFn 的函数，库将使用任意数量的参数调用该对象。

我需要将 promiseFn 包装在一个新函数中，该函数将在调用原始 promiseFn 之前和之后运行一些代码。新函数将是传递给库的函数。这是我尝试过的。

let newOptions = options

if(options.promiseFn !== undefined){

    let newPromiseFn = async (...args: any[]) => {

        ... before code

        await options.promiseFn?.apply(this, ...args)

        ... before code

    }

    newOptions.promiseFn = newPromiseFn

}

const { data } = useAsync(newOptions)

我目前遇到的打字稿错误是...

（参数）参数：任何[] 预期有 1-2 个参数，但得到 1 个或更多.ts(2556)

与这一行的参数有关

await options.promiseFn?.apply(this, ...args)

任何帮助将不胜感激。

【问题讨论】：

promiseFn 长什么样子？
它可以是传递给我的中间层的任何函数，但根据打字稿它看起来像 - (property) AsyncOptions.promiseFn?: PromiseFn |未定义
啊，尝试删除...，所以options.promiseFn?.apply(this, args)？
不幸的是，我得到 - 'any[]' 类型的参数不可分配给 '[props: AsyncProps, controller: AbortController]' 类型的参数。目标需要 2 个元素，但源的元素可能更少。ts(2345)

标签： reactjs typescript

【解决方案1】：

如果我能很好地理解你的问题，你只想使用可以包装你的函数的东西。

我认为你可以使用这样的东西：

type GetReturnType<original extends Function> = original extends (...x: any[]) => infer returnType ? returnType : never;
type GetArgumentsType<originalArguments> = originalArguments extends (...args: infer formatArguments) => any ? formatArguments : never[];

const myEncapsulatedFunction = async <T extends Function>(
    func: T,
    ...args: GetArgumentsType<T>
): Promise<GetReturnType<T>> => wrappingFunction(func, args)();

那么你可以像这样使用这个包装器：

function wrappingFunction<T extends any[]>(func: Function, args: T) {
  // Do some stuff here
  await func(...args)
  // Do some stuff here
}

// Then
function doStuff(arg: string) {
  console.log(arg)
}


myEncapsulatedFunction(doStuff, 'hello');

【讨论】：