WebStorm开发TypeScript的设置

起初编写完TypeScript后是在命令行工具下编译ts文件,后来发现ts文件内容一旦发生改变就要手动去执行编译命令,难免降低了工作效率。后来发现原来强大的Webstorm IDE也可以开发TypeScript,还支持自动编译成js文件。

下面说一下完整的设置步骤吧

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

2.下载安装新版本的Webstorm

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

npm install typescript -g

安装好,在命令行可以查看编译器的版本

tsc -v

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


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


6.打开Webstorm,为TypeScript文件更改编译设置,File->Settings->File Watchers->TypeScript,这里我们需要选择TypeScript,但是

File Watchers下默认是不存在的。需要点击右侧“+”号,选择,弹出 New Watcher,设置好圈红线的部分,点击ok。勾

选“TypeScript”,点击ok。



Program:D:\tools\Ionic\nodejs\tsc.cmd

Arguments:--sourcemap --target "ES5"

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

Working directory:$FileDir$

7.设置typescript自动编译,勾选下图圈红线的位置。


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


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容