Typescript: How to import classes ("Uncaught ReferenceError")

javascript class oop typescript webstorm

12,634

Solution 1

I 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.

Solution 2

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.

12,634

Moritz Göckel

Updated on September 16, 2022

Comments

Moritz Göckel over 1 year

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?

Moritz Göckel almost 9 years

Thank you, that really worked. I use Webstorm and I have added the argument --out "generated.js" to the compiler command line options. (Its under preferences). So in the HTML im no longer using the "main", but the "generated" file. So thanks, you fixed it :)
Baradwaj Aryasomayajula almost 8 years

Great answer... But what if the case is I am trying to call the car.js from test.js...., I cannot include them into a single file...
MrKWatkins over 7 years

If you can't make a single file then can you put two <script> tags in your HTML?
MarioAraya over 7 years

@MrKWatkins the link typescriptlang.org/Handbook#modules-splitting-across-files does not exists anymore... And I dont find the "Combine JavaScript output into file" option