TypeScript（2）WebStorm自动编译TypeScript配置

最新推荐文章于 2024-08-05 15:55:34 发布
原创 最新推荐文章于 2024-08-05 15:55:34 发布 · 874 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#typescript #webstorm #javascript #vue.js #前端

本文介绍了如何在mac环境下配置WebStorm以实现自动编译TypeScript。通过安装tsconfig.js，编辑配置文件，设置WebStorm的TypeScript编译选项，并添加File Watchers，当TypeScript文件改动时，WebStorm将自动进行编译。

前言

上一篇我们讲到如何手动编译TypeScript，如果我们每次都要手动编译，那么这样会很累，接下来就介绍自动编译TypeScript。

mac自动编译typescript

  1. 在Typescript文件所在目录中打开terminal输入tsc --init安装tsconfig.js

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

  3. 点击WebStorm->Preferences到设置页面

  4. 点击Languages & Frameworks -> TypeScript，勾选Recompile on changes，点击ok

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

最低0.47元/天 解锁文章
webstorm配置ts自动编译
【03】的博客
07-17 4379
打开设置 Languages & Frameworks > TypeScript 打开设置 Tools > File Watchers 双击TypeScript列表，如没有在右侧添加一个 C:\Users\think\AppData\Roaming\npm\tsc FileNameWithoutExtensionFileNameWithoutExtensionFileNameWithoutExtension.js:FileNameWithoutExtensionFile..
mac webstorm 使用typescript 和配置自动编辑
weixin_44864084的博客
12-12 1308
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.m
webstrom2020设置开发typescript自动编译
u014641260的博客
12-19 1530
1.全局安装typeScript编译器 npm install typescript -g 安装好，在命令行可以查看编译器的版本 tsc --version 2.在项目所在根目录下新建tsconfig.json文件 新建好的json文件如下： 3.在webstrom中添加监听文件，打开Webstorm,为TypeScript文件更改编译设置，File->Settings->File Watchers->TypeScript，这里我们需要选择TypeScript，但是File Watch
Webstorm自动编译TypeScript设置
weixin_30678349的博客
11-02 972
1. 打开WebStorm，找到File->Setting->File Watchers，默认情况下是空的，点击右侧的“+”号，选择<custom>： 2. 新建Watcher，名字为TypeScript，File type 选择“TypeScript”，Program为nodejs下tsc.cmd文件，Arguments为--target "ES5"，Output ...
webstorm自动编译typescript
热门推荐
12-25 1万+
以前webstorm编译ts会有问题，刚试了一下最新版的webstorm9可以自动编译ts。按ctrl+s保存文件的时候，就能同时编译成js文件，很方便。 按照下面的步骤做就可以了。1. mac系统下在Preferences里搜索File Watchers。windows是在File-settings里。 2. 点击File Watchers左下方画红框的+号。windows是在右侧  
webstorm配置项目Typescript编译环境
毅香雪海的博客
08-01 1538
webstorm配置项目Typescript编译环境
解决webstorm的TypeScript无法自动编译成JavaScript问题
Sicily_winner的博客
08-26 4723
前言：在写一个nodejs后台服务的时候，TypeScript写的代码在读取自己写的tsconfig.json文件之后，却没有自行编译成JavaScript保存在配置文件outDir指定的文件中，已经修改了webstorm的配置信息了，还是没用，原因是没有安装TypeScript。 但是但是！国外版本直接安装会弄很久，我没有耐心就关闭掉了，就再也装不上了！！T_T所以改了了淘宝版本。 npm...
解决webstorm中ts自动编译
小野喵的博客哦
12-10 2099
但是当我们改变ts内容时，js内容不会对应改变，每次写完ts代码，都需要手动执行命令来编译ts代码。其实在新版的idea中可以很方便的配置自动编译ts。测试一下，修改一下ts里面的内容，然后直接运行js文件，可以看到已经成功了。然后在终端执行tsc helloworld.ts来编译为js代码。下面运行代码，使用node helloworld.js来运行。找到ts的配置，勾选下面配置即可。我们可以首先写一段ts代码。
ts自动编译声明文件_webstorm配置TS运行时环境与自动给编译
weixin_31001069的博客
12-24 864
webstorm配置TS运行时环境与自动编译Step 1 安装TypeScipt$ npm i typescript -gStep 2 设置webstorm languageStep 3 设置File Watch添加file watch类型file watch详细配置output path说明：$FileDir$$FileNameWithoutExtension$.js:$FileNameWith...
PHPStorm配置typescript自动编译
劲枫的博客
07-27 1596
1、自行去官网安装node.js； 2、npm工具安装typescript npm install -g typescript 查看typescript版本 tsc --version 3、打开phpstorm，新建一个目录tscTest，进入该目录，执行 tsc --init 生成一个tsconfig.json文件 4、配置js文件输出路径 5、打开监听Fi...
webstorm如何编译php文件,Webstorm如何编译TypeScript ？（图）
weixin_35931397的博客
03-21 294
本篇文章给大家带来的内容是关于Webstorm如何编译TypeScript ？(图)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。下载node.js编译器npmWebstorm的安装很简单。但如果没有Java For Mac 环境打开Webstorm时会有提示，点击提示会跳转下载链接，下载安装就好。安装tsc编译命令node.js 安装pkg包一路点next后进入终端，键入npm...
WebStorm自动编译TypeScript并发布到npm
hjg719的博客
10-22 414
WebStorm自动编译TypeScript并发布到npm
在WebStorm、vscode中使用tsc对ts文件编译时报错，tsc:无法加载文件，因为在系统上禁止运行脚本
qq_57182373的博客
07-23 2291
编译器终端ts不能被解析解决办法
webstrom使用ts设置
leveretz的博客
11-15 2931
webstrom使用ts设置
WebStorm运行ts文件
最新发布
yahang3344的博客
08-05 959
5、重启后就会发现在ts文件中就会出现 run 了。1、在WebStorm中打开当前项目控制台。4、在设置中安装安装插件后重启。
【解决方案】使用WebStorm运行TypeScript文件（基于ts-node）
qq_43303950的博客
02-04 1万+
使用WebStorm运行TypeScript文件（基于ts-node）
第三节：快速编译TypeScript，提高开发效率
qq_24520459的博客
08-20 893
上一节我们成功把TypeScript编译安装好了，接下来我们就看看编译器怎么用起来。在写代码之前，我们先来选个开发工具，支持TypeScript的IDE有很多，其中就包括了webs...
用WebStorm开发TypeScript
weixin_30307921的博客
07-20 547
为什么是TypeScript 最近在做H5的游戏，最终选定的TypeScript作为开发语言。主要是看重他有强类型和Class，作为习惯使用AS3,Java等强类型编程的人来说，还是习惯这种编程写法。听一些直接使用JavaScript开发稍微大的游戏的同事说，没有强类调试什么的都比较困难。我个人平时做小游戏用得比较多是纯js，比较大型的倒没尝试，所以这个不好下断论。另外一个主要原因是因为用Typ...
WebStorm Ts自动转Js
ChaoChao66666的博客
03-16 3097
1.在你的Webstorm项目中新建一个json文件，内容如下： 1 { "compilerOptions": { "module": "commonjs", "target": "es5", "sourceMap": true }, "exclude": [ "node_modules" ] } 2. 打开webstorm -> file -> settings -> Tools -> file wathers点击右侧的+
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值