TypeScript类方法执行报Cannot read property 'client' of undefined错误

这个报错是典型的类方法this上下文绑定丢失：
普通类方法的this是动态绑定的，仅在以实例.方法()形式调用时，this才会指向当前实例；一旦将方法作为独立引用传递给其他调用方，就会丢失默认的this绑定。当exec方法内部的this变为undefined时，读取this.client就会触发Cannot read property 'client' of undefined的报错。结合你基于Express实现路由的代码结构，最常见的触发场景是路由注册时直接把exec作为回调透传给Express，没有做上下文绑定。

• 定位项目中路由注册的代码块，检查是否存在类似app.get(route.name, route.exec)的直接传递方法引用的写法：这种写法下Express内部调用回调时不会保留原实例的this指向，必然会触发上下文丢失
• 可在exec方法第一行临时加日志打印this：严格模式下如果输出undefined、非严格模式下输出全局对象（Node环境为global），即可实锤为this绑定问题
• 检查TS配置：如果开启了strict系列配置中的noImplicitThis，未正确绑定this的类方法在编译阶段就会抛出类型提示，可快速定位问题

以下三种方案任选其一即可，无需混用：

• 方案1：将类方法改为箭头函数类属性（推荐）
  箭头函数没有自身的this指向，会捕获定义时的词法上下文（也就是HomeRoute的实例），完全不会随调用方式变化丢失this。修改后的类代码如下：

  export default class HomeRoute implements IRoute {
      readonly name = "/";
      constructor(public client: RaznarTicketClient) {}
      // 注意：这里是类属性赋值箭头函数，不是普通类方法定义
      public exec = async (_: Request, res: Response) => {
          const tickets = await this.client.ticket.getTickets();
          return res.json(tickets);
      }
  }
  

• 方案2：注册路由时手动绑定this
  无需改动类内部代码，在路由注册环节用bind强制将exec的this绑定到对应路由实例即可，适合批量改造存量路由的场景：

  // 路由注册写法
  app.get(route.name, route.exec.bind(route))
  

• 方案3：在构造函数中统一绑定回调方法
  针对类内有多个需要作为回调传递的方法的场景，可以在构造函数中统一完成this绑定，避免每次注册路由重复写bind逻辑：

  constructor(public client: RaznarTicketClient) {
      // 统一绑定所有作为回调的类方法
      this.exec = this.exec.bind(this)
  }
  

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