使用TypeScript构建实例对象

cnio 发布于2019-08-23 11:38 / 1657人阅读

摘要：学习了，不能没有一个综合实例，这不，自己做了一个，分享下。若有疑问，请加群

学习了ts，不能没有一个综合实例，这不，自己做了一个，分享下。
实例是设计一辆汽车，它有一个抽象类，抽象类再实现一个接口，先定义好枚举

//档位
enum Gear {
    First=1, Second=3, Third=5
}
//汽车颜色
enum Color {
    White, Red
}

再定义接口，定义汽车启动，驾驶及最后的距离如下：

interface Drivable {
    //启动
    start(): void;
    //驾驶
    drive(time: number, speed: Gear): boolean;
    //具体位置
    getPosition(): number
}

接着设计抽象类，实现接口通用部分，

abstract class Car implements Drivable {
    protected _isRunning: boolean;
    protected _distanceFromStart: number;

    constructor() {
        this._isRunning = false;
        this._distanceFromStart = 0;
    }

    public start() {
        this._isRunning = true;
    }
    abstract drive(time: number, speed: Gear): boolean;
    public getPosition(): number {
        return this._distanceFromStart;
    }
}

接着是我们的具体实现类了，如下：

//派生类
class Civic extends Car {
    private color: Color;

    constructor(T) {
        super();
        this.color = T;
    }

    public drive(time: number, speed: Gear): boolean {
        if (this._isRunning) {
            this._distanceFromStart += time*speed;
            return true;
        }
        return false;
    }

    public getColor(): string {
        return Color[this.color]
    }
}

然后执行，如下：

let civic = new Civic(Color.Red);
civic.start();
civic.drive(10, Gear.First);
civic.drive(60, Gear.Third);
document.body.innerHTML = "distance:"+civic.getPosition()+",color:"+civic.getColor()

运行程序，可以看到汽车运行的距离。
若有疑问，请加群：654979292

GPU云服务器云服务器对象构建实例对象对象实例实例化对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97245.html

JavaScript是如何工作的：深入类和继承内部原理+Babel和 TypeScript 之间转换

摘要：下面是用实现转成抽象语法树如下还支持继承以下是转换结果最终的结果还是代码，其中包含库中的一些函数。可以使用新的易于使用的类定义，但是它仍然会创建构造函数和分配原型。这是专门探索 JavaScript 及其所构建的组件的系列文章的第 15 篇。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！如果你错过了前面的章节，可以在这里找到它们： JavaScript 是...

PrototypeZ 2019-08-23 14:54 评论0 收藏0
Angular（01）-- 架构概览

摘要：正文架构概览正文架构概览接触大概一个月吧，期间写了个项目，趁现在稍微有点时间，来回顾梳理一下。里的模块，并不等同于项目中的模块概念。当然，这只是我目前阶段的理解。声明本系列文章内容梳理自以下来源： Angular 官方中文版教程官方的教程，其实已经很详细且易懂，这里再次梳理的目的在于复习和巩固相关知识点，刚开始接触学习 Angular 的还是建议以官网为主。因为这系列文章，更多的会...

bitkylin 2019-04-23 11:46 评论0 收藏0
从 JavaScript 到 TypeScript - 模块化和构建

摘要：不过，相对于静态类型检查带来的好处，这些代价是值得的。当然少不了的模块化标准，虽然到目前为止和大部分浏览器都还不支持它。本身支持两种模块化方式，一种是对的模块的微小扩展，另一种是在发布之前本身模仿的命名空间。有一种情况例外。 TypeScript 带来的最大好处就是静态类型检查，所以在从 JavaScript 转向 TypeScript 之前，一定要认识到添加类型定义会带来额外的工作量...

Jonathan Shieber 2019-08-20 15:38 评论0 收藏0
JavaScript 工作原理之十五－类和继承及 Babel 和 TypeScript 代码转换探秘

摘要：使用新的易用的类定义，归根结底也是要创建构造函数和修改原型。首先，它把构造函数当成单独的函数且包含类属性集。该节点还储存了指向父类的指针引用，该父类也并储存了构造函数，属性集和及父类引用，依次类推。原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工作原理的第...

GeekGhc 2019-08-29 16:05 评论0 收藏0
JavaScript 工作原理之十五－类和继承及 Babel 和 TypeScript 代码转换探秘

摘要：使用新的易用的类定义，归根结底也是要创建构造函数和修改原型。首先，它把构造函数当成单独的函数且包含类属性集。该节点还储存了指向父类的指针引用，该父类也并储存了构造函数，属性集和及父类引用，依次类推。原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工作原理的第...

BigNerdCoding 2019-08-02 11:00 评论0 收藏0