Tapuscrit: Comment faire pour importer des classes (“Uncaught ReferenceError”)
Im nouveau à la Machine. J'aime l'idée, que le compilateur les erreurs en plus, parce que, vraiment, il obtient le code. Maintenant que j'ai fait un test de projet, pas d'erreurs de compilation, mais une exception à l'exécution:
Uncaught ReferenceError: le Bateau n'est pas défini(fonction anonyme) @ Principal.ts:7
Évidemment les importations ne fonctionnent pas. Mais pourquoi? J'ai essayé avec amd et avec commonjs et obtenu la même erreur.
Voici le code:
index.html
<!DOCTYPE html>
<html>
<head>
<title>TypeScript Test</title>
<script data-main="main" type="text/javascript" src="require.js"></script>
</head>
<body>
<span id="output"></span>
</body>
</html>
Principal.ts
///<reference path='Vehicle.ts'/>
///<reference path='Car.ts'/>
///<reference path='Boat.ts'/>
var outputElement = document.getElementById('output');
var vehicleOne: Vehicle.Vehicle = new Boat.Boat("One");
var car: Car.Car = new Car.Car("Two");
var vehicleTwo: Vehicle.Vehicle = car;
outputElement.innerHTML = vehicleOne.do() + " " + vehicleOne.getName() + "<br />"
+ vehicleTwo.do() + " " + vehicleTwo.getName() + "<br />"
+ car.do() + " " + car.getName() + " " + car.doCar() + "<br />";
Véhicule.ts
module Vehicle{
export class Vehicle
{
private name: string;
constructor (name: string)
{
this.name = name;
}
do() : string
{
return "Im a vehicle";
}
getName() : string
{
return this.name;
}
}
}
Voiture.ts
///<reference path='Vehicle.ts'/>
module Car {
export class Car extends Vehicle.Vehicle {
constructor(name:string) {
super("CAR: " + name);
}
do():string {
return "Im a car";
}
doCar():string {
return "Only cars can do this :)";
}
}
}
Bateau.ts
///<reference path='Vehicle.ts'/>
module Boat {
export class Boat extends Vehicle.Vehicle {
constructor(name:string) {
super("BOAT " + name);
}
do():string {
return "Im a boat";
}
}
}
- Je utiliser Webstorm, le compilateur sorties pas d'erreurs, et l' *.js et *.map.js les fichiers sont créés. Dans le navigateur, il n'y a pas de sortie. Seule la console affiche "Uncaught ReferenceError: le Bateau n'est pas défini(fonction anonyme) @ Principal.ts:7"
Pourquoi cette exception? Comment puis-je importer les classes correctement?
Vous devez vous connecter pour publier un commentaire.
Je soupçonne que votre projet est défini à la compilation de chaque .ts fichier dans un autre .fichier js. Si c'est le cas, alors seulement Main.js sera chargé, mais boat.js, car.js, etc ne pas avoir, vous donnant une erreur.
Si vous modifiez votre projet pour compiler le fichier de sortie en un seul fichier, puis le Tapuscrit compilateur utilisera la <reference> balises de tirer dans l'autre .les fichiers ts, et de construire une seule .js fichiers, vous pouvez faire référence à une étiquette.
Si vous utilisez Visual Studio il y a une option "Combiner JavaScript de sortie dans le fichier" sous la Machine à Construire des paramètres de votre projet. Si vous utilisez le compilateur en ligne de commande puis l' --out indicateur peut être utilisé pour produire un seul fichier - voir http://www.typescriptlang.org/Handbook#modules-splitting-across-files pour plus d'info.
J'ai eu un problème similaire, et il était dû pour le fichier html de ne pas importer tous les fichiers javascript. Pour résoudre votre situation, vous devez ajouter Vehicle.js, Car.js et Boat.js pour votre index.html fichier.