TypeScript+vsCode環境搭建

why？

一、基於前面文章的主觀意見，因此我的傾向於將mvc的思想也使用到編程工具的使用上。工具嘛，無非是減小必要勞動力，提升工做效率的東西。

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

start

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

一、github下載最新版TypeScript

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

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

文件夾結構以下：

二、控制檯命令進入如上文件夾：

安裝typescript包

npm install –g typescript

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

npm install -g jake
npm install

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

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

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

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

同級目錄下生成：

五、配置環境變量

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

C:\TypeScript\built\local\

tsc.js就至關於可執行文件，ps：ts編譯器自己也是由ts語言編寫的

六、配置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的原理，也是拓展了本身的知識面，不失爲一件好事。各位有好的提議或問題敬請指正！