VS Code 運行 TypeScript 操作指南
TypeScript是由微軟大神Anders Hejlsberg（安德斯·海爾斯伯格，丹麥人，Turbo Pascal編譯器的主要作者，Delphi、C#開發領導者，同時也是.NET奠基人之一）領銜開發的。
TypeScript可謂一門語言，其主要特性有：
- 兼容 ECMAScript 2015（ES6）規范，可選擇編譯成ES6或ES5規范的JavaScript代碼（ECMAScript 3及以上版本）；
- 面向對象，並擁有一些函數式特性；
- 類型語言；
- 實現了注解、泛型等特性；
- 適配大型App構建。
這些特性非常吸引我，特別是 Anders Hejlsberg是我的四位“偶像”之一（其他三位分別是 Linus Torvalds、 Eric Raymond、 Dave Thomas——知名Ruby/Rails程序員、作家，現在喜歡上了Elixir），這更是提高了TypeScript在我心中的顏值。不少人對此類最 終編譯成JavaScript的語言不感冒，恰好ES6正式發布后增加了許多特性，讓他們更是覺得此類語言是雞肋。但只憑 TypeScript的品質及某些獨有特性如泛型、注解，就有其存在的極大價值，況且著名框架Angular 2就是使用TypeScript開發的！
工欲善其事，必先利其器，除了一門語言是內力，還需有稱心的利刃為兵器。好馬配好鞍——我覺得TypeScript的最佳開發工具是Visual Studio Code——同屬微軟出品的優秀編輯器，作為一家公司的兩個利器，其搭配使用時渾然天成。最重要的是，微軟當下擁抱開源的力度是越來越 大，TypeScript與VS Code都是開源的。同時，VS Code的代碼提示、片段及調試功能也非常棒！
本文將詳細闡述TypeScript與VS Code相結合的開發環境打造之道，為后續的學習提供先決條件。
先總結一下TypeScript開發環境用到的各種工具：
- Node——通過npm安裝TypeScript及大量依賴包。從https://nodejs.org/下載並安裝它；如果安裝各種包不方便，可以將安裝源改為國內鏡像，具體方案網絡上已經有很多了，可供參考；
- VS Code——從 https://code.visualstudio.com/ 下載並安裝它；
- TypeScript——TypeScript語言，后面通過npm安裝；
- concurrently——Node包，同時執行命令用。 后面通過npm安裝；
- lite-server——Node包，輕量級的Node開發服務器。 后面通過npm安裝；
先按上述列表安裝Node與VS Code，接下來我們開始安裝其余工具。
1 .2 安裝及開發環境配置
1.2.1 安裝TypeScript
建議先將TypeScript安裝成全局包方式，打開終端或命令行窗口，執行以下命令安裝TypeScript：
npm install -g typescript 本文寫作時TypeScript的版本為1.8.10。
1.2.2 安裝其他Node包
新建一個目錄，如：hello-typescript，用剛安裝好的VS Code編輯名為package.json的文件，保存於hello-typescript目錄中。
package.json是包描述文件。其中列出了應用所需的各種依賴包、待執行腳本，以及其他一些設置內容。編輯其內容為：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
{
"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"——可執行的腳本
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\""——同時執行的命令
"lite": "lite-server"——啟動lite-server服務器
"tsc": "tsc"——執行一次TypeScript編譯
"tsc:w": "tsc -w"——以監控模式運行TypeScript編譯器。后台始終保持進程。一旦TypeScript文件變化即會重編譯
"dependencies"——生產環境中需要的依賴包
"devDependencies"——開發中要使用的安裝包
關於package.json的配置可以參考：這里。
1.2.3 配置VS Code的TypeScript開發環境
VS Code提供了很好的TypeScript開發特性支持。
首先，打開剛才創建的目錄hello-typescript：
可以看到當前VS Code的資源管理器顯示如下：
編輯示例代碼
先來編輯我們的第一個TypeScript程序hello-typescript.ts，放在根目錄（指hello-typescript，下同）下。 
看看，VS Code對TypeScript的支持是非常到位的。
hello-typescript.ts代碼文件的內容如下：
/** * 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();
創建TypeScript編譯器配置文件
當前TypeScript代碼並不能直接執行，需編譯為JavaScript代碼。而借助VS Code，我們就不用在命令行輸入編譯命令了。為此，在根目錄添加一個tsconfig.json文件。該文件是TypeScript編譯器配置文件。文件內容如下所示：
{
"compilerOptions": { "target": "es5", "module": "amd", "sourceMap": true }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] }
tsconfig.json文件各項說明如下：
- "compilerOptions"——編譯器選項；
- "target"——編譯目標，如這里編譯為es5代碼；
- "module"——處理獨立文件時的模塊加載方式；
- "sourceMap"——是否創建map文件以幫助調試；
- "exclude"——編譯器會編譯TypeScript文件（.ts或.tsx），通過排除設置里的TypeScript文件不會被編譯。
關於tsconfig.json的進一步信息可以參考：這里。
創建測試頁面
最后，我們還需要創建一個測試頁面index.html來測試我們的程序。
在新創建的index.html鍵入：html:5，按Tab鍵，就會生成好HTML模版文件！然后在body中鍵入：script:src，按Tab鍵，然后加載我們馬上要編譯好的的hello-typescript.ts對應的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無疑非常貼心！
編譯項目
在命令行窗口進入項目根目錄，執行npm start，將看到會自動打開瀏覽器窗口：
如果調整TypeScript程序，工具我們前面的配置，服務器會自動識別我們的變動並刷新瀏覽器，不需要我們手動刷新瀏覽器：
再來看看現在的項目情況：
項目里多了兩個文件，一個是TypeScript編譯后對應的JavaScript文件，也就是我們前面包含進測試頁面inde.html里的。另一個.map文件后面馬上會用到。
開發環境幾乎配置妥妥了，剩下還需要看看調試TypeScript程序。
1.2.4 VS Code調試
點擊Debug按鈕（或者Ctrl+Shift+d），就會出現以下界面：
點擊綠色小三角（或F5）就開始調試。首次會彈出調試配置，請選擇“Node.js”：
此時會創建.vscode/launch.json文件，首先要配置一下該文件。將"program"設置為hello-typescript.js，"sourceMaps"設置為true：
現在先試着在文件中設置一個斷點（在圖示位置點擊一下即可，再次點擊就關閉斷點，如是切換）：
然后再次點擊綠色小三角進行調試，之后試着選擇“單步跳過”命令，看看左邊的“變量”窗口發生的變化：
有時候我都懷疑VS Code不是編譯器，而是一個IDE了！
注意.map文件是調試用的文件。同時，要進行.ts文件的調試，在.vscode/launch.json文件中，請將"sourceMaps"設置為true。
1.2.5 瀏覽器調試
Chrome下的調試
打開Chrome，Ctrl+Shift+i打開開發者工具，選擇Sources頁面，打開hello-typescript.ts,設置斷點，再次刷新頁面，之后點擊“單步跳過”命令，看看效果：
### Firefox下的調試
雖然大家都喜歡Chrome，但作為Firefox老用戶，一直不舍Firefox，Firefox也是我主要瀏覽器。調試步驟跟Chrome下的情況差不離：
至此，TypeScript及VS Code的安裝及開發/調試環境設置就OK了。打造好了兵器，是時候開始勤練內力了，接下來就可以邁進TypeScript的世界......
1.2.6 如何使用多條命令
使用 concurrently 即可。
需要安裝 concurrently
npm install -g concurrently
package.json的 scripts:
"command1":"aaaaa", "command2":"bbbbb", "test":"concurrently \"npm run command1\" \"npm run command2\""
然后 npm test就可以同時監聽 aaaaa 和 bbbbb 了.
1.2.7 關於 --save 和 --save-dev的區別
--save是對生產環境所需依賴的聲明(開發應用中使用的框架，庫),
--save-dev是對開發環境所需依賴的聲明(構建工具，測試工具).
正常使用npm install時，會下載dependencies和devDependencies中的模塊，
當使用npm install --production或者注明NODE_ENV變量值為production時，只會下載dependencies中的模塊。
1.2.8 安裝http-server
我們知道寫typescript有時要用的瀏覽器進行預覽，哪我們還需要安裝一下http服務。
npm install -g http-server
這樣http服務就裝好了，萬能的npm有沒有？
如何啟動？輸入：http-server 回車就行了，http://localhost:8080/
如何關閉？快捷鍵：ctrl+c
更多使用方法和命令，可以輸入 http-sever -help 來查看。
1.2.10 關於 lite-server
除了上面這個以外，還有另一個可推薦的是：lite-server
輕量級的僅適用於開發 的 node 服務器， 它僅支持 web app, 它能夠為你打開瀏覽器, 當你的html或是JavaScript文件變化時，它會識別到並自動幫你刷新瀏覽器, 還能使用套接字自動注入變化的CSS, 當路由沒有被找到時，它將自動后退頁面。
安裝與使用，以下是被推薦的安裝lite-server的方式:
npm install -g lite-server --save-dev
--save-dev 選項，將會把安裝的環境寫入到pakage.json里面
在你的項目中的 package.json 文件中添加一個 “script” 入口:
"scripts": { "dev": "lite-server" },
cript 入口, 你就可以通過以下命令來啟動 lite-server 了:
npm run dev
lite-server 使用BrowserSync, 它是允許你去覆蓋默認的配置，這得通過你項目里的文件 bs-config.json 或 bs-config.js 來完成
lite-server -c configs/my-bs-config.js
舉例來說, 要改變端口號, 被監測的文件路徑, 以及你項目的base路徑, 在你項目中創建 bs-config.json 文件:
{
"port": 8000, "files": ["./src/**/*.{html,htm,css,js}"], "server": { "baseDir": "./src" } }