本節我們來學習 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
的使用。