Typescript and equivalent js code

Question

I am starting with typescript and I came across John Papa's tutorial. He had the following:

// TypeScript
class Car {  
    // Property (public by default)
    engine: string;

    // Constructor 
    // (accepts a value so you can initialize engine)
    constructor(engine: string) {
        this.engine = engine;
    }
}

the equivalent js code:

// JavaScript
var Car = (function () {  
    function Car(engine) {
        this.engine = engine;
    }
    return Car;
})();

It got me confused. Shouldn't it be:

    function Car(engine) {
        this.engine = engine;
    }

Am I missing something here?

The JavaScript effectively is exactly what you suggest. Note that the value of Car will be the return value from that anonymous function, and that anonymous function is executed as part of the var initialization. Thus Car ends up being exactly that small function you think it should be. — Pointy
– Pointy, Commented Dec 6, 2016 at 14:40
Are you asking why it's being wrapped in a function execution and assigned to a variable instead of just having the function? — Nitzan Tomer
– Nitzan Tomer, Commented Dec 6, 2016 at 14:41
Now, why is it that way? It's code produced by a transpiler. In the general case of translating TypeScript class declarations, that structure makes sense. — Pointy
– Pointy, Commented Dec 6, 2016 at 14:41
Thank you guys for clarification. I guess I looked into the equivalent code and did not even think for a moment that it might be just from the transpiler. — Jack_of_All_Trades
– Jack_of_All_Trades, Commented Dec 6, 2016 at 14:44
Also, when targeting es6 the compiler will keep the class syntax as it is supported in es6 javascript — Nitzan Tomer
– Nitzan Tomer, Commented Dec 6, 2016 at 14:50

Remo H. Jansen · Accepted Answer · 2016-12-06 14:56:55Z

You are right but there is a reason for the TypeScript code to look like that...

It becomes more obvious once you add some methods to your class:

class Car {  
    engine: Engine;
    constructor(engine: Engine) {
        this.engine = engine;
    }
    drive() { 
        this.engine.start();
    }
}

The output JS look as follows:

var Car = (function () {
    function Car(engine) {
        this.engine = engine;
    }
    Car.prototype.drive = function () {
        this.engine.start();
    };
    return Car;
}());

As you can see TS uses a IIFE to wrap the entire class declaration.

It is a nice way to keep everything together.

Another example using decorators:

@decorate
class Car {  
    engine: Engine;
    constructor(engine: Engine) {
        this.engine = engine;
    }
    drive() { 
        this.engine.start();
    }
}

And the output JS:

var Car = (function () {
    function Car(engine) {
        this.engine = engine;
    }
    Car.prototype.drive = function () {
        this.engine.start();
    };
    Car = __decorate([
        decorate
    ], Car);
    return Car;
}());

Collectives™ on Stack Overflow

Typescript and equivalent js code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related