1、安装typescrip

npm install -g typescript　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

2、在typescript项目目录中打开terminal输入tsc --init 创建tsconfig.js

tsc --init

3、编辑tscongfig.json,修改outDir的参数，既默认ts转换成js后的输出目录

mac下webstorm自动编译typescript配置_其他

 

 

 4、点击webStorm->Preferences到设置页面

mac下webstorm自动编译typescript配置_自动编译_02

 

5、点击tools->File Watchers->左下角的+号、选择custom

mac下webstorm自动编译typescript配置_自动编译_03

 

 

 

mac下webstorm自动编译typescript配置_自动编译_04

 

 

 

 6、输入如下信息

mac下webstorm自动编译typescript配置_其他_05
Name:TypeScript
File Type:TypeScript
Scope:All Places
Program:/usr/local/lib/node_modules/typescript/bin/tsc（既安装typescript的路径下的tyc文件）
Arguments:--sourcemap --target "ES5"
Output paths to refresh:$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map
WOrking directory:$FileDir$
mac下webstorm自动编译typescript配置_其他_05

mac下webstorm自动编译typescript配置_typescript_07

 

 

 点击ok->Apply完成。

再次编辑ts文件就会自动编译为js了

博客中所涉及到的图片都有版权，请谨慎使用