typescript 扩展类时无法读取未定义的属性“原型”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38708304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot read property 'prototype' of undefined when extending classes
提问by Get Off My Lawn
I am having an issue with extending items, where I am getting:
我在扩展项目时遇到问题，我得到：
Uncaught TypeError: Cannot read property 'prototype' of undefined
未捕获的类型错误：无法读取未定义的属性“原型”
From what I have read items need to be defined in a particular order, so here is what I am doing, as it seems like they are in the correct order.
从我所读到的项目需要按特定顺序定义，所以这就是我正在做的事情，因为它们似乎按正确的顺序排列。
This doesn't happen at compile time, but at runtime in the browser. I am compiling the files into one file with browserifyand tsify.
这不会在编译时发生，而是在浏览器运行时发生。我编译文件合并成一个文件，browserify和tsify。
Here is my entry point main.ts:
这是我的入口点main.ts：
import GameSmartWeb from './GameSmartWeb';
window.gs = new GameSmartWeb();
It then calls this file GameSmartWeb.tswhich references a GUI class:
然后它调用这个引用 GUI 类的文件GameSmartWeb.ts：
import GUI from './apis/GUI';
export default class GameSmartWeb {
public get gui(): GUI { return new GUI(); }
}
Then the GUI class apis/GUI.tslooks somewhat like this:
然后 GUI 类apis/GUI.ts看起来有点像这样：
export default class GUI extends GameSmartWeb {
public get rewards(): Rewards { return new Rewards(); }
}
class Rewards extends GUI {
// More methods
}
When looking in the browser it says the error is here:
在浏览器中查看时，它说错误在这里：
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); // The error is on this line
};
var GUI = (function (_super) {
__extends(GUI, _super); // This is the call to the function
// more auto generated code
});
回答by Arg0n
This happened to me today, though it does not seem to be the same cause as for you. I'm writing an answer anyway for other people coming here in the future.
这件事今天发生在我身上，尽管它似乎与你的原因不同。无论如何，我正在为将来来到这里的其他人写一个答案。
I had my files set up like this:
我的文件设置如下：
item.ts:
项目.ts：
export class Item {
myAwesomeFunction() {
...
}
}
index.ts(to be able to reference smoothly):
index.ts（为了能够顺利引用）：
...
export * from './item';
...
other.item.ts:
其他.item.ts：
import { ..., Item, ... } from './index';
export class OtherItem extends Item ... {
...
}
And this caused the error for me:
这导致了我的错误：
Cannot read property 'prototype' of undefined
无法读取未定义的属性“原型”
After changing other.item.tsto the following, it worked:
将other.item.ts更改为以下内容后，它起作用了：
import { ... } from './index';
import { Item } from './item';
export class OtherItem extends Item ... {
...
}
回答by Cristina Tapes
I had the same issue. In my case, the order of class files in the bundle config file was the reason of it. I had the file of the derived class specified before the one of the base class, switching the order, fixed it.
我遇到过同样的问题。在我的例子中，包配置文件中类文件的顺序是它的原因。我在基类之一之前指定了派生类的文件，切换顺序，修复了它。
回答by Get Off My Lawn
The issue was because in my compiler, the order of the files were wrong. When ordering the files in the correct order the error goes away and the JavaScript works.
问题是因为在我的编译器中，文件的顺序是错误的。当以正确的顺序对文件进行排序时，错误就会消失并且 JavaScript 可以工作。
So, the order in the compiler should look like this:
因此，编译器中的顺序应如下所示：
'GameSmartWeb',
'GUI'
回答by Glenn Bullock
For me, strangely, I was trying to extend a component I'm importing via webpack from a node_modules package (angular-dual-listbox), and when I imported it using the "from 'angular-dual-listbox'", it failed with the above message. When I imported from 'angular-dual-listbox/index', viola!
对我来说，奇怪的是，我试图扩展我通过 webpack 从 node_modules 包（angular-dual-listbox）导入的组件，当我使用“from 'angular-dual-listbox'”导入它时，它失败了与上述消息。当我从 'angular-dual-listbox/index' 导入时，中提琴！
回答by Naveen Yadav
In My Case, I was using browserify.
在我的案例中，我使用的是 browserify。
- Browserify file path: browserify/bundle.js
- Client.js file path: public/js/client.js
- Import file path: app.js
- Browserify 文件路径：browserify/bundle.js
- Client.js 文件路径：public/js/client.js
- 导入文件路径：app.js
So when i'm importing bundle.js, app.js file path is different then loading from client.js (as i'm making changes in client.js and then converting it in bundle.js)
因此，当我导入 bundle.js 时，app.js 文件路径与从 client.js 加载不同（因为我在 client.js 中进行更改，然后在 bundle.js 中进行转换）
