TypeScript：匿名函数调用类函数报“属性不存在”错误的原因

场景重现 #

现有如下定义的Service，以及在组件中调用该Service的代码，执行时TypeScript抛出错误，具体代码和错误信息如下：

Service代码 #

export class MyService {
    doSomething(callbacks: { onSuccess: (data: Object) => any, onError: (err: any) => any }) {
        // 业务逻辑实现
    }
}

组件调用代码 #

export class MyComponent implements OnInit {
    someFunction(): void { 
        this.myService.doSomething(
            {
                onSuccess(data: Object) {
                    onSuccessFunction(data) // 此处报错
                },
                onError(err: any) {
                }
            }
        )
    }
    
    onSuccessFunction(data: Object) {
        // 处理成功逻辑
    }
}

抛出的TypeScript错误 #

Property 'initActiveOrders' does not exist on type '{ onSuccess: (data: Object) => any; onError: (err: HttpErrorResponse) => any; }'.ts(2339)

错误原因分析 #

1. 回调函数上下文绑定错误 #

在匿名函数onSuccess中直接调用onSuccessFunction(data)时，函数的执行上下文是当前的回调对象（即传给doSomething的{onSuccess, onError}对象），而非MyComponent的实例。这个回调对象中并没有定义onSuccessFunction方法，所以TypeScript会报错找不到该属性。

要解决这个问题，需要保留组件实例的上下文：

• 使用箭头函数（箭头函数会继承外层作用域的this）：

  onSuccess: (data: Object) => {
      this.onSuccessFunction(data);
  }
  

• 提前保存组件实例的this引用：

  someFunction(): void { 
      const that = this;
      this.myService.doSomething(
          {
              onSuccess(data: Object) {
                  that.onSuccessFunction(data);
              },
              onError(err: any) {
              }
          }
      )
  }
  

2. 方法名不匹配（错误信息与代码的差异） #

错误提示中提到的是initActiveOrders不存在，但代码里调用的是onSuccessFunction，这说明存在以下一种情况：

• 实际代码中调用的是initActiveOrders，但MyComponent类中并未定义该方法；
• 代码粘贴时出现笔误，错误信息对应的是另一处代码的问题；
• 方法名拼写错误，比如组件里定义的是onSuccessFunction，但调用时写成了initActiveOrders。

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