Im new at Typescript. I like the idea, that the compiler will point most errors out, because he really gets the code. Now I have made an test-project, no compiler errors, but an exception on runtime:
Uncaught ReferenceError: Boat is not defined(anonymous function) @ Main.ts:7
Obviously the imports do not work. But why? I tried with amd and with commonjs and got the same error.
Here the 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>
Main.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 />";
Vehicle.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;
}
}
}
Car.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 :)";
}
}
}
Boat.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";
}
}
}
I use Webstorm, the compiler outputs no errors, and the *.js and *.map.js files are created. In the browser there is no output. Only the console prints "Uncaught ReferenceError: Boat is not defined(anonymous function) @ Main.ts:7"
Why this exception? How do I import the classes correctly?
Im new at Typescript. I like the idea, that the compiler will point most errors out, because he really gets the code. Now I have made an test-project, no compiler errors, but an exception on runtime:
Uncaught ReferenceError: Boat is not defined(anonymous function) @ Main.ts:7
Obviously the imports do not work. But why? I tried with amd and with commonjs and got the same error.
Here the 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>
Main.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 />";
Vehicle.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;
}
}
}
Car.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 :)";
}
}
}
Boat.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";
}
}
}
I use Webstorm, the compiler outputs no errors, and the *.js and *.map.js files are created. In the browser there is no output. Only the console prints "Uncaught ReferenceError: Boat is not defined(anonymous function) @ Main.ts:7"
Why this exception? How do I import the classes correctly?
Share Improve this question edited Dec 31, 2020 at 15:42 Moritz Göckel asked Jul 1, 2015 at 12:01 Moritz GöckelMoritz Göckel 1471 gold badge1 silver badge8 bronze badges2 Answers
Reset to default 9I suspect your project is set to compile each .ts file into a separate .js file. If this is the case then only Main.js will be loaded, but boat.js, car.js, etc won't have, giving you an error.
If you change your project to compile the output into a single file then the TypeScript compiler will use the <reference> tags to pull in the other .ts files and build a single .js file you can reference with a tag.
If you're using Visual Studio there is an option 'Combine JavaScript output into file" under TypeScript Build of your project settings. If you using the command line compiler then the --out flag can be used to produce a single file - see http://www.typescriptlang.org/Handbook#modules-splitting-across-files for more info.
I had a similar issue, and it was due to the html file not importing all the javascript files. To solve your situation you would add Vehicle.js, Car.js and Boat.js to your index.html file.