WebStorm使用TypeScript
2017-02-28 17:21
537 查看
前提条件:安装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最后运行就可以在浏览器看到效果了。可以使用内建服务器,也可以使用自动部署功能部署到本地或远程服务器。
相关文章推荐
- JS-在WebStorm上使用TypeScript
- AngularJs2.0学习笔记0 :使用webstorm实现基于typescript 的quickstart 例程调试
- 使用WebStorm开发TypeScript的设置
- 使用WebStorm开发TypeScript的设置
- WebStorm下使用TypeScript
- WebStorm下使用TypeScript
- 使用webstorm调试node.js
- webstorm使用git
- 使用 WebStorm IDE 调试 Pomelo 应用程序
- 关于TypeScript中null,undefined的使用
- 使用 EditorConfig来规范代码缩进等的风格以webstorm为例
- 前端开发利器webStorm 3.0配置使用
- 【第1篇】TypeScript在Eclipse在线安装和使用教程
- 使用webstorm创建一个简单的node.js工程
- WebStorm使用技巧
- 在webstorm中使用git
- js ide WebStorm 使用总结
- 使用WebStorm和Git开发Node.js应用
- 使用TypeScript开发程序
- WebStorm 点滴积累及使用技巧_持续更新【2013-03-23】【最近修改2013-06-04】