深入了解 TypeScript 繼承

TypeScript 是 Microsoft 發布的一款開源的編程語言，它是 JavaScript 的一個超集，TypeScript 在 JavaScript 基礎上添加了可選類型和類等面向對象編程的特性。在 TypeScript 中，類是一個重要的概念，類之間的繼承是面向對象編程的一個核心。本篇文章從 TypeScript 繼承的各個方面進行詳細闡述。

一、繼承的基本概念

繼承是面向對象編程中的一個基本概念。通過繼承，一個類可以派生出一個或多個子類，在子類中可以繼承父類的屬性和方法，並且還可以擴展自己的屬性和方法。在 TypeScript 中，繼承的語法與 JavaScript 中的類繼承類似，使用 extends 關鍵字。

class Animal {
  type: string = 'animal';
  eat(food: string): void {
    console.log('eating', food);
  }
}
class Dog extends Animal {
  bark(): void {
    console.log('barking');
  }
}

在上述代碼中，Dog 類通過 extends 關鍵字繼承了 Animal 類的屬性和方法，同時還增加了自己的 bark 方法。通過繼承，Dog 實例化後就可以調用 Animal 中的 eat 方法，也可以調用自己新增的 bark 方法。

二、super 關鍵字

在子類中，如果要調用父類的屬性或方法，可以使用 super 關鍵字。在子類的 constructor 中，可以通過 super() 調用父類的 constructor，也可以在子類方法中使用 super 調用父類方法。

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}
class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }
  bark(): void {
    console.log('barking');
  }
  eat(food: string): void {
    super.eat(food);
    console.log('dog is eating');
  }
}

在上述代碼中，Animal 類有一個 name 屬性，並且在 constructor 中接收一個參數，這個參數會給 name 賦值。在 Dog 類中，使用 super(name) 調用了 Animal 的 constructor，相當於給 Dog 的 name 屬性賦了值。在 Dog 的 eat 方法中，使用 super.eat(food) 調用了 Animal 的 eat 方法，相當於執行了 Animal 中的 eat 方法，同時又增加了一個輸出。

三、類的訪問修飾符

在 TypeScript 中，類的屬性和方法的訪問許可權可以通過訪問修飾符來控制，訪問修飾符包括 public、private 和 protected 三種。

public：表示公共的，可以被任何人訪問到，包括類的內部和外部；

private：表示私有的，只可以在類的內部訪問，不能在類的外部訪問；

protected：表示受保護的，只可以在類的內部和子類中訪問，不能在類的外部訪問。

class Animal {
  public name: string;
  private age: number;
  protected gender: string;
  constructor(name: string, age: number, gender: string) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  eat(food: string): void {
    console.log(`${this.name} is eating ${food}`);
  }
}
class Dog extends Animal {
  constructor(name: string, age: number, gender: string) {
    super(name, age, gender);
  }
  showAge(): void {
    // 報錯，age 是 Animal 的私有屬性，不能在子類中訪問
    // console.log(`${this.name} is ${this.age} years old`);
    console.log(`${this.name} is ${super.age} years old`);
  }
  showGender(): void {
    console.log(`${this.name} is ${this.gender}`);
  }
}

在上述代碼中，Animal 類有三個屬性，使用了不同的訪問修飾符。在 Dog 類中，調用了 super.age 來訪問 Animal 類的 age 屬性，由於 age 為 private 修飾符，不能通過 this.age 直接訪問。在 showGender 方法中，可以直接訪問 Animal 類的 protected 屬性 gender。

四、抽象類和抽象方法

抽象類是不能被實例化的類，只能被繼承。抽象類可以包含抽象方法，抽象方法必須在子類中被實現，否則會報錯。

abstract class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  abstract eat(food: string): void;
}
class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }
  eat(food: string): void {
    console.log(`${this.name} is eating ${food}`);
  }
}
const dog = new Dog('Tom');
// 報錯，無法實例化抽象類
// const animal = new Animal('Bob');

在上述代碼中，Animal 類是一個抽象類，它有一個抽象方法 eat，這個方法必須在子類中實現。在 Dog 類中，實現了 eat 方法，並且可以被實例化。在實例化時，嘗試實例化 Animal，會報錯，因為 Animal 是一個抽象類，不能被實例化。

五、介面與類的關係

在 TypeScript 中，類可以實現介面，實現介面的類必須實現介面中定義的屬性和方法。

interface AnimalInterface {
  name: string;
  eat(food: string): void;
}
class Dog implements AnimalInterface {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  eat(food: string): void {
    console.log(`${this.name} is eating ${food}`);
  }
}
const dog = new Dog('Tom');

在上述代碼中，AnimalInterface 介面定義了兩個屬性，名稱和 eat 方法。然後 Dog 類實現了 AnimalInterface 介面，必須實現介面中定義的屬性和方法。在實例化 Dog 時，需要傳入一個參數 name，這個參數會給 Dog 的 name 屬性賦值。

結束語

本文詳細闡述了 TypeScript 繼承的各個方面，包括繼承的基本概念、super 關鍵字、類的訪問修飾符、抽象類和抽象方法、介面與類的關係等。理解並熟練使用 TypeScript 的繼承機制，能夠使我們更好地進行面向對象編程，提高開發效率和代碼質量。