使用TypeScript構(gòu)建實(shí)例對(duì)象

cnio 發(fā)布于2019-08-23 11:38 / 1656人閱讀

摘要：學(xué)習(xí)了，不能沒有一個(gè)綜合實(shí)例，這不，自己做了一個(gè)，分享下。若有疑問，請(qǐng)加群

學(xué)習(xí)了ts，不能沒有一個(gè)綜合實(shí)例，這不，自己做了一個(gè)，分享下。
實(shí)例是設(shè)計(jì)一輛汽車，它有一個(gè)抽象類，抽象類再實(shí)現(xiàn)一個(gè)接口，先定義好枚舉

//檔位
enum Gear {
    First=1, Second=3, Third=5
}
//汽車顏色
enum Color {
    White, Red
}

再定義接口，定義汽車啟動(dòng)，駕駛及最后的距離如下：

interface Drivable {
    //啟動(dòng)
    start(): void;
    //駕駛
    drive(time: number, speed: Gear): boolean;
    //具體位置
    getPosition(): number
}

接著設(shè)計(jì)抽象類，實(shí)現(xiàn)接口通用部分，

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;
    }
}

接著是我們的具體實(shí)現(xiàn)類了，如下：

//派生類
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]
    }
}

然后執(zhí)行，如下：

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()

運(yùn)行程序，可以看到汽車運(yùn)行的距離。
若有疑問，請(qǐng)加群：654979292

GPU云服務(wù)器云服務(wù)器對(duì)象構(gòu)建實(shí)例對(duì)象對(duì)象實(shí)例實(shí)例化對(duì)象

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/97245.html

相關(guān)文章

JavaScript是如何工作的：深入類和繼承內(nèi)部原理+Babel和 TypeScript 之間轉(zhuǎn)換

摘要：下面是用實(shí)現(xiàn)轉(zhuǎn)成抽象語法樹如下還支持繼承以下是轉(zhuǎn)換結(jié)果最終的結(jié)果還是代碼，其中包含庫中的一些函數(shù)。可以使用新的易于使用的類定義，但是它仍然會(huì)創(chuàng)建構(gòu)造函數(shù)和分配原型。這是專門探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 15 篇。想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！如果你錯(cuò)過了前面的章節(jié)，可以在這里找到它們： JavaScript 是...

PrototypeZ 2019-08-23 14:54 評(píng)論0 收藏0
Angular（01）-- 架構(gòu)概覽

摘要：正文架構(gòu)概覽正文架構(gòu)概覽接觸大概一個(gè)月吧，期間寫了個(gè)項(xiàng)目，趁現(xiàn)在稍微有點(diǎn)時(shí)間，來回顧梳理一下。里的模塊，并不等同于項(xiàng)目中的模塊概念。當(dāng)然，這只是我目前階段的理解。聲明本系列文章內(nèi)容梳理自以下來源： Angular 官方中文版教程官方的教程，其實(shí)已經(jīng)很詳細(xì)且易懂，這里再次梳理的目的在于復(fù)習(xí)和鞏固相關(guān)知識(shí)點(diǎn)，剛開始接觸學(xué)習(xí) Angular 的還是建議以官網(wǎng)為主。因?yàn)檫@系列文章，更多的會(huì)...

bitkylin 2019-04-23 11:46 評(píng)論0 收藏0
從 JavaScript 到 TypeScript - 模塊化和構(gòu)建

摘要：不過，相對(duì)于靜態(tài)類型檢查帶來的好處，這些代價(jià)是值得的。當(dāng)然少不了的模塊化標(biāo)準(zhǔn)，雖然到目前為止和大部分瀏覽器都還不支持它。本身支持兩種模塊化方式，一種是對(duì)的模塊的微小擴(kuò)展，另一種是在發(fā)布之前本身模仿的命名空間。有一種情況例外。 TypeScript 帶來的最大好處就是靜態(tài)類型檢查，所以在從 JavaScript 轉(zhuǎn)向 TypeScript 之前，一定要認(rèn)識(shí)到添加類型定義會(huì)帶來額外的工作量...

Jonathan Shieber 2019-08-20 15:38 評(píng)論0 收藏0
JavaScript 工作原理之十五－類和繼承及 Babel 和 TypeScript 代碼轉(zhuǎn)換探秘

摘要：使用新的易用的類定義，歸根結(jié)底也是要?jiǎng)?chuàng)建構(gòu)造函數(shù)和修改原型。首先，它把構(gòu)造函數(shù)當(dāng)成單獨(dú)的函數(shù)且包含類屬性集。該節(jié)點(diǎn)還儲(chǔ)存了指向父類的指針引用，該父類也并儲(chǔ)存了構(gòu)造函數(shù)，屬性集和及父類引用，依次類推。原文請(qǐng)查閱這里，略有刪減，本文采用知識(shí)共享署名 4.0 國(guó)際許可協(xié)議共享，BY Troland。本系列持續(xù)更新中，Github 地址請(qǐng)查閱這里。這是 JavaScript 工作原理的第...

GeekGhc 2019-08-29 16:05 評(píng)論0 收藏0
JavaScript 工作原理之十五－類和繼承及 Babel 和 TypeScript 代碼轉(zhuǎn)換探秘

摘要：使用新的易用的類定義，歸根結(jié)底也是要?jiǎng)?chuàng)建構(gòu)造函數(shù)和修改原型。首先，它把構(gòu)造函數(shù)當(dāng)成單獨(dú)的函數(shù)且包含類屬性集。該節(jié)點(diǎn)還儲(chǔ)存了指向父類的指針引用，該父類也并儲(chǔ)存了構(gòu)造函數(shù)，屬性集和及父類引用，依次類推。原文請(qǐng)查閱這里，略有刪減，本文采用知識(shí)共享署名 4.0 國(guó)際許可協(xié)議共享，BY Troland。本系列持續(xù)更新中，Github 地址請(qǐng)查閱這里。這是 JavaScript 工作原理的第...

BigNerdCoding 2019-08-02 11:00 評(píng)論0 收藏0