一步一步學習TypeScript(14.Classes & inheritance_類與繼承)

有過面向對象開發的同學應該對類,繼承,接口的概念不會陌生,現在我們同樣可以在TypeScript中使用這些概念,來清晰我們的代碼結構.

classes

使用class關鍵字定義一個類, constructor定義這個類的構造函數. 使用this爲成員變量賦值.例如我們定義一個汽車類:

class Auto{
    engine: string;

    constructor(engine:string){
        this.engine = engine;
    }

    start(){}
}

inheritance

現在我們有了一個汽車類,但汽車分好多種,轎車,SUV,跑車等.現在我們繼承Auto類,編寫一個SUV類.

class SUV extends Auto{
    engine: string;

    constructor(engine:string){
        super(engine);
    }

    start(){
        console.log(this.engine+" started!")
    }
}

首先,必需使用super關鍵字調用父類的構造函數,之後我們爲SUV類重寫start方法.可以使引擎工作.

var suv = new SUV('V8'); //這臺suv有一個8缸發動機
suv.start(); 

幾點注意:

1.多態

var su1:Auto = new SUV('V6');  //su1指向原對象
su1.start();  //這裏調用的是Auto的start方法,還是SUV的?

2.強制類型轉換

class SuperCar extends Auto{

    //public engine:string 的意思爲 this.engine = engine;
    constructor(public engine:string){
        super(engine);
    }

    start(){
        console.log(this.engine+' started!')
    }

    speed(s:number = 300){
        console.log('speed '+s+'km feels like flying!')
    }
}

var superCar = new SuperCar('v12');

var auto = new Auto('v4');
suv = auto; //正確, SUV類與Auto類具有相同的屬性及方法,可以互相賦值,不需要強制類型轉換
auto = suv; //同上

superCar = auto; //錯誤, 因爲Auto類中沒有實現SuperCar中的speed方法
superCar = auto as SuperCar; //正確, 可以使用強制類型轉換.
superCar = <SuperCar> auto;  //也可以使用這種強制類型轉換.

3.想一下爲什麼是’undefined’

class Aa
{
    constructor()
    {
        this.MyvirtualMethod();
    }

    protected MyvirtualMethod(): void
    {
           console.log("A")
    }
}

class Bb extends Aa
{
    private testString: string = "B";

    public MyvirtualMethod(): void
    {
        console.log(this.testString); 
    }
}

var b = new Bb(); //爲什麼打印出的是 undefined
b.MyvirtualMethod(); //這裏爲什麼又有值了