webstrom2020设置开发typescript自动编译

1.全局安装typeScript编译器
npm install typescript -g
安装好，在命令行可以查看编译器的版本
tsc --version
2.在项目所在根目录下新建tsconfig.json文件

新建好的json文件如下：

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


Program：‪C:\Users\chenwei\AppData\Roaming\npm\tsc.cmd
Arguments：--sourcemap --target "ES5"
Output paths to refresh：$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map
Working directory：$FileDir$
4.设置typescript自动编译，将发生改变时重新编译

当写完ts文件时会自动生成相应的js文件和映射文件map