打字稿和等效的js代码

Question

我从打字稿开始，遇到了约翰·帕帕（John Papa）的教程。 他有以下几点：

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

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

等效的js代码：

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

这让我感到困惑。 不应该是：

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

我在这里想念什么吗？

Answer 1

没错，但是TypeScript代码看起来像是有原因的...

一旦向类中添加了一些方法，它就会变得更加明显：

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

输出JS如下所示：

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

如您所见，TS使用IIFE来包装整个类声明。

这是将所有内容保持在一起的好方法。

使用装饰器的另一个示例：

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

并输出JS：

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