webstorm如何配置typescript自動轉換你必須知道~

一、首先安裝node環境，npm（此處簡寫，請自行查找如何安裝node環境）

進入cmd，輸入node -v,npm -v查看是否看裝成功

二、安裝typescript tslint

npm install typescript -g//-g 表示全局安裝，安裝路徑都可

npm install tslink -g

三、打開webstorm建立一個項目，而後建立一個ts.json

建立好的tsconfig.json（固然你能夠修更名字）打開以後是這樣的，最好放到項目的根目錄下（固然位置任意，不過你得記得，下邊有用到）

四、打開webstorm -> file -> settings -> Tools -> file wathers點擊右側的+號，建立一個watchers

下邊是打開以後的一些配置項，name:TypeScript,其餘的以下圖，重點關注紅框以內的內容

Program：這個是你的node的安裝目錄下的\tsc.cmd

注：

     一、若是這個文件沒有，在nodejs文件下建立也能夠，

     二、若是不知道node安裝在那個路徑下，windows能夠打開黑窗口輸入where node

Arguments：--sourcemap --target "ES5"

Output paths to refresh：$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map

Working directory：$FileDir$

五、而後打開webstorm -> file -> settings ->Language & Frameworks -> TypeScript -> TSlint

按下圖配置

保存便可

六、到此，配置的地方已經所有結束，接下來咱們建立一個ts文件試如下

ok，完美~