Visual Studio Code搭建Typescript開發環境 —— 相關文章：
http://www.cnblogs.com/sunjie9606/p/5945540.html
[注意：這里僅以Windows平台作為本次教程的演示環境]
原文地址：https://segmentfault.com/a/1190000006124164
准備工作
-
Node.js Node.js - Official Site
-
Visual Studio Code Visual Studio Code - Official Site
安裝Node.js
一方面提供一個開發的Runtime；另一方面提供的npm工具，我們可以利用這個工具來安裝TypeScript。
下載Node.js安裝包
首先按照准備工作里面提供的鏈接下載對應平台的Node.js安裝包
安裝Node.js並檢測是否安裝成功
安裝Node.js，安裝過程基本上是下一步，即可完成，然后在CMD中運行如下命令：node -v 來查詢當前node.js的版本號，然后輸出如圖所示的結果就表示node.js安裝成功，接着可以輸入命令：npm -v 來查詢當前npm工具的版本號[可能需要時間稍長點]，便會輸出如圖所示的結果表示npm工具可用
設置node.js的npm安裝package的全局路徑[非必須]
由於npm安裝工具默認會跑到C盤[因為npmrc文件中默認的設置為：prefix=${APPDATA}\npm]，這樣有時可能會因為系統權限的問題，導致不能正常成功的安裝某些工具，那么我們可以先將npm安裝的全局路徑自定設置一下，比如：我們可以在nodejs的目錄下[即你的node.js安裝后的根目錄]新建兩個目錄：node_global，node_cache，然后找到nodejs目錄下的node_modules/npm目錄下名為npmrc 或者 .npmrc文件，[為安全，我們可以先將該文件copy一個副本出來進行備份]使用文本編輯器打開，修改並新增如下：prefix 和 cache 分別對應之前新建的目錄node_global 和 node_cahce 
設置package的環境變量[有必要]
通過步驟3設置后，后續在安裝工具的時候，比如安裝TypeScript，最終會安裝到node_global中，所以為了后續使用工具命令行，我們可以配置一個環境變量：
首先新建一個NODE_PATH -> NODE_PATH=D:\EasBuilding\nodejs\node_global，然后在Path下新增%NODE_PATH%
查看typescript版本
[這里只是為了說明問題，可不用進行這一步] 打開CMD，運行命令：tsc -v，這里不能正常像是版本號，這是由於這里還沒有安裝typescript，所以我們接下來就先安裝TypeScript Compiler
安裝TypeScript
安裝TypeScript Compiler
在前面安裝好Node.js后，我們可以直接使用npm工具來安裝TypeScript，這個TypeScript的Package其實也是一個Compiler，我們可以通過這個Complier將typescript編譯成javascript。打開命令提示符CMD(或其他終端Terminal)，輸入指令：npm install -g typescript，稍等片刻即可完成TypeScript Compiler的安裝。
更新TypeScript Compiler
如上圖所示，下載的TypeScript版本為1.8.10，在官網，該版本為最新穩定版，所以不需要更新，如果我們下載的版本小於這個版本，我們可以使用如下命令來進行更新：npm update -g typescript
安裝Visual Studio Code
下載Visual Studio Code安裝包並安裝
首先按照准備工作里面提供的鏈接下載對應平台的vscode安裝包
我的第一個TypeScript程序
新建一個workspace工作目錄
這里我先在桌面上新建一個DemoModules的目錄來存放一些我的Demo Projects，然后選中DemoModules右鍵使用 vscode 打開或者打開CMD，切換到DemoModules下，然后輸入命令：code . 既可以使用 vscode 打開DemoModules目錄。
接着，在該目錄下新建一個名為TS_DEMO的目錄：
創建我的第一個typescript文件
在TS_DEMO下新建一個名為greeter.ts的文件，並輸入如下代碼：
class Programmer {
name:string;
study() {
console.log(name + "學習");
}
}
var p1 = new Programmer();
p1.name = "李四";
p1.study();
var p2 = new Programmer();
p2.name = "韓梅梅";
p2.study();
繼續在該目錄下新建一個index.html的文件，並在body中引入greeter.js腳本：
編譯typescript文件
首先在TS_DEMO目錄下創建一個名為tsconfig.json的文件，可以手動創建該文件，並輸入如下代碼：
有幾個重要的屬性需要解釋一下：
- target：編譯之后生成的JavaScript文件需要遵循的標准。有三個候選項：es3、es5、es2015。
- noImplicitAny：為false時，如果編譯器無法根據變量的使用來判斷類型時，將用any類型代替。為true時，將進行強類型檢查，無法推斷類型時，提示錯誤。
- module：遵循的JavaScript模塊規范。主要的候選項有：commonjs、AMD和es2015。為了后面與node.js保持一致，我們這里選用commonjs。
- removeComments：編譯生成的JavaScript文件是否移除注釋。
- sourceMap：編譯時是否生成對應的source map文件。這個文件主要用於前端調試。當前端js文件被壓縮引用后，出錯時可借助同名的source map文件查找源文件中錯誤位置。
- outDir：編譯輸出JavaScript文件存放的文件夾。
- include、exclude：編譯時需要包含/剔除的文件夾。
{ "compilerOptions": { "target": "es5", "noImplicitAny": false, "module": "commonjs", "removeComments": true, "sourceMap": false, "outDir": "Golang/TypeScript/" }, "exclude": [ "node_modules" ] //"include":[ // "ts" // ], //"exclude": [ // "js" // ] }
也可以使用命令自動創建這個配置文件，CMD中切換到TS_DEMO目錄，然后輸入命令：tsc -init 即可自動創建
接下來我們繼續輸入編譯命令，編譯greeter.ts；輸入指令：tsc -w greeter.ts, 其中-w是watch監控的意思，當typescript文件內容發生改變時會自動進行編譯。
我們可以看到，TS_DEMO目錄下多了一個.js后綴的同名文件，這就是typescript編譯后的javascript文件。
最后我們將index.html用Chrome或者Firefox打開看看效果：
