时间戳

首页 > 解决方案 > 尝试将函数包装在另一个函数中的打字稿错误

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

问题描述

我试图将一个函数包装在另一个函数中，然后再将它传递给一个库以供稍后运行。我在尝试使用 .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)

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

(参数) args: any[] 预期 1-2 个参数，但得到 1 个或更多.ts(2556)

它与此行中的 args 有关

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

任何帮助将不胜感激。

标签： reactjstypescript

解决方案

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

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

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');

推荐阅读