Typescript ошибка времени выполнения ошибки: невозможно прочитать свойство 'prototype' of undefined при расширении

Итак, я получаю вышеуказанную ошибку в консоли. Это вызвано тем, что _super является undefined, когда он передал __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 then Test2.ts) через BundleConfig (работа с оптимизацией или без нее не имеет никакого эффекта).

Я, вероятно, гигантский нооб, но я не знаю, что я испортил. Все другие случаи этой проблемы, которые я нашел в Интернете, - это люди, использующие компилятор командной строки для объединения нескольких файлов Typescript в один файл. Я использую bundler для этого, но даже когда я их не совмещаю, я получаю ту же самую проблему.

Пожалуйста, помогите мне, я нахожусь на своем пути!

В соответствии с запросом здесь скомпилированный 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

Ответы

Ответ 1

Возможные причины этого:

  • Четырежды проверьте, что BundleConfig объединяет файлы в правильном порядке. Это, безусловно, самая распространенная причина этой ошибки.
  • Убедитесь, что у вас нет директив export верхнего уровня в Test.ts. Это приведет к тому, что файл станет внешним модулем, а Test1 больше не будет отображаться.

В противном случае вы должны опубликовать испущенный JavaScript на вопрос, чтобы мы могли диагностировать причину проблемы.

Ответ 2

Повлиял на эту ошибку сегодня. Не уверен, что такое сценарий OP, но в моем случае у нас было:

  • TypeScript v1.8.10
  • Разработка на основе Webpack с конкатенацией, исходными картами, оптимизацией/углификацией
  • Angular 2 инъекции зависимостей
  • Оба базовых и производных класса, определенные в одном файле (например, 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.

НТН

Ответ 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 вы должны убедиться, что порядок скриптов правильный после создания javascript:

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

Ответ 4

У меня была та же проблема, и она была вызвана операторами 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 { ... }

Ответ 5

Просто оставив здесь, как я решил эту проблему для своего случая: я пропустил ссылку в верхней части файла TS, и это было полностью нормально для сборки, тогда как у меня была такая же ошибка во время выполнения. Добавление ссылки, которая, по-видимому, была опциональной, позволила решить мою проблему во время выполнения.