您的位置:首页 > 其它

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
最后运行就可以在浏览器看到效果了。可以使用内建服务器,也可以使用自动部署功能部署到本地或远程服务器。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: