TypeScript+vsCode環境搭建

why？

1、基於前面文章的主觀意見，所以個人傾向於將mvc的思想也使用到編程工具的使用上。工具嘛，無非是減少必要勞動力，提高工作效率的東西。

2、本人pc機上的vs2012自從裝了resharper 之后，從啟動速度上就慢了很多，啟動一個項目要等待很長時間，且vs中對於ts的智能提示的速度讓人難以忍受。

start

0、本文是基於nodejs下進行的，沒有配置好的同學請自行Google，非本文闡述內容。

1、github下載最新版TypeScript

git clone https://github.com/Microsoft/TypeScript.git

不會使用git的同學請點擊下載：https://github.com/Microsoft/TypeScript

文件夾結構如下：

2、控制台命令進入如上文件夾：

安裝typescript包

npm install –g typescript

3、安裝Jake工具和開發依賴包：

npm install -g jake
npm install

安裝時間大概需要20多分鍾，中間安裝的過程中出現長時間卡的地方，需要手動進行回車，使得安裝繼續進行。

同時，在C:\Users\Administrator\AppData\Roaming\npm下可以看到添加如下文件；

4、使用Jake命令編譯TypeScript源代碼

jake --help;//jake命令幫助
jake -T;//顯示jake任務描述jake local;
jake local;//編譯

同級目錄下生成：

5、配置環境變量

在環境變量中添加如下路徑：

C:\TypeScript\built\local\

tsc.js就相當於可執行文件，ps：ts編譯器本身也是由ts語言編寫的

6、配置vscode中typescript編譯環境

【Ctrl+Shift+B】:vscode下編譯運行命令；

vscode支持以文件夾結構作為工作區域，十分方便，Ctrl+shift+b，彈出一下提示，點擊紅色圖標按鈕，在默認文件夾結構下生成，

，

默認使用單文件的編譯配置，啟用右邊欄中的內容，我手動開啟全部文件的編譯配置。

在項目根目錄下新建：tsconfig.json，並添加以下內容，其他相關編譯項的配置信息有待后續研究。

{
    "compilerOptions": {
        "target": "ES5",//ecmascript支持版本
        "noImplicitAny": false,
        "module": "amd",
        "removeComments": true,//是否移除文檔注釋
        "sourceMap": false,//是否生成對應的map文件
        "outDir": "js_output"//指定輸出目錄文件夾名稱
    }
}

好了，至此配置已經完成了，我們可以在vscode中直接進行編譯運行了，讓我們看看編譯后的效果吧。

總結：

好了，基本上按照以上的操作，就能夠實現在vscode中進行ts的編譯了，編譯速度也是杠杠的，也沒有之前出現的慢的情況。步驟比使用exe安裝包要復雜些，但是通過自己親手操作下來，更加深入的理解ts的原理，也是拓展了自己的知識面，不失為一件好事。各位有好的提議或問題敬請指正！