Typescript和等效的js代碼

我從typescript開始，我遇到了John Papa的教程。他有以下幾點：Typescript和等效的js代碼

// 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; 
    }

我在這裏錯過了什麼嗎？

來源

2016-12-06 Jack_of_All_Trades

JavaScript的有效正是你有什麼建議。請注意，'Car'的值將是該匿名函數的*返回值*，並且匿名函數作爲'var'初始化的一部分執行。因此'Car'最終就是你認爲應該是的小功能。 – Pointy

你問你爲什麼它被包裝在一個函數執行中，並被賦值給一個變量而不是僅僅具有該函數？ –

現在，爲什麼這樣呢？它是由轉譯器生成的代碼。在翻譯TypeScript'class'聲明的一般情況下，該結構是有意義的。 – Pointy

你是正確的，但沒有爲打字稿代碼看起來像一個理由......

一旦你添加了一些方法，你的類變得更加明顯：

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; 
}());

來源

2016-12-06 14:44:21

Typescript和等效的js代碼

回答

相關問題