WebStorm使用TypeScript

最新推荐文章于 2022-07-19 09:30:12 发布

黑虎含珠

最新推荐文章于 2022-07-19 09:30:12 发布

阅读量3.1k

点赞数

分类专栏： # FlinkCDC Vue TypeScript

本文链接：https://blog.csdn.net/chenhaifeng2016/article/details/58606563

版权

FlinkCDC 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

Vue TypeScript

8 篇文章 0 订阅

订阅专栏

前提条件：

安装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

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

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

黑虎含珠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebStorm使用TypeScript

前提条件：安装nodejs安装webstorm，自带有typescript本人的环境是webstorm 2016.3.3, nodejs 6.9.2可以通过npm install -g typescript来安装typescript最新版本.创建项目demo1创建typescript的项目配置文件tsconfig.json{ "compilerO
复制链接

扫一扫

专栏目录