Webstorm IDE可以开发TypeScript,同时支持自动编译成js文件,下面我们来进行一些简单的配置。

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

2.下载安装新版本的Webstorm

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

npm install typescript -g

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

tsc --version

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

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:‪C:\Users\chenwei\AppData\Roaming\npm\tsc.cmd
Arguments:--sourcemap --target "ES5"
Output paths to refresh:$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map
Working directory:$FileDir$

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

这样,typescript的自动编译功能就设置好了,可以发现我们编写的ts文件会自动转为js文件。

WebStorm开发TypeScript的设置的更多相关文章

  1. 用WebStorm开发TypeScript

    为什么是TypeScript 最近在做H5的游戏,最终选定的TypeScript作为开发语言.主要是看重他有强类型和Class,作为习惯使用AS3,Java等强类型编程的人来说,还是习惯这种编程写法. ...

  2. Webstorm编译TypeScript

    下载webstorm 下载node.js编译器npm   Webstorm的安装很简单.但如果没有Java For Mac 环境打开Webstorm时会有提示,点击提示会跳转下载链接,下载安装就好. ...

  3. 实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  4. nodeJS学习(4)--- webstorm/...开发 NodeJS 项目-节1

    前提: 已安装好 IDE ,eg:webstorm/IDEA 2016.3 & 2017.1 nodeJS(含 npm 及 相应的模板等) 要用 webstorm 开发 NodeJS项目(we ...

  5. VS Code开发TypeScript

    TypeScript是JaveScript的超集,为JavaScript增加了很多特性,它可以编译成纯JavaScript在浏览器上运行.TypeScript已经成为各种流行框架和前端应用开发的首选. ...

  6. 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  7. 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  8. 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  9. 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

随机推荐

  1. postfix邮件服务器搭建02-安装篇

    本文接着上文的环境,进行postfix邮件发信端和dovecot邮件收信端的部署,之后部署基于浏览器的extmail图形管理端,使管理员可以通过网页对邮件虚拟用户进行管理,对邮件服务器进行管控 1.p ...

  2. GitLab+Rancher实践DevOps【转载】

    摘要 本文描述使用自建GitLab和Rancher实践持续集成/持续交付流水线的过程,并用Rancher实现容器编排和蓝绿发布. GitLab持续集成 GitLab持续集成/持续交付流程图:部署Git ...

  3. [Luogu4631][APIO2018] Circle selection 选圆圈

    Luogu 题目描述 在平面上,有 \(n\) 个圆,记为 \(c_1, c_2,...,c_n\) .我们尝试对这些圆运行这个算法: \(1\).找到这些圆中半径最大的.如果有多个半径最大的圆,选择 ...

  4. Django之tag标签和filter标签

    1.Django的tag常见的标签,可以做一些简单的功能 {%if%} 的使用主要用于做判断,还可以包含{%elif%} 这样的用法,最后要跟上{% endif %}.可以使用你的and,or,not ...

  5. WPF绘制简单常用的Path(转)

    写代码出身的我们经常需要使用一些简单 但是不是规则图形的Path 但限于美工功底有限 不知道怎么去画 下面我告诉大家一些简单的小技巧 用代码来画Path 个人还是比较喜欢用代码 因为数值控制的更精细 ...

  6. Nunit中如何进行事务性单元测试

    单元测试要求:单元测试方法并不真正去变更数据库,也就是说单元测试不依赖于数据库中的数据.那我们如何解决执行单元测试方法后,不变更数据库中数据呢? 一般的解决方案有两种: 1. 新建一个单元测试数据库, ...

  7. bzoj 1001 [BeiJing2006]狼抓兔子——最小割转最短路

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1001 #include<cstdio> #include<cstring& ...

  8. 生产环境LNMP (果图片)

    一. 下载一键安装包 LNMP   官方地址为:http://lnmp.org/ 登陆后运行:screen -S lnmp cd /usr/local/src wget -c http://soft. ...

  9. OpenCL入门

    初入OpenCL,做个记录. 在Windows下开发OpenCL程序,必须先下载OpenCL的SDK,现在AMD,NVIDIA,Intel均提供各自的OpenCL库,基本是大同小异.安装好SDK后新建 ...

  10. Data_Structure02-线性表

    一.PTA实验作业 本周要求挑3道题目写设计思路.调试过程.设计思路用伪代码描述. 1.顺序表选择一题(6-2,6-3,7-1选一题),代码必须用顺序结构抽象数据类型封装 2.单链表选择一题(6-1不 ...