TypeScript继承BaseController报错：Cannot read properties of undefined (reading 'handleRequest')

问题原因 #

你遇到的错误确实是this绑定丢失导致的：当你把AuthController的login/register方法作为Express路由处理函数传递时，Express调用这些方法时不会绑定类实例的this，导致方法内部的this变成undefined，自然无法访问父类的handleRequest方法。

修复方案 #

方案1：在构造函数中绑定this #

在AuthController中添加构造函数，手动将方法的this绑定到类实例：

class AuthController extends BaseController {
  constructor() {
    super();
    // 绑定this到实例，确保方法内部的this指向当前AuthController实例
    this.login = this.login.bind(this);
    this.register = this.register.bind(this);
  }

  // 原login、register方法保持不变
  async login(request: Request, response: Response, next: NextFunction): Promise<void> { ... }
  async register(request: Request, response: Response, next: NextFunction): Promise<void> { ... }
}

方案2：将方法改为箭头函数（实例属性） #

箭头函数会捕获类实例的上下文，避免this丢失，写法更简洁：

class AuthController extends BaseController {
  // 把login改成箭头函数形式的实例属性
  login = async (request: Request, response: Response, next: NextFunction): Promise<void> => {
    const { email, password } = request.body;
    try {
      await this.handleRequest(loginService, { email, password }, response, next);
    } catch (error) {
      next(error);
    }
  };

  // register方法同理
  register = async (request: Request, response: Response, next: NextFunction): Promise<void> => {
    const { firstName, lastName, email, password } = request.body;
    try {
      await this.handleRequest(registerService, { firstName, lastName, email, password }, response, next);
    } catch (error) {
      next(error);
    }
  };
}

更优实现方式：用组合替代继承 #

类继承在这种场景下属于过度设计，推荐用工具函数+组合的方式减少冗余，代码更灵活：

1. 封装独立的handleRequest工具函数 #

把handleRequest从类中抽离成独立工具函数，不需要继承：

// src/utils/handleRequest.ts
import { Response, NextFunction } from "express";

interface IServiceResult {
  message: string;
  code: number;
  data?: any;
}

export const handleRequest = async (
  serviceFunction: (params: any) => Promise<IServiceResult>,
  params: any,
  response: Response,
  next: NextFunction
): Promise<void> => {
  try {
    const { message, code, data } = await serviceFunction(params);
    response.status(code).json({
      status: "ok",
      message,
      data,
    });
  } catch (error) {
    console.error("Unhandled Error:", error);
    next(error);
  }
};

2. 在控制器中直接使用工具函数 #

此时AuthController不需要继承任何类，直接导入工具函数使用：

import { NextFunction, Request, Response } from "express";
import { handleRequest } from "../utils/handleRequest";
import { loginService, registerService } from "@/services/auth";

class AuthController {
  async login(request: Request, response: Response, next: NextFunction): Promise<void> {
    const { email, password } = request.body;
    await handleRequest(loginService, { email, password }, response, next);
  }

  async register(request: Request, response: Response, next: NextFunction): Promise<void> {
    const { firstName, lastName, email, password } = request.body;
    await handleRequest(registerService, { firstName, lastName, email, password }, response, next);
  }
}

export default new AuthController();

3. 进一步封装：生成路由处理函数的高阶函数 #

可以再封装一个高阶函数，消除重复的参数提取和try/catch：

// src/utils/routeHandler.ts
import { Request, Response, NextFunction } from "express";
import { handleRequest } from "./handleRequest";

interface IServiceResult {
  message: string;
  code: number;
  data?: any;
}

// 定义参数提取函数类型
type ParamsExtractor = (req: Request) => any;

export const createRouteHandler = (
  service: (params: any) => Promise<IServiceResult>,
  extractParams: ParamsExtractor
) => {
  return async (req: Request, res: Response, next: NextFunction) => {
    try {
      const params = extractParams(req);
      await handleRequest(service, params, res, next);
    } catch (err) {
      next(err);
    }
  };
};

然后在控制器中直接生成路由处理函数，连类都可以省略：

// src/controllers/auth.controller.ts
import { createRouteHandler } from "../utils/routeHandler";
import { loginService, registerService } from "@/services/auth";

// 生成login路由处理函数
export const login = createRouteHandler(loginService, (req) => ({
  email: req.body.email,
  password: req.body.password,
}));

// 生成register路由处理函数
export const register = createRouteHandler(registerService, (req) => ({
  firstName: req.body.firstName,
  lastName: req.body.lastName,
  email: req.body.email,
  password: req.body.password,
}));

这种方式完全消除了冗余代码，同时保持了代码的可读性和灵活性，符合现代JavaScript/TypeScript的编程理念。

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