Javascript Girl
  1. Javascript Girl
  3. Erreur typographique erreur d'exécution: Impossible de lire la propriété 'prototype' d'indéfinie lors de l'extension
Intereting Posts
Javascript dans jsf / icefaces Comment puis-je comparer deux cordes mélangées? Parser Javascript pour une expression simple Étude Gmap: plusieurs itinéraires / directions automatiques avec waypoints illimités cliquez sur clic .trim () en JavaScript ne fonctionne pas dans IE Données POST au format JSON Les fonctions d'alerte et de confirmation sont-elles intégrées dans JavaScript, ou font-elles partie du DOM? Graphiques C3 – contenu de l'info-bulle cliquable Filtrer et réorganiser les résultats en utilisant node.js et mongodb en fonction de la date (mois) Voir si Input a des espaces avec jQuery Comment ajouter des boutons personnalisés à JqGrid add / edit forms? Utilisation de la fonction javascript pour rendre HTML Capture d'un screenshot de bureau avec javascript Pouvez-vous définir la propriété ] interne d'un objet ECMAScript? Android Webview: Exécution de javascript à partir de la méthode java appelée depuis javascript

Erreur typographique erreur d'exécution: Impossible de lire la propriété 'prototype' d'indéfinie lors de l'extension

Je reçois donc l'erreur ci-dessus dans la console. Il est causé par _super être indéfini lorsqu'il est passé à __extends (dans les .js générés).

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 celui-ci: 

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

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

Les fichiers sont inclus dans le bon ordre ( Test.ts puis Test2.ts ) via BundleConfig (le fonctionnement avec ou sans optimisations n'a aucun effet).

Je suis probablement un noob géant, mais je n'ai pas le moindre indice de ce que j'ai dérangé. Toutes les autres instances de ce problème que j'ai trouvé en ligne proviennent de personnes utilisant le compilateur de ligne de commande pour combiner plusieurs fichiers de type en un seul fichier. J'utilise le bundler pour le faire, mais même si je ne les combine pas, j'ai le même problème.

Aidez-moi, je suis à ma fin!

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

Des raisons possibles sont les suivantes:

  1. Quadruple: vérifiez que BundleConfig concatène les fichiers dans le bon ordre. C'est de loin la cause la plus fréquente de cette erreur.
  2. Vérifiez que vous n'avez aucune directive d' export niveau supérieur dans Test.ts Cela entraînerait que le fichier deviendrait un module externe et Test1 ne serait plus visible.

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

Inévité dans cette erreur aujourd'hui. Je ne sais pas quel était le scénario OP, mais dans le cas de mon équipe, nous avions:

  1. TypeScript v1.8.10
  2. Création de développement basé sur Webpack avec concaténation, cartes source, pas d'optimisation / uglification
  3. Injection de dépendance angulaire 2
  4. La base et les classes dérivées définies dans le même fichier (par exemple, dependencies.ts )
  5. Classe de base définie après classe dérivée
  6. Pas d'erreurs de compilation ni d'avertissements
  7. Uncaught TypeError: Cannot read property 'prototype' of undefined console montrant Uncaught TypeError: Cannot read property 'prototype' of undefined
  8. La pile d'appel indiquant la fonction __extends interne sur la dernière ligne d'une autre classe, dans un autre fichier (par exemple client.ts ), en important ceux en tant que 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é aux problèmes connus (et non résolus?) TypeScript, par exemple # 21 et # 1842 .

HTH

L'ordre des scripts sur vos questions HTML.

Disons que vous avez 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

Export 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 { // ... } }

Ensuite, 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>

En partant de là comment j'ai résolu ce problème pour mon cas: j'ai manqué une référence en haut du fichier TS et c'était totalement correct pour la construction, alors que j'avais la même erreur sur l'exécution. En ajoutant la référence qui semblait être facultatif, j'ai résolu mon problème d'exécution.

J'ai eu le même problème et cela a été causé par export default déclarations par export default . Pour le réparer, je les ai simplement supprimées et j'ai importé les éléments requis d'une autre manière:

AVANT

A.ts 

 export default MyClass; class MyClass { ... }

B.ts 

 import MyClass from "./MyClass"; class MyClass2 extends MyClass { ... }

APRÈS

A.ts 

 export class MyClass { ... }

B.ts 

 import { MyClass } from "./MyClass"; class MyClass2 extends MyClass { ... }