如何在 TypeScript 中使用類和繼承

作者：前端日月潭 2023-10-18 16:30:50

TypeScript是一種編程語言，它是JavaScript的超集。它通過添加靜態類型、類、接口和模塊等功能來擴展JavaScript。

“
TypeScript是一種編程語言，它是JavaScript的超集。它通過添加靜態類型、類、接口和模塊等功能來擴展JavaScript
”

class Hero {
  name: string;
  age: number;

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

  say(): void {
    console.log(`my name is ${this.name}`);
  }
}

在上面的代碼中，我們定義了一個名為Hero的類，它具有name和age屬性，以及一個say方法。構造函數用于初始化對象的屬性。

通過類的定義，我們可以創建多個具有相同屬性和行為的對象，實現代碼的復用和封裝。

const Jieke = new Hero('jieke', 28)
Jieke.say();  // 輸出：my name is jieke

繼承和子類

在面向對象編程中，繼承是一種重要的概念。通過繼承，我們可以創建一個類的子類（也稱為派生類），并繼承其屬性和方法。子類可以擴展或修改父類的功能，從而實現代碼的重用和擴展

在TypeScript中，我們使用extends關鍵字來指定一個類繼承自另一個類

class Superman extends Hero {
  heroId: string;

  constructor(name: string, age: number, heroId: string) {
    super(name, age);
    this.heroId = heroId;
  }

  skill(): void {
    console.log(`${this.name}_${this.heroId}.`);
  }
}

我們定義了一個名為Superman的子類，它繼承自Hero父類。子類具有自己的屬性heroId，并通過調用super關鍵字來調用父類的構造函數。

創建子類的實例與創建父類的實例類似：

const s1 = new Superman("Batman", 20, "12345");
s1.say();  // 輸出：my name is Batman
s1.skill();  // 輸出：Batman_12345

限制類的屬性和方法的訪問

在TypeScript中，我們可以使用訪問修飾符來限制類的屬性和方法的訪問。以下是幾個常用的訪問修飾符：

public（默認）：可以在類內部和外部訪問。
private：只能在類內部訪問。
protected：可以在類內部和子類中訪問，但不能在類外部訪問。

通過使用訪問修飾符，我們可以控制類的成員的可見性，增強了封裝性和安全性

class Person {
  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;
  }

  say() {
    console.log(`Hi, my name is ${this.name}.`);
  }

  private sayAge() {
    console.log(`I am ${this.age} years old.`);
  }
}

class Student extends Person {
  constructor(name: string, age: number, gender: string) {
    super(name, age, gender);
  }

  sayGender() {
    console.log(`My gender is ${this.gender}.`);
  }
}

const person = new Person("Tom", 18, "male");
console.log(person.name); // "Tom"
console.log(person.age); // Error: Property 'age' is private and only accessible within class 'Person'.
console.log(person.gender); // Error: Property 'gender' is protected and only accessible within class 'Person' and its subclasses.

const student = new Student("Jane", 20, "female");
console.log(student.gender); // "female"

抽象類

在TypeScript中，我們還可以使用抽象類（abstract class）來定義一個不可實例化的基類。抽象類提供了一種模板，用于派生其他類，并定義了一些必須由子類實現的抽象方法。抽象類不能被直接實例化，只能被繼承

以下是一個抽象類的示例：

abstract class Role {
    // 定義抽象屬性
    abstract name:string; 
    abstract age:number;

    // 定義保護屬性，每個繼承子類都能繼承并調用的屬性
    protected lastPoint!: {x:number,y:number};
    protected status!: "run" | "risk" | "die";

    // 定義保護方法，每個繼承子類都能繼承并調用的方法
    protected getLastPoint (lastPoint:{x:number,y:number}) {
        this.lastPoint = lastPoint;
    }

    // 定義抽象方法，在子類中重寫來執行不同的任務
    abstract attack():void;
}

繼承抽象類的子類實例化對象通過調用同一抽象類規定的抽象方法，來實現了不同的操作，體現了類的多態

class antor extends Role {
    // 重寫抽象屬性
    name: string = "han";
    age: string = 20;

    // 重寫抽象方法
    attack(): void {
        console.log("正在被攻擊");
    }
    constructor () {
        super();
    }
}

責任編輯：華軒來源：今日頭條