使用TypeScript構建實例對象

cnio 發布于2019-08-23 11:38 / 1661人閱讀

摘要：學習了，不能沒有一個綜合實例，這不，自己做了一個，分享下。若有疑問，請加群

學習了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云服務器云服務器對象構建實例對象對象實例實例化對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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