如何在 TypeScript 类中扩展 ES6 类答案

【问题标题】：How to extend an ES6 class in a TypeScript class如何在 TypeScript 类中扩展 ES6 类
【发布时间】：2019-09-16 22:30:48
【问题描述】：

我有一个用 ES6 编写的 JavaScript 类：

// MyClass.js
export default class MyClass {
  myfunction() {
    console.log('myfunction called');
  }
}

我想用 TypeScript 类扩展这个类：

// MyTSClass.ts
import MyClass from './MyClass';

class MyTSClass extends MyClass {
  public initialize() {
    this.myfunction();
  }
}

这会产生 TypeScript 编译器错误：

TS2339：“MyTSClass”类型上不存在属性“myfunction”

我在 tsconfig 中将 esModuleInterop 设置为 true。

我试图制作一个声明文件，认为这可能会有所帮助：

// MyClass.d.ts
export = MyClass;

declare class MyClass {
  myfunction: void;
}

这让编译器很高兴，但是在浏览器中生成的代码中我看到了一些意想不到的东西，并且控制台日志没有打印出来：

class MyTSClass extends WEBPACK_IMPORTED_MODULE_1__["MyClass"]...

我做错了什么？

【问题讨论】：

编译器是否满意和生成的代码无法正常运行不一定相关。你已经做了正确的事情来编译它，现在你需要弄清楚你的代码为什么不能工作。首先阅读您遇到的错误，或者如果没有错误，请弄清楚它在做什么，以及它需要做什么。
简而言之，你已经解决了一个问题，现在你有另一个问题，而且目前这里没有足够的信息来满足minimal reproducible example 重现问题的资格，因为你所说的一切它是“功能不起作用”。
谢谢，我更新了示例以在未打印的原始函数中显示console.log。我没有包含 webpack config、tsconfig 等，因为我不确定哪些部分是相关的。我希望我做错了什么对于有经验的人来说很容易识别，但我可以花时间尽快编写一个更完整的示例。
你没有实例化类并在任何地方使用它。

标签： javascript typescript

【解决方案1】：

从您提供的信息中很难判断，但我将从调用 initialize 的任何内容开始。我假设您不是要使用 constructor 来代替？在 Chrome 中，您可以使用 debugger; 语句在代码中的特定点启动调试器，我认为这比设置断点更容易。从那里，您可以单步执行代码并查看发生了什么。您还可以对您的类的实例进行 console.log 以检查其原型链，以确保存在 myfunction 方法。

【讨论】：

“通过查看 X 开始调试”不是答案。最好等待 OP 充分澄清问题以使问题完全可以回答。
我很欣赏对否决票的解释，但我认为调试是 OP 如何找到答案的。最终，如果他学会调试，他将能够更好地自己找到答案。
谢谢，我很尴尬地承认问题出在名为 initialize 的类中。我接受了这个答案，因为它很有帮助。