TypeScript介紹與安裝

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

TypeScript 介紹

  • TypeScript 可以編譯成純 JavaScript,編譯出來的 JavaScript 可以在任何遊覽器上運行。

  • TypeScript 可以在任何瀏覽器,任何計算機和任何操作系統上運行,而且它是開源的。

  • TypeScript 擴展了 JavaScript 的語法,所以任何現有的 JavaScript 程序可以運行在 TypeScript 環境中。

  • TypeScript 起源於使用 JavaScript 開發的大型項目,由於 JavaScript 語言本身的侷限性,難以勝任和維護大型項目開發。因此微軟開發了 TypeScript ,使得其能夠勝任開發大型項目。

什麼是超集?

上面我們說 TypeScriptJavaScript 的超集。那什麼是超集呢?

超集的定義:如果一個集合 S2 中的每一個元素都在集合 S1 中,且集合 S1 中可能包含 S2 中沒有的元素,則集合 S1 就是 S2 的一個超集。

這也就是說,JavaScript 的所有功能 TypeScript 裏都有,但 TypeScript 裏的功能 JavaScript 就未必有,畢竟 TypeScript 擴展提升了 JavaScript 的編寫體驗,例如:靜態類型檢查 JavaScript 就沒有,而依賴 TypeScript 就可以很方便進行靜態類型檢查,所以 TypeScriptJavaScript 的超集。且 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 CodeSublime Text 2WebStormEclipse 等。然後我選擇的是 Visual Studio Code ,所以首先我們需要下載安裝 Visual Studio Code,如果你電腦上有就不需要重新安裝了。

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

下載後根據提示安裝即可,安裝完成後,打開 Visual Studio Code 軟件,然後找到應用商店:

在搜索框中輸入 TypeScript ,點擊綠色的安裝按鈕,即可安裝 TypeScript 插件,如下圖所示(下圖是已經安裝好了插件,綠色按鈕就會消失):

此時準備工作差不多完成了,下一節我們開始學習 Typescript 的使用。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章