Typescript错误运行时错误:扩展时无法读取未定义的属性“prototype”

时间:2014-06-26 00:01:37

标签: javascript visual-studio asp.net-mvc-4 typescript

所以我在控制台中收到了上述错误。 _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)通过//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 包含在内(无论是否有优化运行都没有任何效果)。

我可能是一个巨大的菜鸟,但我没有丝毫的线索,我已经搞砸了。我在网上找到的这个问题的所有其他实例都来自使用命令行编译器将多个Typescript文件合并为一个文件的人。我使用捆绑工具来做到这一点,但即使我不合并它们,我也会遇到完全相同的问题。

请帮帮我,我的智慧结束了!

根据要求,这里是已编译的javascript: Test.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

Test2.js:

{{1}}

5 个答案:

答案 0 :(得分:25)

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

  1. 四次检查BundleConfig是否以正确的顺序连接文件。这是导致该错误的最常见原因。
  2. 确认您在export中没有任何顶级Test.ts指令。这会导致文件成为外部模块,Test1将不再可见。
  3. 如果不这样做,您应该将发出的JavaScript发布到问题中,以便我们可以诊断导致问题的原因。

答案 1 :(得分:18)

今天发生了这个错误。不确定什么是OP场景,但在我的团队案例中我们有:

  1. TypeScript v1.8.10
  2. 基于Webpack的开发构建,包含连接,源映射,无优化/ uglification
  3. Angular 2依赖注入
  4. 同一个文件中定义的基类和派生类(比如Column 1 | Column 2 | Column 3 1 a 100 1 r 100 2 a 50 2 q 50 3 a 10
  5. 基类在派生类
  6. 之后定义
  7. 没有编译错误也没有警告
  8. 显示dependencies.ts
  9. 的控制台日志
  10. 调用堆栈指向另一个类的最后一行的内部Uncaught TypeError: Cannot read property 'prototype' of undefined函数,在另一个文件中(比如__extends),将它们作为依赖项导入
  11. 在代码中:

    client.ts

    // dependencies.ts
    
    import { Injectable } from 'angular2/core';
    
    @Injectable()
    export class LocalStorageService extends BaseStorageService {
      constructor() {
        super(localStorage);
      }
    }
    
    class BaseStorageService {
      constructor(private storage: Storage) {}
      // ...
    }
    

    通过在派生类之前定义基类来解决问题。经过快速搜索和阅读,这似乎与已知(和未解决的?)TypeScript问题有关,例如#21#1842

    HTH

答案 2 :(得分:3)

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中,你必须确保在生成javascripts之后脚本的顺序是正确的:

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

答案 3 :(得分:2)

我遇到了同样的问题,它是由export default语句引起的。要修复它,我只需删除它们并以另一种方式导入所需的项目:

<强> BEFORE

A.ts

export default MyClass;

class MyClass { ... }

B.ts

import MyClass from "./A";

class MyClass2 extends MyClass { ... }

<强> AFTER

A.ts

export class MyClass { ... }

B.ts

import { MyClass } from "./A";

class MyClass2 extends MyClass { ... }

答案 4 :(得分:1)

离开这里我是如何为我的案例解决这个问题的:我错过了TS文件顶部的引用,它对构建完全没问题,而我在运行时遇到了同样的错误。添加似乎是可选的引用解决了我的运行时问题。