Why does TypeScript wrap class in anonymous function?

Question

Let's have, for example, a Dog class:

class Dog {
    static food;
    private static static_var = 123;

    constructor(private name) {}

    speak() {
        console.log(this.name + ', I eat ' + Dog.food + ', ' + Dog.static_var);
    }
}

Compiled to JS:

var Dog = (function () {
    function Dog(name) {
        this.name = name;
    }

    Dog.prototype.speak = function () {
        console.log(this.name + ', I eat ' + Dog.food + ', ' + Dog.static_var);
    };

    Dog.static_var = 123;
    return Dog;
})();

This works equally well and is less complicated:

function Dog(name) {
    this.name = name;
}

Dog.prototype.speak = function () {
    console.log(this.name + ', I eat ' + Dog.food + ', ' + Dog.static_var);
};

Dog.static_var = 123;

Is there any (other than "aesthetic") reason for using the anonymous function wrapper?

I expect it is to limit the scope of whatever is defined within the class. — bhspencer, Jun 25 '15 at 13:27
yes, that's why I tagged it typescript. Well, a keyword to be exact. — MightyPork, Jun 25 '15 at 13:28
@bhspencer yes but it never puts any variable or anything into the scope — MightyPork, Jun 25 '15 at 13:28
Yeah. I just looked through all the js that has been created in one of my TypeScript projects and don't see anything defined in the scope of the anonymous function. I am curious to see what the answer is. — bhspencer, Jun 25 '15 at 13:30

score 6 · Accepted Answer · edited May 23 '17 at 12:10

6

The main difference between the two has to do with hoisting.

TypeScript compiles the class into an assignment of a function expression to a variable. That means the resulting constructor only starts to exist at the point of assignment. In the code that occurs before, Dog will be bound to undefined.

On the other hand, your implementation uses a plain function that is subject to hoisting -- any code in that scope, including code that occurs before the function, can invoke the Dog constructor.

I guess TypeScript prefers to ensure that a class does not exist before it is actually defined, possibly to allow redefining the class at several points in the same scope.

edited May 23 '17 at 12:10

Community

1
1

answered Jun 25 '15 at 13:31

Frédéric Hamidi

258,201
41
486
479

The only other thing I can add to this is that in big classes - not like the one provided in the question - minification will result in a smaller file as all variables in the closure will be minified. – Michael Coxon Jun 25 '15 at 13:34
@MichaelCoxon you mean *private* variables, I guess? – MightyPork Jun 25 '15 at 13:35
@MightyPork yes, and all of the class name references – Michael Coxon Jun 25 '15 at 13:35
oh right, that makes sense. A bit obscure reason, but valid too – MightyPork Jun 25 '15 at 13:36
Something like AngularJS (which in the next version is going to be written in TS) would benefit from this rather largely... – Michael Coxon Jun 25 '15 at 13:40
To prevent hosting, we can use the simple way `var Dog=function(){}`, I still can't understand why using more complicated way, wrapped in anonymous function. – Kevin Sep 28 '16 at 02:48

Why does TypeScript wrap class in anonymous function?

1 Answers1