TypeScript中Function.prototype.bind传参超5个出现类型报错如何解决？

• 首先，JavaScript 原生的Function.prototype.bind本身没有参数数量限制，该问题是 TypeScript 内置类型定义的重载限制导致：TS 标准库中对bind的类型重载只覆盖了最多绑定5个预置参数的场景，当传入的绑定参数超过5个时，类型推断会进入兜底逻辑，无法正确识别绑定后函数的参数结构。
• 其次window.requestAnimationFrame执行回调时会默认传入一个 number 类型的高精度时间戳，当类型推断失效时，TS 会将这个时间戳错误匹配为你方法的第一个入参PixelGlyphSequence类型，因此抛出参数类型不兼容的错误。

方案1：用箭头函数替代bind（最推荐） #

箭头函数会继承当前执行上下文的this指向，不需要手动绑定，且支持传入任意数量的参数，类型推断完全正常，代码更简洁：

private fade_in(glyph_sequence: PixelGlyphSequence, steps: number, color_delta: number, ending_animation: EndingAnimation, extraParam: YourExtraType)
{
    // ... 业务逻辑

    // 直接用箭头函数包裹，无需bind，可传入任意数量参数
    window.requestAnimationFrame(() => this.fade_in(glyph_sequence, steps, color_delta, ending_animation, extraParam)); 
}

方案2：封装参数为单个配置对象 #

如果需要传递的参数较多，建议将散列参数封装为单个配置对象，既可以规避bind的参数类型推断问题，也能提升方法的可维护性，后续新增参数不需要修改方法签名：

// 提前定义参数类型
interface FadeInOptions {
  glyph_sequence: PixelGlyphSequence
  steps: number
  color_delta: number
  ending_animation: EndingAnimation
  extraParam: YourExtraType
}

private fade_in(options: FadeInOptions)
{
    const { glyph_sequence, steps, color_delta, ending_animation, extraParam } = options
    // ... 业务逻辑

    window.requestAnimationFrame(this.fade_in.bind(this, options)); 
}

方案3：手动声明类型（适合必须用bind的场景） #

如果你坚持使用bind传多参数，可以手动对绑定后的函数做类型断言，绕过TS的自动推断：

window.requestAnimationFrame(this.fade_in.bind(this, glyph_sequence, steps, color_delta, ending_animation, extraParam) as FrameRequestCallback);

bind调用时会生成一个新的绑定函数实例，但现代浏览器的JS引擎对bind有深度优化，在requestAnimationFrame每秒60次的调用频率下，产生的性能损耗完全可以忽略，不会造成动画卡顿。除非你的场景同时存在数千个并行动画，且性能检测工具明确定位到bind是性能瓶颈，否则不需要为了性能牺牲代码可读性。箭头函数和bind在该场景下的性能差异几乎可以忽略，没有明显优劣。

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