TypeScript类绑定外部回调时如何正确访问类成员属性

• 箭头函数的this是定义时静态绑定外层作用域的this，无法通过bind/call/apply在运行时修改，你在second方法中对回调执行的bind操作对箭头函数完全无效。
• 示例中first是箭头函数，默认严格模式下外层作用域的this为undefined，TS检测到你访问undefined的member属性，因此抛出TS2532错误。

方案1：改用普通函数作为回调，配合this类型标注 #

普通函数的this支持运行时绑定，同时给回调参数加上this类型标注，让TS正确识别回调内的this类型：

// caller
const first = (): void => {
  const testClass = new TestClass();
  // 替换箭头函数为普通匿名函数
  testClass.second(function() {
    console.log(this.member) // 类型正常，无报错
  })
}

// TestClass实现
class TestClass {
  member: string = 'test';

  // 给回调标注this类型为TestClass
  second(cb: (this: TestClass) => void) {
    // 直接用call调用更简洁，不需要单独存self变量
    cb.call(this);
  }
}

方案2：直接传递类实例作为回调参数（更推荐） #

完全避开this绑定的语义坑，直接把类实例当作参数传给回调，可读性和可维护性更高：

// caller
const first = (): void => {
  const testClass = new TestClass();
  testClass.second((instance) => {
    console.log(instance.member) // 无任何this相关的类型问题
  })
}

class TestClass {
  member: string = 'test';

  // 回调参数标注为TestClass类型
  second(cb: (instance: TestClass) => void) {
    cb(this);
  }
}

方案3：直接在外层作用域访问实例引用 #

如果不需要做通用封装，可直接在回调中访问当前作用域下已经声明的类实例：

const first = (): void => {
  const testClass = new TestClass();
  testClass.second(() => {
    // 直接访问作用域内的testClass变量，不需要依赖this
    console.log(testClass.member)
  })
}

class TestClass {
  member: string = 'test';
  second(cb: () => void) {
    cb(); // 不需要做任何bind操作
  }
}

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