TypeScript带rest参数高阶函数类型标注报ts2556如何解决

报错原因 #

1. 原有类型标注中将参数args定义为any[]，TypeScript 无法推导args的结构，无法识别args第一个元素为this指向、剩余元素为函数入参，而bind方法要求第一个入参必须明确为this绑定对象，类型不匹配就会抛出TS2556错误。
2. 原有实现存在逻辑疏漏：fn.bind(...args)仅会返回绑定完成的新函数，没有执行调用，实际运行时无法得到预期的函数执行结果。

修正方案 #

不需要大量修改原有代码，仅调整类型标注为泛型形式、补充函数执行逻辑即可：

// 泛型自动提取原方法的this类型、参数元组类型、返回值类型
export type TDemethodise = <T, P extends unknown[], R>(fn: (this: T, ...args: P) => R) => 
  (thisArg: T, ...args: P) => R;

// 实现仅调整为显取this参数、替换bind为call（保留bind写法也可）
export const demethodise: TDemethodise = (fn) => (thisArg, ...args) => fn.call(thisArg, ...args);

如果必须保留原有bind写法，可以改成如下形式，逻辑完全等价：

export const demethodise: TDemethodise = (fn) => (thisArg, ...args) => fn.bind(thisArg)(...args);

使用效果 #

调整后调用时会自动完成类型推导，无需额外手动标注：

const slice = demethodise(Array.prototype.slice);
// 调用时自动提示参数类型：(thisArg: any[], start?: number, end?: number) => any[]
const res = slice([1,2,3,4], 1, 3); // 自动推导res类型为number[]，运行结果为[2,3]

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