如何为TypeScript错误处理中间件的err参数添加AppError类型？

1. 先完善AppError类的类型声明 #

原代码里的AppError没有显式声明自定义属性，TypeScript无法识别这些属性的类型，需要先补充成员变量的类型定义：

class AppError extends Error {
  // 显式声明自定义属性的类型
  statusCode: number;
  status: 'fail' | 'error';
  isOperational: boolean;

  constructor(message: string, statusCode: number) {
    super(message);

    this.statusCode = statusCode;
    this.status = `${statusCode}`.startsWith('4') ? 'fail' : 'error';
    this.isOperational = true;
    Error.captureStackTrace(this, this.constructor);
  }
}

注意：把原代码里的Number（大写）改为number（小写原始类型），这是TypeScript的标准写法。

2. 为错误中间件的err参数指定联合类型并添加类型守卫 #

因为中间件可能收到普通Error或自定义的AppError，所以用联合类型Error | AppError，再通过instanceof做类型守卫区分处理：

const errorHandler = (err: Error | AppError, req: Request, res: Response, next: NextFunction) => {
  console.log(err);

  // 类型守卫：判断当前err是否为AppError实例
  if (err instanceof AppError) {
    return res.status(err.statusCode).json({
      status: err.status,
      message: err.message,
      isOperational: err.isOperational
    });
  }

  // 处理非预期的普通错误
  res.status(500).json({
    status: 'error',
    message: '服务器发生未知错误'
  });
};

为什么要这么做 #

• 显式声明AppError的属性后，TypeScript能准确识别这些成员的类型，避免访问属性时出现类型报错。
• 使用instanceof类型守卫可以在对应的代码块中安全访问AppError的专属属性，同时兼容普通Error的处理逻辑，保证代码的健壮性。

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