Javascript Typescript错误运行时错误：无法读取属性'；原型&x27；扩展时未定义的

所以我在控制台中得到了上面的错误。这是由于

\u super

在传递给

\uu 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();
        }
    }
}

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

var u extends=this.u extends | |函数（d，b）{
如果（b.hasOwnProperty（p））d[p]=b[p]；
函数{this.constructor=d；}
__.原型=b.原型；
d、 原型=新的；
};
/// 
var检验；
（功能（测试）{
var Test2=（函数（_super）{
__扩展（Test2，_super）；
函数Test2（）{
_超级。打电话（这个）；
}
返回Test2；
})（测试1）；
Test.Test2=Test2；
})（测试| |（测试={}））；
//#sourceMappingURL=Test2.js.map

发生这种情况的可能原因：

四重检查

BundleConfig

是否按正确顺序连接文件。这是迄今为止最常见的错误原因

验证

Test.ts

中没有任何顶级

export

指令。这将导致该文件成为外部模块，

Test1

将不再可见

---

否则，您应该将发出的JavaScript发布到问题中，以便我们能够诊断导致问题的原因。

今天发生此错误。不确定OP场景是什么，但就我的团队而言，我们有：

TypeScript v1.8.10

基于网页包的开发构建，具有连接、源地图、无优化/丑化

角2依赖注入

在同一文件中定义的基类和派生类（例如，

dependencies.ts

）

在派生类之后定义的基类

没有编译错误或警告

显示未捕获类型错误的控制台日志：无法读取未定义的属性“prototype”

指向另一个文件（例如

client.ts

）中另一个类最后一行的内部

\u扩展
函数的调用堆栈，将这些函数作为依赖项导入

代码：

// dependencies.ts

import { Injectable } from 'angular2/core';

@Injectable()
export class LocalStorageService extends BaseStorageService {
  constructor() {
    super(localStorage);
  }
}

class BaseStorageService {
  constructor(private storage: Storage) {}
  // ...
}

以及：

//client.ts
从'angular2/core'导入{Injectable}；
从“./dependencies”导入{LocalStorageService}；
@可注射（）
导出类AuthStorageService{
构造函数（私有永久存储：LocalStorageService）{}
// ...
}//HTML上脚本的顺序很重要

假设您有一个定义抽象类的TypeScript文件
a.ts
以及一个文件
B.ts
，其中的类扩展了a.ts中的抽象类

导出抽象类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中，您必须确保一旦生成Java脚本，脚本的顺序是正确的：

<script src="/app/example/A.js"></script> <!-- A.js BEFORE -->
<script src="/app/example/B.js"></script>


就在这里，我是如何为我的案例解决这个问题的：我错过了TS文件顶部的一个引用，构建完全正常，但在运行时出现了相同的错误。添加似乎是可选的引用解决了我的运行时问题。
我遇到了相同的问题，这是由
导出默认值
stateme引起的nts。为了解决这个问题，我只需删除它们，然后以另一种方式导入所需的项目：

之前

A.T

B.T

之后

A.T

B.T

BundleConfig
仅在发布模式下连接文件，但无论哪种方式，代码的顺序都是正确的（我甚至尝试手动包含编译的
.js
文件，以100%确定）。我在上面发布了我的整个
.ts
文件（我的错误是代码复杂得多，所以我只使用上面的类型脚本创建了一个新页面）。我将对
.js
文件执行相同的操作。HTML页面上的脚本标记的顺序是什么？您是否在网页中设置了断点以查看何时分配了内容？网页中的HTML:
我没有在网页中设置断点。我将在午餐后尝试（现在是分配时间了）。这为我指明了解决同一问题的正确方向。这对我也有帮助。对于那些遇到此问题并使用多个继承级别将其所有类放在一个文件中的人，请确保它们在文件中按层次顺序排列。例如，如果您有
抽象类Human
->
抽象类类Homo扩展人类
->
类Sapien扩展Homo
那么类定义在文件中的顺序应该是相同的：人类，Homo，然后Sapien。我在午餐时重新启动了我的电脑，现在可以工作了。真奇怪。如上所述，我遇到的问题是某种奇怪的问题，通过重新启动我的电脑解决了。我问题中的代码是我用来产生错误的代码-但代码和安装程序不可能产生错误：）是的，我读到了，这就是为什么我不确定这是同一个场景。但是错误是一样的，其他人由于定义了order类而经历了错误。这可能对通过google搜索来到这里的人（比如我）有所帮助很好的描述！对我来说，我有一个未使用的类，它是在基类之前定义的。所以这个问题实际上比你描述的更一般。我在使用Typescript的ionic2项目中遇到了类似的问题。导入的一种常见方法是将它们收集在一个包含导出的ts文件中。这就是我们的问题的原因，因为其中包含了e基类和子类的xports，以某种方式打乱了导入顺序。解决方案是将基类从中拉出（我们还将其移动到另一个文件夹中），并显式地从该文件导入基类。我们还有一个通用类型的类，它使用该基类作为其类型参数
module app.example{
    "use strict";

  class MyChildClass extends MyAbstract {
    // ...
  }
}

<script src="/app/example/A.js"></script> <!-- A.js BEFORE -->
<script src="/app/example/B.js"></script>

export default MyClass;

class MyClass { ... }

import MyClass from "./A";

class MyClass2 extends MyClass { ... }

export class MyClass { ... }

import { MyClass } from "./A";

class MyClass2 extends MyClass { ... }