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，完美~