WebStorm使用TypeScript

前提条件：

安装nodejs

安装webstorm，自带有typescript

本人的环境是webstorm 2016.3.3, nodejs 6.9.2

可以通过npm install -g typescript来安装typescript最新版本.

创建项目demo1

创建typescript的项目配置文件tsconfig.json

{"compilerOptions": {"module": "commonjs","target": "es5","sourceMap": true
  },"exclude": ["node_modules"
  ]
}

commonjs指使用的模块规范

es5指生成的代码版本

创建html文件hello.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src='hello.js'></script>
</body>
</html>

创建ts文件hello.ts

class Greeter {constructor(public greeting: string) { }greet() {return "<h1>" + this.greeting + "</h1>";}
};var greeter = new Greeter("Hello, world!");document.body.innerHTML = greeter.greet();

配置项目自动生成js文件

如果tsconfig.json配置的是es5，生成js代码如下

var Greeter = (function () {function Greeter(greeting) {this.greeting = greeting;}Greeter.prototype.greet = function () {return "<h1>" + this.greeting + "</h1>";};return Greeter;
}());
;
var greeter = new Greeter("Hello, world!");
document.body.innerHTML = greeter.greet();
//# sourceMappingURL=hello.js.map

如果tsconfig.json配置的是es6，生成js代码如下

class Greeter {constructor(greeting) {this.greeting = greeting;}greet() {return "<h1>" + this.greeting + "</h1>";}
}
;
var greeter = new Greeter("Hello, world!");
document.body.innerHTML = greeter.greet();
//# sourceMappingURL=hello.js.map

最后运行就可以在浏览器看到效果了。

可以使用内建服务器，也可以使用自动部署功能部署到本地或远程服务器。

WebStorm使用TypeScript相关推荐

使用 webstorm 写 typescript 的一些小技巧
记录使用过程中的一些问题和解决办法,会不断完善. 导入项目的全局库新版的webstorm中会自动解析node_modules/@types目录下的ts文件.那当有些文件不在此目录下的话就需要手动指定 ...
WebStorm 10支持TypeScript 1.4到JavaScript的实时编译
JetBrains WebStorm 10支持在编辑代码的同时将TypeScript 1.4代码编译为JavaScript.新版本增加了对联合类型.模块.修饰符以及let和const关键字的支持.它还 ...
TypeScript 初识
文章博客地址:http://pinggod.com/2016/Typescript/ TypeScript 是 JavaScript 的超集,为 JavaScript 的生态增加了类型机制,并最终将代 ...
python计算机器人运动学分析_V-rep学习笔记：机器人逆运动学数值解法（The Jacobian Transpose Method）...
机器人运动学逆解的问题经常出现在动画仿真和工业机器人的轨迹规划中:We want to know how the upper joints of the hierarchy would rotate ...
android转 web 开发者,转战 WebApp: 最适合 Android 开发者的 WebApp 框架
为什么需要转战WebApp开发随着移动端设备越来越多, 微信应用号即将发布, 越来越多的页面需要被移动浏览器承载, HTML5开发大热, 我们需要掌握Web开发的技能来适应时代变化. 合适的WebA ...
android原生app转成web,转战WebApp: 最适合Android开发者的WebApp框架
原文出处:林法鑫的博客. ps:原以为又是一篇前端从业者人云亦云的水文,其实是篇干货,文中提到的AndroidUI4Web也是作者开发的. 为什么需要转战WebApp开发随着移动端设备越来越多, 微 ...
type-c英文怎么读音发音,type-c怎么读英语发音
如何做到先用typescript编译,再用babel转谷歌人工智能写作项目:小发猫如何编译TypeScript typescript什么意思,typescript是什么意思. 1)通过File-& ...
webstrom使用ts设置
Webstorm IDE可以开发TypeScript,同时支持自动编译成js文件,下面我们来进行一些简单的配置. 1.去node.js官网下载安装node.js 2.下载安装新版本的Webstorm ...
nodejs 菜鸟教程,nodejs个人博客
有了git和nodejs怎么搭建自己的博客 (1)假装你已经安装了,再假装你已经安装过git,再假装你注册了github账号.然后创建一个repositories.记住名字要和github用户名一致. ...

WebStorm使用TypeScript

WebStorm使用TypeScript相关推荐

最新文章

热门文章