TypeScript

動手玩TypeScript-2

動手玩TypeScript 系列文章:

第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() 哦
Facebook留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。