javascript - typescript 和等效的js代码

Question

我从 typescript 开始，我看到了 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;
}());