使用apply()绑定this失败，触发TypeScript TS2683错误求助

问题分析 #

你实现的Chain类通过apply将实例绑定到传入函数的this，但fn2的setTimeout箭头函数中访问this时触发TS2683错误，核心原因：

• 原ChainFunc类型未显式指定this指向，TypeScript无法推断函数内部this的类型
• 箭头函数的this继承自外部fn2，但fn2未添加this类型注解，导致TypeScript判定this为any且被上下文遮蔽

解决方案 #

1. 更新ChainFunc类型，明确this指向 #

修改类型定义，强制指定函数的this必须为Chain实例：

type ChainFunc = (this: Chain, ...args: any[]) => any;

2. 给fn2添加this类型注解 #

显式声明fn2的this类型为Chain，让箭头函数能正确继承该上下文：

function fn2(this: Chain, msg: string) {
  setTimeout(() => {
    console.log(this); // this类型已明确为Chain实例
    this.asyncPassRequest(msg); // 传递请求参数
  }, 1000);
}

3. 优化asyncPassRequest方法（可选） #

补全参数传递逻辑，保证责任链请求能正确向下传递：

public asyncPassRequest(...args: any[]) {
  this.successor && this.successor.syncPassRequest(...args);
}

完整修正代码 #

Chain类 #

type ChainFunc = (this: Chain, ...args: any[]) => any;

export class Chain {
  public fn: ChainFunc;
  public successor: Chain | null = null;
  
  constructor(fn: ChainFunc) {
    this.fn = fn;
  }
  
  public setSuccessor(successor: Chain | null): Chain | null {
    return this.successor = successor;
  }
  
  public syncPassRequest(...args: any[]): any {
    const res = this.fn.apply(this, args);
    console.log(this.fn.name, res);
    if (res === "nextSuccessor") {
      return this.successor && this.successor.syncPassRequest(...args);
    }
    return res;
  }
  
  public asyncPassRequest(...args: any[]) {
    this.successor && this.successor.syncPassRequest(...args);
  }
}

测试代码 #

import { Chain } from "./chain_of_responsibility";

function fn1(msg: string) {
  if (msg === "pass") {
    console.log("fn1 pass");
    return "nextSuccessor";
  }
  console.log("fn1 stop");
  return "stop";
}

function fn2(this: Chain, msg: string) {
  setTimeout(() => {
    console.log(this);
    this.asyncPassRequest(msg);
  }, 1000);
}

function fn3(msg: string) {
  if (msg === "pass") {
    console.log("fn3 pass");
    return "nextSuccessor";
  }
  console.log("fn3 stop");
  return "stop";
}

const c1 = new Chain(fn1);
const c2 = new Chain(fn2);
const c3 = new Chain(fn3);

c1.setSuccessor(c2);
c2.setSuccessor(c3);

c1.syncPassRequest("pass");

原理说明 #

• 通过给ChainFunc添加this: Chain参数，TypeScript会强制校验函数调用时的this指向，配合apply绑定确保类型匹配
• 显式声明fn2的this类型后，箭头函数会继承该类型，不再被判定为any
• 箭头函数本身不绑定this，其this始终指向定义时的外部上下文，因此只要外部this类型明确，内部就能正确访问

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