[英]Typescript error runtime error: Cannot read property 'prototype' of undefined when extending
所以我在控制台中遇到上述错误。 它是由_super
在传递给__extends
(在生成的.js
)时未定义引起的。
这是一些可用于重现错误的测试代码:
//This is the entirety of the file Test.ts
module Test {
export class Test1 {
public Name: string;
public Number: number;
constructor() {
}
}
}
然后在一个单独的文件中,我有一个继承自那个的类:
/// <reference path="Test.ts" />
module Test {
export class Test2 extends Test1 {
constructor() {
super();
}
}
}
<reference path...
不应该被需要(并且不是),但是我添加它以查看它是否有帮助(它没有)。
文件包含在正确的顺序( Test.ts
然后Test2.ts
)通过BundleConfig
(运行有或没有优化没有任何影响)。
我可能是一个巨大的菜鸟,但我没有丝毫的线索我搞砸了什么。 我在网上找到的这个问题的所有其他实例都来自使用命令行编译器将多个Typescript文件合并为一个文件的人。 我正在使用捆绑器来做到这一点,但即使我没有将它们组合起来,我也会遇到完全相同的问题。
请帮助我,我的智慧结束了!
根据要求,这里是编译的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:
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
发生这种情况的可能原因:
BundleConfig
是否以正确的顺序连接文件。 到目前为止,这是该错误的最常见原因。 Test.ts
没有任何顶级export
指令。 这将导致文件成为外部模块,并且Test1
将不再可见。 如果做不到这一点,您应该将发出的JavaScript发布到问题中,以便我们可以诊断导致问题的原因。
今天发生了这个错误。 不确定什么是OP场景,但在我的团队的情况下,我们有:
dependencies.ts
) Uncaught TypeError: Cannot read property 'prototype' of undefined
__extends
函数,在另一个文件(比如client.ts
)中,将它们作为依赖项导入 在代码中:
// dependencies.ts
import { Injectable } from 'angular2/core';
@Injectable()
export class LocalStorageService extends BaseStorageService {
constructor() {
super(localStorage);
}
}
class BaseStorageService {
constructor(private storage: Storage) {}
// ...
}
和:
// 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
通过在派生类之前定义基类来解决问题。 快速搜索和阅读后,这似乎与已知(和未解决的?)TypeScript问题有关,例如#21和#1842 。
HTH
HTML上的脚本顺序很重要。
假设您有一个TypeScript文件A.ts
定义了一个抽象类和一个文件B.ts
其中一个类扩展了A.ts中的抽象类
export abstract class ShipmentsListScope实现IShipmentsListScope {
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 {
// ...
}
}
然后在你的HTML中,你必须确保生成javascripts后脚本的顺序是正确的:
<script src="/app/example/A.js"></script> <!-- A.js BEFORE -->
<script src="/app/example/B.js"></script>
我有同样的问题,它是由export default
语句引起的。 要修复它,我只需删除它们并以另一种方式导入所需的项目:
之前
A.ts
export default MyClass;
class MyClass { ... }
B.ts
import MyClass from "./A";
class MyClass2 extends MyClass { ... }
后
A.ts
export class MyClass { ... }
B.ts
import { MyClass } from "./A";
class MyClass2 extends MyClass { ... }
刚离开这里我是如何为我的案例解决这个问题的:我错过了TS文件顶部的引用,它对构建完全没问题,而我在运行时遇到了同样的错误。 添加似乎是可选的引用解决了我的运行时问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.