TypeScript 类继承的行为与其等效的 ES6 不同答案

【问题标题】：TypeScript class inheritance behaving differently than its ES6 equivalentTypeScript 类继承的行为与其等效的 ES6 不同
【发布时间】：2020-11-15 02:52:56
【问题描述】：

我正在为带有 express 和 TypeScript 项目的 node.js 构建错误处理中间件。在其中我有一个扩展Error 的AppError 类。它看起来像这样：

class AppError extends Error {
  public readonly internalCode: number | undefined;

  public readonly httpCode: number;

  public readonly message: string;

  constructor(httpCode: number, message: string, internalCode?: number) {
    super();
    this.internalCode = internalCode;
    this.message = message;
    this.httpCode = httpCode;
  }

  public generateReport(): GenericReport {
    return {
      code: this.internalCode,
      message: this.message,
    };
  }
}

我目前将new AppError() 扔到/error 路由中，以使用以下中间件errorHandler 捕获它：

function errorHandler(err: Error, request: Request, response: Response, next: NextFunction,): Response {
  if (err instanceof AppError) {
    const report = err.generateReport();

    return response.status(err.httpCode).json(report);
  }

  return response.status(500).json(err);
}

在中间件内部，我试图在 err [[Prototype]] 链上找到 AppError，但在 TypeScript 代码中验证总是失败。然而，在使用 Babel 编译它并使用 node 运行 JS 版本之后，err instanceof AppError 解析为 true。为什么 TS 代码中没有呢？

在上面的示例中，Object.getPrototypeOf(err) 返回我Error {}，将err 类型更改为AppError 或any 不会影响结果。

据我了解，新构造的对象（在new AppError() 运行之后）应该是[[Prototype]]-链接到AppError。在 TS 服务器开启的情况下运行curl http://localhost:3333/error，我得到{ "internalCode": 1, "message": "This is an error", "httpCode": 500 }，这意味着err 确实是由AppError() 创建的。

this GitHub repository 中有一个关于该问题的工作示例。对此主题的任何澄清将不胜感激。

【问题讨论】：

打字稿代码失败是什么意思？你并没有真正运行打字稿代码。它被转换为 Javascript。你看过输出吗？可能会给你一个提示。您的输出是 es5 可能是有问题的，它在类之前。
@Evert 是的……那是我的问题。我在 tsconfig 中有 es5 作为目标。非常感谢你。我在这上面花了最后一个小时，但我什至没有想到。

标签： javascript node.js typescript express prototype

【解决方案1】：

我看了你的代码。几个cmets：

切换到稍后的 ecmascript 输出可能会解决此问题，因为您的输出现在不会生成类，因为 EcmaScript 5 还没有它们。
不使用 ts-node 工具是个好主意，尤其是当您尝试调试类似的东西时。它可以提供时髦的结果，而且能够查看正在执行的真实 javascript 真是太好了。
我查看了您的存储库，我相信您可能应该只使用instanceof 来完成您正在尝试做的事情。我认为就您的错误中间件而言，instanceof 更有意义。

如果你有兴趣，我还写了一个错误处理中间件来做类似的事情：

https://github.com/curveball/problem/blob/master/src/index.ts

【讨论】：