如何正确输入高阶函数

Question

我有一个高阶函数，例如在 vanilla JS 中是这样的：

function log(fn) {
  return (...args) => {
    console.log("Calling", fn.name);
    return fn(...args);
  }
}

并像这样使用：

let name;
const setName = log((newName) => {
   name = newName;
});
setName("Hello"); // output "Calling setName"

我怎样才能在 TS 中正确键入这个，以使 setName 具有正确的函数签名？含义：

setName("hello") // OK
setName() // Error, missing arg
setName(123) // Error, number not string

到目前为止，我想出的是：

function log<F extends Function>(fn: F): F {
  return (...args: any[]) => {
    console.log("Calling", fn.name);
    return fn(...args);
  }
}

let name;
const setName = log((newName: string) => {
  name = newName;
});

按我想要的方式工作（我在 setName 上进行参数类型检查），但在 log 函数返回时出现编译错误：

错误：TS2322:Type '(...args: any[]) => any' 不可分配给类型 'F'。

即使我使用<F extends (...args: any[]) => any>，我也会遇到同样的错误。基本上不知道如何让返回的函数满足泛型类型F。

我该怎么做？

Answer 1

带有函数重载

Function overloads 可以使用。这是一种将定义与实现分开的方法：

function log<F extends Function>(fn: F): F
function log(fn: Function) {
    return (...args) => {
        console.log("Calling", fn.name);
        return fn(...args);
    }
}

我喜欢重载版本，因为它有助于在模块作为预编译 NPM 包分发时生成 TypeScript 定义。

带有类型断言as F

Function 类型太宽。您的包装函数必须是以下子类型：(...args: any[]) => any。

您可以使用as F 来告诉 TypeScript 对返回的函数有信心：

function log<F extends (...args: any[]) => any>(fn: F): F {
    return ((...args: any[]) => {
        console.log("Calling", fn.name);
        return fn(...args);
    }) as F
}

带有类型断言as any

相同的实现，但我们可以使用 Function 和 as any 代替 (...args: any[]) => any 和 as F（参见 Louis 的回答）。

Answer 2

您可以进行的最直接的修改是将返回值的类型强制为any：

function log<F extends Function>(fn: F): F {
  return ((...args: any[]) => {
    console.log("Calling", fn.name);
    return fn(...args);
  }) as any;
}

这会编译文件，并且这样做，您的 setName 函数将具有与您传递给 log 的签名相同的签名。