使用WebStorm开发TypeScript的设置

起初编写完TypeScript后是在命令行工具下编译ts文件,后来发现ts文件内容一旦发生改变就要手动去执行编译命令,难免降低了工

作效率。后来发现原来强大的Webstorm IDE也可以开发TypeScript,还支持自动编译成js文件,用了那么久Webstorm竟然都没发

现,要不要这么爽??

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

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

2.下载安装新版本的Webstorm

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

npm install typescript -g

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

tsc -v


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



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。




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



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


  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在WebStorm中配置TypeScript,可以按照以下步骤进行操作: 1. 确保已经在系统中安装了TypeScript。可以在终端中运行命令`tsc -v`来检查TypeScript的安装情况。 2. 打开WebStorm并创建一个新的HTML文件和一个TypeScript文件。可以使用菜单栏的“File”选项来创建文件。确保在HTML文件中引用了TypeScript编译生成的JavaScript文件。 3. 在终端中运行命令`tsc --init`来生成一个tsconfig.json文件。该文件用于配置TypeScript编译设置。可以在该文件中设置编译选项,例如目标版本、模块系统、输出目录等。 4. 在WebStorm中打开生成的tsconfig.json文件,并根据需要进行配置。可以使用编辑器的智能提示功能来帮助设置各个选项。 5. 确保在WebStorm中安装了TypeScript插件。可以通过点击菜单栏的“Preferences”,然后选择“Plugins”来检查已安装的插件列表。 6. 在WebStorm设置中,找到“Languages & Frameworks”部分,并选择“TypeScript”。在该页面上,可以配置TypeScript的各种设置,例如编译器版本、语言级别、模块解析等。 通过以上步骤,就可以在WebStorm中成功配置TypeScript,并开始使用该语言进行开发了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [WebStorm配置Typescript,在Html中使用](https://blog.csdn.net/tangyuan0217/article/details/116787919)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值