web-dev-qa-db-fra.com

Erreur d'exécution d'erreur de frappe: impossible de lire la propriété 'prototype' de non définie lors de l'extension

Je reçois donc l'erreur ci-dessus dans la console. Cela est dû au fait que _super N'est pas défini lorsqu'il est transmis à __extends (Dans le .js Généré).

Voici un code de test qui peut être utilisé pour reproduire l'erreur:

//This is the entirety of the file Test.ts
module Test {
    export class Test1 {
        public Name: string;
        public Number: number;

        constructor() {

        }
    }
}

Ensuite, dans un fichier séparé, j'ai une classe qui hérite de celle-ci:

/// <reference path="Test.ts" />
module Test {
    export class Test2 extends Test1 {
        constructor() {
            super();
        }
    }
}

Le <reference path... Ne devrait pas être nécessaire (et ne l'est pas), mais je l'ai ajouté pour voir si cela a aidé (ce n'est pas le cas).

Les fichiers sont inclus dans le bon ordre (Test.ts Puis Test2.ts) Via BundleConfig (l'exécution avec ou sans optimisations n'a aucun effet).

Je suis probablement un noob géant, mais je n'ai pas la moindre idée de ce que j'ai foiré. Toutes les autres instances de ce problème que j'ai trouvées en ligne proviennent de personnes utilisant le compilateur de ligne de commande pour combiner plusieurs fichiers TypeScript en un seul fichier. J'utilise le bundler pour cela, mais même lorsque je ne les combine pas, j'obtiens exactement le même problème.

S'il vous plaît, aidez-moi, je suis à bout de souffle!

Comme demandé, voici le javascript compilé: 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
javascriptvisual-studioasp.net-mvc-4typescript
34
Maverick

Raisons possibles que cela se produit:

  1. Vérifiez quadruple que BundleConfig concatène les fichiers dans le bon ordre. C'est de loin la cause la plus courante de cette erreur.
  2. Vérifiez que vous n'avez pas de directives export de niveau supérieur dans Test.ts. Cela entraînerait le fichier à devenir un module externe et Test1 ne serait plus visible.

À défaut, vous devez publier le JavaScript émis à la question afin que nous puissions diagnostiquer la cause du problème.

25
Ryan Cavanaugh

A commis cette erreur aujourd'hui. Je ne sais pas quel était le scénario OP, mais dans le cas de mon équipe, nous avons eu:

  1. TypeScript v1.8.10
  2. Développement de développement basé sur Webpack avec concaténation, cartes sources, aucune optimisation/uglification
  3. Injection de dépendance angulaire 2
  4. Les classes de base et dérivées sont définies dans le même fichier (disons, dependencies.ts)
  5. Classe de base définie après classe dérivée
  6. Pas d'erreurs de compilation ni d'avertissements
  7. Journal de la console affichant Uncaught TypeError: Cannot read property 'prototype' of undefined
  8. Pile d'appels pointant sur la fonction interne __extends Sur la dernière ligne d'une autre classe, dans un autre fichier (disons client.ts), En les important comme dépendances

Dans du code:

// dependencies.ts

import { Injectable } from 'angular2/core';

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

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

et:

// 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

Problème résolu en définissant la classe de base avant la classe dérivée . Après une recherche et une lecture rapides, cela semble lié à des problèmes de TypeScript connus (et non résolus?), Par exemple # 21 et # 1842 .

HTH

18
superjos

L'ordre des scripts sur votre HTML est important.

Supposons que vous ayez un fichier TypeScript A.ts qui définit une classe abstraite et un fichier B.ts avec une classe qui étend la classe abstraite dans A.ts

exporter la classe abstraite ShipmentsListScope implémente 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 {
    // ...
  }
}

puis dans votre HTML, vous devez vous assurer que l'ordre des scripts est correct une fois que les javascripts ont été générés:

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

J'ai eu le même problème et il a été causé par export default déclarations. Pour le corriger, j'ai simplement supprimé ceux-ci et importé les éléments requis d'une autre manière:

AVANT

A.ts 

export default MyClass;

class MyClass { ... }

B.ts 

import MyClass from "./A";

class MyClass2 extends MyClass { ... }

APRÈS

A.ts 

export class MyClass { ... }

B.ts 

import { MyClass } from "./A";

class MyClass2 extends MyClass { ... }
2
Jenny O'Reilly

Je laisse juste ici comment j'ai résolu ce problème pour mon cas: j'ai raté une référence en haut du fichier TS et c'était tout à fait correct pour la construction, alors que j'avais la même erreur lors de l'exécution. L'ajout de la référence qui semblait facultative a résolu mon problème d'exécution.

1
bviale