前端小知識--TypeSript和JavaScript究竟是什麼關係？

從 TypeScript 到 ES6 到 ES5

在我初學前端的很長一段時間，不肯意碰git，不肯意碰框架，老是嫌麻煩，連ES6也沒有怎麼去弄明白，真的很淺顯，很長時間也都在學習一些很落後的知識，止步不前，我以爲不少人應該也和我同樣。
前端變化真的很快，國內國外的情況也不同，因此很大程度上取決於環境。
想學好前端，真的要主動，而後對全部的英文文檔耐心一點。
那麼從JavaScript到ES6到TypeScript，初學的你可能和我同樣困惑，那麼接下來看看它們到底是怎麼一回事吧~

首先來看三個名詞的具體解釋：

1.JavsScript

JavaScript（一般簡寫爲JS）是一種輕量的、解釋性的、面向對象的頭等函數語言，其最廣爲人知的應用是做爲網頁的腳本語言，但同時它也在不少非瀏覽器環境下使用。JS是一種動態的基於原型和多範式的腳本語言，支持面向對象、命令式和函數式的編程風格。

JavaScript運行在網頁的客戶端，能被用來設計和編程網頁在事件發生時的行爲。JavaScript不只易學並且強大，所以普遍用於對網頁的控制。

JS基礎學習看這裏：
https://developer.mozilla.org...

2.ES6（ECMAScript 6）

ECMAScript 是 JavaScript 的標準。截至 2012 年，全部的現代瀏覽器都完整了支持 ECMAScript 5.1，舊式的瀏覽器至少支持 ECMAScript 3 標準。
在2015年6月17日，ECMA國際組織發佈了 ECMAScript 的第六版，該版本正式名稱爲ECMAScript 2015，但一般被稱爲 ECMAScript 6 或者ES6。
自此，ECMAScript每一年發佈一次新標準。

ES6學習看這裏：
http://es6.ruanyifeng.com/#do...

3.TypeScript

TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個超集，並且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。安德斯·海爾斯伯格，C#的首席架構師，已工做於TypeScript的開發。

TypeScript學習看這裏：
中文官網：https://www.tslang.cn/index.html
英文官網：http://www.typescriptlang.org/
（學會看官網文檔，比你去找各類教程有用得多。）

劃重點：

• TypeScript 是 ES6 JavaScript 類型化的超集。

• ES6 JavaScript 是 ES5 JavaScript 的超集。

• ES5 是能夠在全部現代瀏覽器中運行的 JavaScript。

降級的過程是

• TypeScript 降級到 帶裝飾器的 ES6 。

• 帶裝飾器的 ES6 降級到 沒有裝飾器的 ES6 (普通 ES6)。

• 沒有裝飾器的 ES6 降級到 ES5 。

TypeScript 翻譯到 帶裝飾器的 ES6 時，移除了類屬性訪問修飾符，如public和private。 移除了大部分的類型聲明，如:string和:boolean。 但保留了用於依賴注入的構造函數參數類型。

帶裝飾器的 ES6 翻譯到 普通 ES6 時，移除了全部的裝飾器和剩下的類型。 必須在構造函數中聲明屬性（this.title = '...'），而不是在類的代碼體中。

最後，普通 ES6翻譯成ES5，缺乏的主要特性是import和class聲明。

From Angular 2

https://angular.cn/guide/ts-t...

對 普通 ES6 的翻譯，能夠從相似 TypeScript 快速開始的設置開始， 調整相應代碼。而後用 Babel 進行轉譯，使用es2015預設值。 要在 Babel 中使用裝飾器和註釋，還需安裝angular2預設值。