TypeScript internal module usage

Question

I have a class named BMW defined in BMW.ts as follows:

///<reference path="../Thing.ts"/>

module Entities.Cars {

    import e = Entities;

    export class BMW extends Vehicle {

        public series: string;

         constructor ( model : string, series : string) {
            super("BMW", model)
            this.series = series;
        }

         drive() {
             alert("driving a bimmer is a different kind of feeling");
         }       

         toString() : string
         { 
             return this.getName() + " " + this.series + " " + this.getType();
         }
    }
}

In another file Thing.ts, I have Vehicle and Thing classes defined as follows:

module Entities {

    // Class
    export class Thing {

        private _name: string;
        private _type: string;

        // Constructor
        constructor (public name: string, public type: string) {
            this._name = name;
            this._type = type;
         }

        getName(): string { return this._name; }
        setName(name: string) { this._name = name; }


        getType(): string { return this._type; }
        setType(name: string) {
            this._type = name;
        }

        toString() : string
        { 
            return "Entities.Thing";        
        }
    }

    export class Vehicle extends Thing {

        public cargoCapacity: number;
        public fuelType: string;
        public owner: string;

        constructor (make: string, model : string) {
            super(make, model)
        }

        drive() {
        }

        toString(): string {
            return "Entities.Vehicle";
        }
    }
}

When I attempt to execute the following code after referencing Thing and BMW TypeScript files:

var car = new Entities.Cars.BMW("335i", "E90");
car.drive();

I get an exception with the following error " Microsoft JScript runtime error: Unable to get value of the property 'BMW': object is null or undefined". The generated Javascript for BMW has an error. What is wrong with my above snippet?

Valentin · Accepted Answer · 2012-10-13 15:13:46Z

6

There is nothing wrong with your code so it seems like your import order for the generated javascript files is wrong. The specification says the following:

Initialization order of the source files that make up the global module ultimately depends on the order in which the generated JavaScript files are loaded at run-time (which, for example, may be controlled by tags that reference the generated JavaScript files).

I have generated a file app.ts as follows:

///<reference path='Things.ts'/>
///<reference path='bmw/BMW.ts'/>
var car = new Entities.Cars.BMW("335i", "E90");
car.drive();

At this point you have two options:

Let the compiler determine the correct order for executing the files by generating a single output file

tsc --out app.js app.ts

Then you only have to source app.js.

Specify the correct order manually. For me, the following is the only order that works without throwing errors.

<html>
    <head>
        <script src="Things.js"></script>
        <script src="bmw/BMW.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
    </body>
</html>

answered Oct 13, 2012 at 15:13

Valentin

8,1225 gold badges35 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Klaus Nji Over a year ago

That was it, thank you. I was not referencing Thing.js and BMW.js in app.js. Right now, the TypeScript compiler is configured in my project file as follows: <Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc" -target ES5 @(TypeScriptCompile ->'"%(fullpath)"', ' ')" IgnoreExitCode="true" />. Do I change the whole thing to tsc --out app.js app.ts?

Klaus Nji Over a year ago

passed compiler options -out scripts\app.js scripts\app.ts and I see a single Javascript file containing all code. But, if all I reference is app.js, I still get Entities undefined...

Klaus Nji Over a year ago

Do not know what happened earlier. Option 1 works fine for me now. thanks again.

Arek Bal · Accepted Answer · 2012-10-13 14:10:52Z

0

Your code is fine.

My guess is that you are not placing script tags in your head element properly(wrong order, or ommitting some).

The simplest way to solve this, and to not have to remember about proper declaration sequence is to use single .js output file from tsc compiler by setting --out option.

EDIT: Depending on which js scenario you are working on(WSH, web app or some other js environment), you need to link js source files differently. With wsh for instance, you could use FileSystemObject to read a source file, then evaluate it. Or you could use AMDs...

edited Oct 13, 2012 at 14:10

answered Oct 13, 2012 at 13:55

Arek Bal

212 bronze badges

Collectives™ on Stack Overflow

TypeScript internal module usage

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related