• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript电子时钟示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
听说MS出了差不多能“替代”JavaScript的东东,那是啥呢,就是TypeScript,完全兼容JavaScript,好奇之下,试了一下,嘿嘿,感觉不错。
更能体现出OO的思想了,与C#又有极大的相同点(只是语法上挺相似),写起来顺手比原来的JavaScript顺手多了。
下面来演示一个简单的小例子,就是Web页面上的时间,相信会JavaScript的人想都不用想就可以直接敲出来了,但是你有试过用TS写吗?
用C#的概念讲解一下TS:
1、首先定义个命名空间 module--NameSpace
2、增加一个Test类,需要用关键字 export
3、实现类
...具体代码如下:
module Time {
    export class Test {
        element: HTMLElement;
        span: HTMLElement;
        timer:number;
        constructor (e:HTMLElement) {  //构造函数
         this.element=e;
         this.element.innerHTML="Now Time is: ";
         this.span=document.createElement(\'span\');
         this.element.appendChild(this.span);
         this.span.innerHTML=new Date().toTimeString();
        }
        start() {
          this.timer=setInterval(()=>this.span.innerHTML=new Date().toTimeString(),500);
        }
        stop(){
            clearTimeout(this.timer);
        }
    }
}

把上面的TS解析成JS看看是什么样的。

var Time;
(function (Time) {
    var Test = (function () {
        function Test(e) {
            this.element = e;
            this.element.innerHTML = "Now Time is: ";
            this.span = document.createElement(\'span\');
            this.element.appendChild(this.span);
            this.span.innerHTML = new Date().toTimeString();
        }
        Test.prototype.start = function () {
            var _this = this;
            this.timer = setInterval(function () {
                return _this.span.innerHTML = new Date().toTimeString();
            }, 500);
        };
        Test.prototype.stop = function () {
            clearTimeout(this.timer);
        };
        return Test;
    })();
    Time.Test = Test;    
})(Time || (Time = {}));

 两者对比一下是不是觉得TS比JS的代码简洁明了?

 

接下来测试一下我们TS的类有没有用呢?

之前有说过,TS完全兼容JavaScript,直接用JS来测试吧。

var div=document.createElement(\'div\');
document.body.appendChild(div);
var obj=new Time.Test(div);
var button = document.createElement(\'button\');
button.innerHTML = "Start"
button.onclick = function() {
    obj.start();
}
document.body.appendChild(button);
var buttons = document.createElement(\'button\');
buttons.innerHTML = "Stop"
buttons.onclick = function() {
    obj.stop();
}
document.body.appendChild(buttons);

运行效果!你成功了吗?


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript转JavaScript的方法。发布时间:2022-07-18
下一篇:
Visual Studio Code调试 Angular 和 TypeScript 的配置发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap