TypeScript如何让高阶函数返回的函数继承入参回调的参数类型

你可以通过泛型捕获入参函数的具体类型，配合TS内置的Parameters工具类型透传参数类型，即可实现需求。

完整代码实现 #

// 定义入参函数的联合类型
type InnerFnType = () => void | (arg: string) => void | (arg: number) => void | (arg: object) => void

// 用泛型T约束入参函数类型
function mainFn<T extends InnerFnType>(innerFn: T) {
  // 提取innerFn的参数类型作为run的参数类型
  function run(...args: Parameters<T>) {
    innerFn(...args)
  }
  return run
}

效果验证 #

const concreteInnerFn = (arg: string) => {
  console.log(arg)
}

const run = mainFn(concreteInnerFn)

run("hello")  // 类型校验通过，正常执行
run(25) // TS抛出类型错误：number类型不能赋值给string类型参数
run({hello: true}) // TS抛出类型错误：object类型不能赋值给string类型参数

原理解释 #

• 泛型T extends InnerFnType会在调用mainFn时自动推导传入的innerFn的实际类型，无需手动指定泛型参数
• 内置工具类型Parameters<T>会自动提取函数类型T的入参类型组成的元组，作为run函数的入参类型，无参、单参、多参场景都可以完美适配
• 调用run时TS会自动校验参数类型是否和原innerFn的入参类型匹配，不符合要求就会提前抛出类型错误

内容的提问来源于stack exchange，提问作者Facundo Rodriguez