打造TypeScript的Visual Studio Code开发环境
打造TypeScript的Visual Studio Code開發(fā)環(huán)境
本文轉(zhuǎn)自：https://zhuanlan.zhihu.com/p/21611724?
作者： 2gua
TypeScript是由微軟大神Anders Hejlsberg（安德斯·海爾斯伯格，丹麥人，Turbo Pascal編譯器的主要作者，Delphi、C#開發(fā)領(lǐng)導(dǎo)者，同時(shí)也是.NET奠基人之一）領(lǐng)銜開發(fā)的。
TypeScript可謂一門語(yǔ)言，其主要特性有：
- 兼容 ECMAScript 2015（ES6）規(guī)范，可選擇編譯成ES6或ES5規(guī)范的JavaScript代碼（ECMAScript 3及以上版本）；
- 面向?qū)ο?#xff0c;并擁有一些函數(shù)式特性；
- 類型語(yǔ)言；
- 實(shí)現(xiàn)了注解、泛型等特性；
- 適配大型App構(gòu)建。
這些特性非常吸引我，特別是 Anders Hejlsberg是我的四位“偶像”之一（其他三位分別是 Linus Torvalds、 Eric Raymond、 Dave Thomas——知名Ruby/Rails程序員、作家，現(xiàn)在喜歡上了Elixir），這更是提高了TypeScript在我心中的顏值。不少人對(duì)此類最 終編譯成JavaScript的語(yǔ)言不感冒，恰好ES6正式發(fā)布后增加了許多特性，讓他們更是覺得此類語(yǔ)言是雞肋。但只憑 TypeScript的品質(zhì)及某些獨(dú)有特性如泛型、注解，就有其存在的極大價(jià)值，況且著名框架Angular 2就是使用TypeScript開發(fā)的！
工欲善其事，必先利其器，除了一門語(yǔ)言是內(nèi)力，還需有稱心的利刃為兵器。好馬配好鞍——我覺得TypeScript的最佳開發(fā)工具是Visual Studio Code——同屬微軟出品的優(yōu)秀編輯器，作為一家公司的兩個(gè)利器，其搭配使用時(shí)渾然天成。最重要的是，微軟當(dāng)下?lián)肀ч_源的力度是越來(lái)越 大，TypeScript與VS Code都是開源的。同時(shí)，VS Code的代碼提示、片段及調(diào)試功能也非常棒！
本文將詳細(xì)闡述TypeScript與VS Code相結(jié)合的開發(fā)環(huán)境打造之道，為后續(xù)的學(xué)習(xí)提供先決條件。
先總結(jié)一下TypeScript開發(fā)環(huán)境用到的各種工具：
- Node——通過npm安裝TypeScript及大量依賴包。從https://nodejs.org/下載并安裝它；如果安裝各種包不方便，可以將安裝源改為國(guó)內(nèi)鏡像，具體方案網(wǎng)絡(luò)上已經(jīng)有很多了，可供參考；
- VS Code——從 https://code.visualstudio.com/ 下載并安裝它；
- TypeScript——TypeScript語(yǔ)言，后面通過npm安裝；
- concurrently——Node包，同時(shí)執(zhí)行命令用。 后面通過npm安裝；
- lite-server——Node包，輕量級(jí)的Node開發(fā)服務(wù)器。 后面通過npm安裝；
先按上述列表安裝Node與VS Code，接下來(lái)我們開始安裝其余工具。
1 .2 安裝及開發(fā)環(huán)境配置
1.2.1 安裝TypeScript
建議先將TypeScript安裝成全局包方式，打開終端或命令行窗口，執(zhí)行以下命令安裝TypeScript：
npm install -g typescript本文寫作時(shí)TypeScript的版本為1.8.10。
1.2.2 安裝其他Node包
新建一個(gè)目錄，如：hello-typescript，用剛安裝好的VS Code編輯名為package.json的文件，保存于hello-typescript目錄中。
package.json是包描述文件。其中列出了應(yīng)用所需的各種依賴包、待執(zhí)行腳本，以及其他一些設(shè)置內(nèi)容。編輯其內(nèi)容為：
{"name": "hello-typescript","version": "0.0.1","description": "Learning TypeScript.","scripts": {"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"","lite": "lite-server","tsc": "tsc","tsc:w": "tsc -w"},"author": "2gua","license": "ISC","dependencies": {},"devDependencies": {"lite-server": "^2.2.0","concurrently": "^2.0.0"} }package.json文件主要說明：
"name"——包的名稱
"version"——版本
"description"——App描述，方便搜索
"scripts"——可執(zhí)行的腳本
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\""——同時(shí)執(zhí)行的命令
"lite": "lite-server"——啟動(dòng)lite-server服務(wù)器
"tsc": "tsc"——執(zhí)行一次TypeScript編譯
"tsc:w": "tsc -w"——以監(jiān)控模式運(yùn)行TypeScript編譯器。后臺(tái)始終保持進(jìn)程。一旦TypeScript文件變化即會(huì)重編譯
"dependencies"——生產(chǎn)環(huán)境中需要的依賴包
"devDependencies"——開發(fā)中要使用的安裝包
關(guān)于package.json的配置可以參考：這里。
1.2.3 配置VS Code的TypeScript開發(fā)環(huán)境
VS Code提供了很好的TypeScript開發(fā)特性支持。
首先，打開剛才創(chuàng)建的目錄hello-typescript：?
可以看到當(dāng)前VS Code的資源管理器顯示如下：
編輯示例代碼
先來(lái)編輯我們的第一個(gè)TypeScript程序hello-typescript.ts，放在根目錄（指hello-typescript，下同）下。
看看，VS Code對(duì)TypeScript的支持是非常到位的。
hello-typescript.ts代碼文件的內(nèi)容如下：
/*** BirdWhisperer* by 2gua*/ class BirdWhisperer {chirping: string;constructor(message: string) {this.chirping = message;}chirp() {return 'Ah~ oh~ ' + this.chirping;} } let birdWhisperer = new BirdWhisperer('coo-coo-coo...'); document.body.innerHTML = birdWhisperer.chirp();創(chuàng)建TypeScript編譯器配置文件
當(dāng)前TypeScript代碼并不能直接執(zhí)行，需編譯為JavaScript代碼。而借助VS Code，我們就不用在命令行輸入編譯命令了。為此，在根目錄添加一個(gè)tsconfig.json文件。該文件是TypeScript編譯器配置文件。文件內(nèi)容如下所示：
{"compilerOptions": {"target": "es5","module": "amd","sourceMap": true},"exclude": ["node_modules","typings/main","typings/main.d.ts"] }tsconfig.json文件各項(xiàng)說明如下：
關(guān)于tsconfig.json的進(jìn)一步信息可以參考：這里。
創(chuàng)建測(cè)試頁(yè)面
最后，我們還需要?jiǎng)?chuàng)建一個(gè)測(cè)試頁(yè)面index.html來(lái)測(cè)試我們的程序。
在新創(chuàng)建的index.html鍵入：html:5，按Tab鍵，就會(huì)生成好HTML模版文件！然后在body中鍵入：script:src，按Tab鍵，然后加載我們馬上要編譯好的的hello-typescript.ts對(duì)應(yīng)的JavaScript文件hello-typescript.js：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Bird Whisperer</title> </head> <body><script src="hello-typescript.js"></script> </body> </html>VS Code無(wú)疑非常貼心！
編譯項(xiàng)目
先看看至目前我們的項(xiàng)目情況：
在命令行窗口進(jìn)入項(xiàng)目根目錄，執(zhí)行npm start，將看到會(huì)自動(dòng)打開瀏覽器窗口：
如果調(diào)整TypeScript程序，工具我們前面的配置，服務(wù)器會(huì)自動(dòng)識(shí)別我們的變動(dòng)并刷新瀏覽器，不需要我們手動(dòng)刷新瀏覽器：
再來(lái)看看現(xiàn)在的項(xiàng)目情況：
項(xiàng)目里多了兩個(gè)文件，一個(gè)是TypeScript編譯后對(duì)應(yīng)的JavaScript文件，也就是我們前面包含進(jìn)測(cè)試頁(yè)面inde.html里的。另一個(gè).map文件后面馬上會(huì)用到。
開發(fā)環(huán)境幾乎配置妥妥了，剩下還需要看看調(diào)試TypeScript程序。
1.2.4 VS Code調(diào)試
點(diǎn)擊Debug按鈕（或者Ctrl+Shift+d），就會(huì)出現(xiàn)以下界面：
點(diǎn)擊綠色小三角（或F5）就開始調(diào)試。首次會(huì)彈出調(diào)試配置，請(qǐng)選擇“Node.js”：
此時(shí)會(huì)創(chuàng)建.vscode/launch.json文件，首先要配置一下該文件。將"program"設(shè)置為hello-typescript.js，"sourceMaps"設(shè)置為true：
現(xiàn)在先試著在文件中設(shè)置一個(gè)斷點(diǎn)（在圖示位置點(diǎn)擊一下即可，再次點(diǎn)擊就關(guān)閉斷點(diǎn)，如是切換）：
然后再次點(diǎn)擊綠色小三角進(jìn)行調(diào)試，之后試著選擇“單步跳過”命令，看看左邊的“變量”窗口發(fā)生的變化：
有時(shí)候我都懷疑VS Code不是編譯器，而是一個(gè)IDE了！
注意.map文件是調(diào)試用的文件。同時(shí)，要進(jìn)行.ts文件的調(diào)試，在.vscode/launch.json文件中，請(qǐng)將"sourceMaps"設(shè)置為true。
1.2.5 瀏覽器調(diào)試
Chrome下的調(diào)試
打開Chrome，Ctrl+Shift+i打開開發(fā)者工具，選擇Sources頁(yè)面，打開hello-typescript.ts,設(shè)置斷點(diǎn)，再次刷新頁(yè)面，之后點(diǎn)擊“單步跳過”命令，看看效果：
### Firefox下的調(diào)試
雖然大家都喜歡Chrome，但作為Firefox老用戶，一直不舍Firefox，Firefox也是我主要瀏覽器。調(diào)試步驟跟Chrome下的情況差不離：
至此，TypeScript及VS Code的安裝及開發(fā)/調(diào)試環(huán)境設(shè)置就OK了。打造好了兵器，是時(shí)候開始勤練內(nèi)力了，接下來(lái)就可以邁進(jìn)TypeScript的世界......
更多精彩內(nèi)容，關(guān)注玄魂工作室微信訂閱號(hào)（xuanhun521):
Visual Studio Code 使用Git進(jìn)行版本控制
總結(jié)
以上是生活随笔為你收集整理的打造TypeScript的Visual Studio Code开发环境的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 机器学习算法-Adaboost
- 下一篇： 选择适合 Rails 开发的操作系统