可以使用不同的约束子类型来实例化函数

Question

TypeScript 拒绝编译 debounce 函数，因为包装函数的类型有问题：

export function debounce<F extends ((...args: any[]) => void)>(fn: F, timeout: number): F {
  let timer: NodeJS.Timeout | undefined

  // Problem here, TypeScript complains it's not the same function as F
  return ((...args: any[]) => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => fn(...args), timeout)
  })
}

错误：

Type '(...args: any[]) => void' is not assignable to type 'F'.
  '(...args: any[]) => void' is assignable to the constraint of type 'F', but 'F' could be instantiated with a different subtype of constraint '(...args: any[]) => void'.ts(2322)

如何解决这个问题？没有强制类型转换 return ... as F 或 return ... as any

Answer 1

问题在于F 上的约束(...args: any[]) => void 可以通过许多您可能会感到惊讶的类型来满足，并且您返回的函数将不能分配给这些类型。例如：

debounce(() => "oopsie", 1000)().toUpperCase(); // okay at compile time, typeError at runtime

这里，函数类型F返回一个string值；这可以分配给void-返回函数类型，如explained in the FAQ。但是debounce()当然不会返回一个string-returning函数，所以debounce()的返回类型和传入的F是不一样的。

还有：

function foo() { };
foo.prop = 123; // property declaration
debounce(foo, 1000).prop.toFixed(); // okay at compile time, TypeError at runtime

在这种情况下，我们有一个带有property declared on it 的函数。所以这里的F 类型将是一个函数类型()=>void，带有一个额外的prop 属性。但同样，debounce() 不会返回带有这个额外的prop 属性的函数，因此debounce() 的返回类型再次与传入的F 不同。

---

这里的解决方法是使debounce() 仅通用到足以代表您实际在做什么。返回的函数将采用与传入函数相同的参数列表，因此我们需要参数列表是通用的。并且返回的函数肯定会返回 void 并且不会有额外的属性。所以只有实参列表需要一个类型参数（比如A），输入和输出函数的类型都是(...args: A) => void：

export function debounce<A extends any[]>(
    fn: (...args: A) => void,
    timeout: number
): (...args: A) => void {
    let timer: NodeJS.Timeout | undefined

    return ((...args: A) => {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => fn(...args), timeout)
    })
}

编译没有错误。好的，希望有帮助；祝你好运！

Link to code