使用WebStorm2017搭建开发TypeScript的设置

作为一只刚上路的小白，靠搜索引擎终于搞明白了怎么使用强大的Webstorm IDE开发支持自动编译成js文件的TypeScript。

现附上非常完整的步骤：

1.去node.js官网下载安装node.js

2.下载安装Webstorm2017.2.6（因为刚开始没有成功破解2018版的webstorm，所以我用的是2017版的）

3.使用node的npm命令安装typeScript编译器

npm install -g typescript

安装好，在命令行查看编译器的版本

tsc

4.打开Webstorm，新建一个空白项目，命名为learn

5.在Webstorm中右击项目名，选择new->tsconfig.json File，创建tsconfig.json文件

6.打开Webstorm,为TypeScript文件更改编译设置，File->Settings->File Watchers->TypeScript，这里我们需要选择TypeScript，但是File Watchers下默认是不存在的。需要点击右侧“+”号，选择<custom>,弹出 New Watcher，设置好圈红线的部分，点击ok。勾选“TypeScript”，点击ok。

注意：program那里刚开始我找不到tsc.cmd文件，后来发现是因为系统默认隐藏了一些文件和驱动器，因为在电脑里找这个文件是可以找得到的，就是自己打开该文件时看不到

此处AppDate是默认不显示的

 

在查看那里，把红线部分打勾，就可以看到AppDate文件夹了

而我们要在Program处添加的文件路径就在AppDate里面

tsconfig.json的默认信息：

一些参数的简要说明：

Arguments:--sourcemap --target "ES5"
Output paths to refresh:$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map
Working directory:$FileDir$

这样，2017版的webstorm开发typescript的自动编译功能就设置好了，测试一下，很带劲，你只需要负责写ts就好了，方便了很多。