TypeScript介紹與安裝

本節咱們來學習 TypeScript 語言。 TypeScript 看名字就和 JavaScript 很像，事實上它們二者也確實有關聯。TypeScript 是 JavaScript 的超集，它對 JavaScript 進行了一些規範和補充。

TypeScript 介紹

• TypeScript 能夠編譯成純 JavaScript，編譯出來的 JavaScript 能夠在任何遊覽器上運行。
• TypeScript 能夠在任何瀏覽器，任何計算機和任何操做系統上運行，並且它是開源的。
• TypeScript 擴展了 JavaScript 的語法，因此任何現有的 JavaScript 程序能夠運行在 TypeScript 環境中。
• TypeScript 起源於使用 JavaScript 開發的大型項目，因爲 JavaScript 語言自己的侷限性，難以勝任和維護大型項目開發。所以微軟開發了 TypeScript ，使得其可以勝任開發大型項目。

什麼是超集？

上面咱們說 TypeScript 是 JavaScript 的超集。那什麼是超集呢？

超集的定義：若是一個集合 S2 中的每個元素都在集合 S1 中，且集合 S1 中可能包含 S2 中沒有的元素，則集合 S1 就是 S2 的一個超集。

這也就是說，JavaScript 的全部功能 TypeScript 裏都有，但 TypeScript 裏的功能 JavaScript 就未必有，畢竟 TypeScript 擴展提高了 JavaScript 的編寫體驗，例如：靜態類型檢查 JavaScript 就沒有，而依賴 TypeScript 就能夠很方便進行靜態類型檢查，因此 TypeScript 是 JavaScript 的超集。且 TypeScript 編寫的代碼，最終均可以生成標準的 JavaScript 代碼。

TypeScript 的優點

• Typescript 支持 ES6 規範的語言，ES6 規範指出將來客戶端腳本語言的發展方向，Typescript 腳本語言的語法會成爲將來一段時間客戶端語言的主流語法。
• 類型檢測：在 Typescript 中爲變量指定具體類型時，IDE 會作出類型檢測，而後告訴你這裏可能會有錯誤，這個特性能夠幫助咱們減小在開發階段犯錯概率。
• 語法提示：在 IDE 裏編寫 Typescript 代碼時，IDE 會根據你當前的上下文，把你能用的類、變量、方法和關鍵字都給你提示出來。直接選擇，這個特性提升開發效率。
• 是 Angular2 框架的開發語言，所以 Typescript 有利於咱們學習 Angular2 框架。Angular2 是一款開源的 JavaScript 庫，由谷歌維護，用來協助單一頁面應用程序運行。

TypeScript 安裝

在咱們安裝 TypeScript 以前，須要保證已經安裝好了 Node.js，若是沒有安裝請先安裝好 Node.js。

安裝完 Node.js 以後，就能夠開始安裝 TypeScript 啦。

如何安裝node.js

Node.js 下載地址：https://nodejs.org/en/download/，你們下載好後根據步驟安裝便可。

安裝完成後，咱們能夠在電腦上打開終端，在終端中輸入 node -v 命令，以下圖：

若是按下回車後，界面成功輸出版本號則說明 Node.js 已經安裝成功，上圖表示成功安裝了 v12.16.1 版本的 Node.js。

如何安裝TypeScript

Node.js 自帶 npm，咱們能夠經過 npm 全局安裝 TypeScript ，在命令行中輸入以下命令：

npm install -g typescript

按下回車鍵就會自動開始安裝，安裝完成後，顯示以下圖所示表示：

其中 -g 表示全局安裝，typescript 表示安裝的程序名。

若是想要檢測安裝是否成功，能夠在剛剛的窗口中輸入 tsc -v 命令，這樣能夠查看到 TypeScript 的版本號，下圖中顯示版本號爲 3.8.3：

Visual Studio Code

咱們要學習 TypeScript，首先選擇一個適合本身的 IDE（集成開發環境）。 有不少 IDE 都支持 TypeScript 插件，例如 Visual Studio Code、Sublime Text 2、WebStorm、Eclipse 等。而後我選擇的是 Visual Studio Code ，因此首先咱們須要下載安裝 Visual Studio Code，若是你電腦上有就不須要從新安裝了。

Visual Studio Code 下載地址：https://code.visualstudio.com/。

下載後根據提示安裝便可，安裝完成後，打開 Visual Studio Code 軟件，而後找到應用商店：

在搜索框中輸入 TypeScript ，點擊綠色的安裝按鈕，便可安裝 TypeScript 插件，以下圖所示（下圖是已經安裝好了插件，綠色按鈕就會消失）：

此時準備工做差很少完成了，下一節咱們開始學習 Typescript 的使用。