1.2　搭建TypeScript開發(fā)環(huán)境

要使用TypeScript進(jìn)行編程，需要先搭建TypeScript開發(fā)環(huán)境。搭建工作并不復(fù)雜，接下來(lái)將詳細(xì)介紹。

1.2.1　安裝Node.js

TypeScript的安裝需要使用npm工具，而npm運(yùn)行在Node.js上，因此需要先安裝Node.js。

前面已經(jīng)提到，JavaScript原本只能在瀏覽器端使用，應(yīng)用面有限。要實(shí)現(xiàn)服務(wù)器端的功能，我們必須換一種語(yǔ)言。2009年，Ryan Dahl基于Chrome的JavaScript開源引擎（V8引擎），開發(fā)并發(fā)布了Node.js運(yùn)行環(huán)境，使JavaScript能夠在服務(wù)端運(yùn)行。

打開Node.js官網(wǎng)，選擇Node.js版本，如圖1-3所示。官網(wǎng)通常提供兩個(gè)版本。長(zhǎng)期維護(hù)版是穩(wěn)定版本，官方會(huì)為其提供長(zhǎng)達(dá)兩年的技術(shù)支持、文檔更新等服務(wù)，因此建議優(yōu)先下載該版本。下載最新嘗鮮版之后，你可以體驗(yàn)Node.js的最新特性，但可能會(huì)存在一些穩(wěn)定性問(wèn)題，讀者可根據(jù)自己的需要下載。

圖1-3 選擇Node.js版本

下載后雙擊安裝文件即可安裝，安裝過(guò)程非常簡(jiǎn)單，只需要選好安裝路徑并持續(xù)單擊“下一步”按鈕，直到出現(xiàn)Custom Setup界面，如圖1-4所示。注意，應(yīng)至少選擇Node.js runtime（Node.js運(yùn)行環(huán)境）、npm package manager（npm包管理工具）、Add to PATH（將Node.js安裝目錄配置到系統(tǒng)變量PATH中）這3項(xiàng)。

圖1-4　Custom Setup界面

安裝完成后，打開命令行窗口，輸入以下命令查看Node.js運(yùn)行環(huán)境以及npm包管理工具是否安裝成功。

$ node --version
$ npm --version

命令運(yùn)行結(jié)果如圖1-5所示。如果顯示了Node.js和npm的當(dāng)前版本，則表示安裝成功。

圖1-5 命令運(yùn)行結(jié)果

1.2.2　安裝TypeScript

接下來(lái)，使用npm工具安裝TypeScript。

npm（node package manager）是Node.js平臺(tái)默認(rèn)的包管理工具，也是世界上最大的JavaScript軟件倉(cāng)庫(kù)之一，使用它可以輕松安裝及發(fā)布各類基于Node.js運(yùn)行的JavaScript軟件。

打開命令行窗口，執(zhí)行以下命令即可安裝TypeScript。

$ npm install -g typescript

提示：由于npm庫(kù)默認(rèn)使用國(guó)外的倉(cāng)庫(kù)地址，因此若下載速度過(guò)于緩慢，可以設(shè)置成國(guó)內(nèi)的鏡像倉(cāng)庫(kù)地址，命令如下。

$ npm config set registry http://registry.npm.taobao.org/

要切換回默認(rèn)的倉(cāng)庫(kù)地址，執(zhí)行以下命令即可。

$ npm config set registry https://registry.npmjs.org/

安裝完成后，使用tsc命令來(lái)執(zhí)行TypeScript的相關(guān)代碼。執(zhí)行以下命令可驗(yàn)證安裝結(jié)果，并查看tsc命令的使用方法。

$ tsc

tsc命令的執(zhí)行結(jié)果如圖1-6所示。

圖1-6 tsc命令的執(zhí)行結(jié)果

TypeScript的安裝過(guò)程到此結(jié)束，為了高效地編寫TypeScript代碼，還需要安裝一款合適的IDE。

1.2.3　安裝Visual Studio Code

目前很多主流IDE（如WebStorm、Sublime Text 2、Eclipse和Visual Studio Code等）支持TypeScript，讀者可以自行選擇適合自己的IDE。

本書推薦使用Visual Studio Code，因?yàn)樗cTypeScript同是微軟公司推出的免費(fèi)的開源產(chǎn)品，對(duì)TypeScript友好，支持智能提示，并能隨時(shí)通知可能產(chǎn)生的Bug。

打開Visual Studio Code官網(wǎng)，根據(jù)操作系統(tǒng)下載對(duì)應(yīng)的安裝包，如圖1-7所示。

圖1-7　根據(jù)操作系統(tǒng)下載對(duì)應(yīng)的安裝包

安裝過(guò)程非常簡(jiǎn)單，沒(méi)有需要特別注意的設(shè)置。打開安裝包后，選擇安裝路徑，持續(xù)單擊“下一步”按鈕即可。Visual Studio Code安裝后默認(rèn)為英文界面，如需中文界面，可通過(guò)以下3個(gè)步驟。切換到Visual Studio Code中文界面，如圖1-8所示。

（1）打開Visual Studio Code，單擊“擴(kuò)展”圖標(biāo)。

（2）輸入關(guān)鍵字chinese。

（3）單擊“中文(簡(jiǎn)體)”版本后面的Install按鈕。

圖1-8　切換到Visual Studio Code中文界面

之后重啟Visual Studio Code，就可以看到中文界面了。圖1-9所示為Visual Studio Code的中文界面。

圖1-9　Visual Studio Code的中文界面