[英]Typescript error runtime error: Cannot read property 'prototype' of undefined when extending
So I'm getting the above error in the console. 所以我在控制台中遇到上述错误。 It's caused by
_super
being undefined when it's passed to __extends
(in the generated .js
). 它是由
_super
在传递给__extends
(在生成的.js
)时未定义引起的。
Here's some test code that can be used to reproduce the error: 这是一些可用于重现错误的测试代码:
//This is the entirety of the file Test.ts
module Test {
export class Test1 {
public Name: string;
public Number: number;
constructor() {
}
}
}
Then in a separate file I have a class that inherits from that one: 然后在一个单独的文件中,我有一个继承自那个的类:
/// <reference path="Test.ts" />
module Test {
export class Test2 extends Test1 {
constructor() {
super();
}
}
}
The <reference path...
shouldn't be needed (and isn't), but I added it to see if it helped (it didn't). <reference path...
不应该被需要(并且不是),但是我添加它以查看它是否有帮助(它没有)。
The files are included in the correct order ( Test.ts
then Test2.ts
) via BundleConfig
(running with or without optimisations doesn't have any effect). 文件包含在正确的顺序(
Test.ts
然后Test2.ts
)通过BundleConfig
(运行有或没有优化没有任何影响)。
I am probably being a giant noob, but I haven't the slightest clue what I've messed up. 我可能是一个巨大的菜鸟,但我没有丝毫的线索我搞砸了什么。 All the other instances of this problem I've found online are from folks using the command line compiler to combine multiple Typescript files into one single file.
我在网上找到的这个问题的所有其他实例都来自使用命令行编译器将多个Typescript文件合并为一个文件的人。 I'm using the bundler to do that, but even when I don't combine them, I get the exact same issue.
我正在使用捆绑器来做到这一点,但即使我没有将它们组合起来,我也会遇到完全相同的问题。
Please help me, I'm at my wits end! 请帮助我,我的智慧结束了!
As requested, here's the compiled javascript: Test.js: 根据要求,这里是编译的javascript:Test.js:
//This is the entirety of the file Test.ts
var Test;
(function (Test) {
var Test1 = (function () {
function Test1() {
}
return Test1;
})();
Test.Test1 = Test1;
})(Test || (Test = {}));
//# sourceMappingURL=Test.js.map
Test2.js: Test2.js:
var __extends = this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
/// <reference path="Test.ts" />
var Test;
(function (Test) {
var Test2 = (function (_super) {
__extends(Test2, _super);
function Test2() {
_super.call(this);
}
return Test2;
})(Test.Test1);
Test.Test2 = Test2;
})(Test || (Test = {}));
//# sourceMappingURL=Test2.js.map
Possible reasons this is happening: 发生这种情况的可能原因:
BundleConfig
is concatenating the files in the correct order. BundleConfig
是否以正确的顺序连接文件。 This is by far the most common cause of that error. export
directives in Test.ts
. Test.ts
没有任何顶级export
指令。 This would cause the file to become an external module and Test1
would no longer be visible. Test1
将不再可见。 Failing that, you should post the emitted JavaScript to the question so we can diagnose what's causing the issue. 如果做不到这一点,您应该将发出的JavaScript发布到问题中,以便我们可以诊断导致问题的原因。
Incurred in this error today. 今天发生了这个错误。 Not sure what was the OP scenario, but in my team's case we had:
不确定什么是OP场景,但在我的团队的情况下,我们有:
dependencies.ts
) dependencies.ts
) Uncaught TypeError: Cannot read property 'prototype' of undefined
Uncaught TypeError: Cannot read property 'prototype' of undefined
__extends
function on the last line of another class, in another file (say client.ts
), importing those as dependencies __extends
函数,在另一个文件(比如client.ts
)中,将它们作为依赖项导入 In code: 在代码中:
// dependencies.ts
import { Injectable } from 'angular2/core';
@Injectable()
export class LocalStorageService extends BaseStorageService {
constructor() {
super(localStorage);
}
}
class BaseStorageService {
constructor(private storage: Storage) {}
// ...
}
and: 和:
// client.ts
import { Injectable } from 'angular2/core';
import { LocalStorageService } from './dependencies';
@Injectable()
export class AuthStorageService {
constructor(private permanentStorage: LocalStorageService) { }
// ...
} // <-- call stack pointed here with inner '__extends' function
Problem solved by defining base class before derived class. 通过在派生类之前定义基类来解决问题。 After a quick search & read, this seems related to known (and unresolved?) TypeScript issues, eg #21 and #1842 .
快速搜索和阅读后,这似乎与已知(和未解决的?)TypeScript问题有关,例如#21和#1842 。
HTH HTH
The order of the scripts on your HTML matters. HTML上的脚本顺序很重要。
Say you have a TypeScript file A.ts
that defines an abstract class and a file B.ts
with a class that extends the abstract class in A.ts 假设您有一个TypeScript文件
A.ts
定义了一个抽象类和一个文件B.ts
其中一个类扩展了A.ts中的抽象类
export abstract class ShipmentsListScope implements IShipmentsListScope { export abstract class ShipmentsListScope实现IShipmentsListScope {
A.ts
: A.ts
:
module app.example{
"use strict";
interface IMyInterface{
// ..
}
export abstract class MyAbstract implements IMyInterface{
// ..
}
}
B.ts
module app.example{
"use strict";
class MyChildClass extends MyAbstract {
// ...
}
}
then in your HTML you have to ensure that the order of the scripts is correct once the javascripts have been generated: 然后在你的HTML中,你必须确保生成javascripts后脚本的顺序是正确的:
<script src="/app/example/A.js"></script> <!-- A.js BEFORE -->
<script src="/app/example/B.js"></script>
I had the same problem and it was caused by export default
statements. 我有同样的问题,它是由
export default
语句引起的。 To fix it I simply removed those and imported the required items another way: 要修复它,我只需删除它们并以另一种方式导入所需的项目:
BEFORE 之前
A.ts A.ts
export default MyClass;
class MyClass { ... }
B.ts B.ts
import MyClass from "./A";
class MyClass2 extends MyClass { ... }
AFTER 后
A.ts A.ts
export class MyClass { ... }
B.ts B.ts
import { MyClass } from "./A";
class MyClass2 extends MyClass { ... }
Just leaving here how I solved this issue for my case : I missed a reference at the top of the TS file and it was totally ok for the build, whereas I had the same error on runtime. 刚离开这里我是如何为我的案例解决这个问题的:我错过了TS文件顶部的引用,它对构建完全没问题,而我在运行时遇到了同样的错误。 Adding the reference that seemed to be optional solved my runtime issue.
添加似乎是可选的引用解决了我的运行时问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.