分類: 專業分享

動手玩TypeScript 系列文章：

• 動手玩TypeScript-1
• 動手玩TypeScript-2 (本文章)

—

第1節我們完成了一個 “鳥類別 Bird class”
接下來我們讓鳥產生後代(繼承)

TS無法做多重繼承(multiple inheritance)，因此情況可以單純一點
我們可以把繼承視為 “無性生殖” 的概念
生下來的類別 (子類別，sub-class) 擁有和父類別 (parent-class) 一模一樣的特質

現在我們來生一隻 “鴨”
在原本的 test_bird.ts 中，我們再加上一個class

class Duck extends Bird {
    constructor(name: string, age: number) {
        super(name, age);
    }

    //override 舊的Method
    getInfo(): string {
        return "This duck's name is " + this._name + " and age is " + this._age.toString();
    }

    //新的Method
    swim() {
        document.write(this._name + " is swimming");
    }
}

Duck的重點如下：
1. 第一行的 extends 表示 Duck 繼承自 Bird
　從這裡開始，Duck就用有了 Bird的
　　name: string
　　age: number
　　getInfo()
　　sing()
2. Constructor中，super()表示執行和父類別一樣的Constructor內容
　如果沒寫，不會自動執行哦
3. getInfo() 被我們重寫了一次，內容有點不一樣
　在子類別中重寫一次Method，這個動作叫做 Override
　在TS中，Override動作是不加修飾詞的
4. 最後我們定義了新一個的Method叫做游泳：swim()

—

那麼，Duck類別可以做到什麼事呢？
我們繼續來研究一下…
開啟 test_bird.html 咱們再加上幾行JS
來產生一隻叫做 “Green” 的、1歲的綠頭鴨

var duck = new Duck("Green", 1);

document.write(duck.getInfo() + "<br>");
duck.swim();

結果如下：

在Green的部分
我們可以看到

• getInfo() 的確被覆寫掉了
• Green有新的能力： swim()
• 這裡雖然沒有要 Green 做 sing() ，但牠其實辦得到哦

—

至此我們來總結一下：

1. TypeScript只允許單一繼承(single inheritance)，繼承後的子類別(sub-class) 擁有和父類別 (parent-class) 一模一樣的特質
2. 子類別可以覆寫父類別的Methods；亦可再新增自己的Methods
3. TypeScript中直接使用 constructor() 作為建構子；若要執行與父類別相同的建構子動作，記得加上 super() 哦