昨天講了

• class 簡介 & 語法
• 基本的繼承 Inheritance
• 修飾符 Modifiers

今天來繼續剩下的部分

• 建構子 Constructor
• 繼承的使用 Inheritance
• Class 小結

建構子 Constructor

Constructor 建構子/建構函式/構造方法 等等擁有在中文中不會使用到的各種別名

透過 new 建立實體時會自動調用 constructor() 方法，建構子通常用於初始化類別 class 的成員變數或是執行一些初始化工作

在 class 中的屬性可以這樣寫

class Monster {
    name: string;
    hp: number;
    mp: number;
}

但這個類別可能會被創建成各式各樣的實體，不可能屬性中的值都相同，這時候我們就可以在 constructor() 裡面定義屬性的初始值 name, hp, mp

class Monster {
    name: string;
    hp: number;
    mp: number;

    constructor(name: string, hp: number, mp: number) {
        this.name = name;
        this.hp = hp;
        this.mp = mp;
    }
}

在建立物件實體 (Instance) 時，也要傳入 constructor 所指定的參數

class Monster {
    name: string;
    hp: number;
    mp: number;

    constructor(name: string, hp: number, mp: number) {
        this.name = name;
        this.hp = hp;
        this.mp = mp;
    }
}

const godzilla = new Monster('godzilla', 100, 100);
console.log(godzilla.hp) // 100

關於 constructor() 的初始值寫法，如果屬性是 public 的話，也可以簡寫成以下

class Monster {
    constructor(
        public name: string, 
        public hp: number, 
        public mp: number) {
    }
}

const godzilla = new Monster('godzilla', 100, 100);
console.log(godzilla.hp) // 100

繼承的使用 Inheritance & super call

繼承時，如果子類也想要有原本父類的 constructor()，那就需要 super call，意思為對父類別 (super 類別) 的引用

子類別直接使用 constructor() 會報錯

要在子類別中的 constructor() 多 call 一次 super，這時的意思等同為 在子類別中執行父類別的 constructor()，既然都執行父類別的 constructor() 了，那就沒有其他問題了，TypeScript 就會讓你繼續在子類別的 constructor() 中執行新的東西、定義新的屬性

class Monster {
    name: string;
    hp: number;

    constructor(name: string, hp: number) {
        this.name = name;
        this.hp = hp;
    }
}

class DeadMonster extends Monster {
    deadTime: number;
    constructor(name: string, hp: number, deadTime: number) {
        super(name, hp)    // 等同在子類別中執行父類別的 constructor()
        this.deadTime = deadTime
    }
}

我們已經看了 class 簡介, constructor, Inheritance (extends), super(), Modifiers 等等大部分語法

在實際使用中，Class 以及 Interface 將是我們在 TypeScript 中主要使用的工具，可以想像每一個文件都有一個單獨的 Class 定義在裡面，我們通過 Interface 使這些不同的 Class 一起工作

像我當初只會寫 JavaScript，學習到這些概念時超級霧煞煞，雖然現在戰爭迷霧還是不少，但是已經可以開始體會 TypeScript 的好處，這些知識還是實戰使用時比較容易熟悉。

參考資料

Class 的基本语法
[筆記] 談談 JavaScript 中的 function constructor 和關鍵字 new