詳解TypeScript中類的定義與用法

更新時間：2023年06月29日 10:58:28 作者：ShihHsing

TypeScript是一種開源的編程語言，它是JavaScript的超集，這篇文章主要來和大家介紹一下TypeScript中類的定義與用法，感興趣的小伙伴可以了解一下

1. TypeScript是什么

在我們了解TypeScript類與JavaScript類之間的差異之前，讓我們先簡要介紹一下TypeScript是什么。

TypeScript是一種開源的編程語言，它是JavaScript的超集。也就是說，你可以使用JavaScript編寫的代碼，完全可以直接用TypeScript編寫。TypeScript在JavaScript的基礎上增加了靜態(tài)類型檢查和更強大的面向對象編程特性，使得我們能夠在開發(fā)過程中更早地發(fā)現(xiàn)潛在的錯誤，并提供更好的代碼提示和可讀性。

2. 類的定義

在JavaScript中，我們可以使用函數(shù)和原型鏈的方式來創(chuàng)建對象和類。讓我們先來看一個簡單的JavaScript類的例子：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
};
const john = new Person('John', 25);
john.greet(); // 輸出：Hello, my name is John and I'm 25 years old.

上面的代碼定義了一個名為Person的構造函數(shù)，并通過原型鏈的方式給它添加了一個greet方法。我們可以通過new關鍵字來實例化這個類，并調用其中定義的方法。

在TypeScript中，我們可以使用更簡潔的語法來定義類。讓我們來看一個相同功能的TypeScript類的例子：

class Person {
  constructor(public name: string, public age: number) {}
  greet() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}
const john = new Person('John', 25);
john.greet(); // 輸出：Hello, my name is John and I'm 25 years old.

通過比較這兩段代碼，我們可以看到TypeScript類的定義更加簡潔明了。在TypeScript中，我們使用class關鍵字來定義類，并使用constructor方法來初始化類的屬性。此外，我們不需要顯式地使用原型鏈來添加方法，而是直接在類中定義即可。

3. 類的繼承

繼承是面向對象編程中非常重要的概念，它允許我們創(chuàng)建一個類，并從已有的類中繼承屬性和方法。讓我們看一下在JavaScript和TypeScript中如何實現(xiàn)類的繼承。

JavaScript中的類繼承

在JavaScript中，類的繼承是通過原型鏈來實現(xiàn)的。讓我們來看一個例子：

function Animal(name) {
  this.name = name;
}
Animal.prototype.greet = function() {
  console.log(`Hello, I'm ${this.name}`);
};
function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
  console.log('Woof! Woof!');
};
const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.greet(); // 輸出：Hello, I'm Buddy
myDog.bark(); // 輸出：Woof! Woof!

上面的代碼定義了兩個類，Animal和Dog。Dog類通過調用Animal類的構造函數(shù)，并使用Object.create來繼承了Animal類的原型鏈。我們可以在Dog類中定義自己的方法，如bark方法。

TypeScript中的類繼承

在TypeScript中，類的繼承更加簡單和直觀。讓我們來看一個相同功能的TypeScript類繼承的例子：

class Animal {
  constructor(public name: string) {}
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
}
class Dog extends Animal {
  constructor(name: string, public breed: string) {
    super(name);
  }
  bark() {
    console.log('Woof! Woof!');
  }
}
const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.greet(); // 輸出：Hello, I'm Buddy
myDog.bark(); // 輸出：Woof! Woof!

通過比較這兩段代碼，我們可以看到在TypeScript中定義類的繼承更加簡潔明了。我們使用extends關鍵字來指定一個類繼承自另一個類，并使用super關鍵字在子類的構造函數(shù)中調用父類的構造函數(shù)。

4. 類的訪問修飾符

在面向對象編程中，訪問修飾符用于控制類的屬性和方法的可訪問性。在JavaScript中，我們沒有內置的訪問修飾符，所有的屬性和方法都是公開的。然而，在TypeScript中，我們可以使用訪問修飾符來定義屬性和方法的可訪問性。

TypeScript提供了三種訪問修飾符：public、private和protected。

public：公開的屬性或方法可以在類的內部和外部訪問。
private：私有的屬性或方法只能在類的內部訪問。
protected：受保護的屬性或方法可以在類的內部和子類中訪問。

讓我們通過一個例子來理解這些訪問修飾符的作用：

class Car {
  public brand: string;
  private price: number;
  protected color: string;
  constructor(brand: string, price: number, color: string) {
    this.brand = brand;
    this.price = price;
    this.color = color;
  }
  public start() {
    console.log(`Starting the ${this.color} ${this.brand} car.`);
  }
  private calculateTax() {
    // 在類的內部可以訪問私有方法和屬性
    // 計算稅費的邏輯
  }
  protected drive() {
    console.log(`Driving the ${this.color} ${this.brand} car.`);
  }
}
const myCar = new Car('Tesla', 50000, 'Red');
myCar.start(); // 輸出：Starting the Red Tesla car.
myCar.drive(); // 編譯錯誤：Property 'drive' is protected and only accessible within class 'Car' and its subclasses.
console.log(myCar.brand); // 輸出：Tesla
console.log(myCar.price); // 編譯錯誤：Property 'price' is private and only accessible within class 'Car'.
console.log(myCar.color); // 編譯錯誤：Property 'color' is protected and only accessible within class 'Car' and its subclasses.

通過使用不同的訪問修飾符，我們可以控制屬性和方法的可訪問性，從而提高代碼的安全性和可維護性。

5. 類的靜態(tài)屬性與方法

在JavaScript和TypeScript中，類可以具有靜態(tài)屬性和靜態(tài)方法。靜態(tài)屬性和方法屬于類本身，而不是類的實例。讓我們來看一個例子：

class MathUtils {
  static PI = 3.14159;
  static calculateArea(radius: number) {
    return MathUtils.PI * radius * radius;
  }
}
console.log(MathUtils.PI); // 輸出：3.14159
console.log(MathUtils.calculateArea(5)); // 輸出：78.53975

在上面的例子中，我們定義了一個名為MathUtils的類，并聲明了一個靜態(tài)屬性PI和一個靜態(tài)方法calculateArea?？梢酝ㄟ^類名直接訪問靜態(tài)屬性和調用靜態(tài)方法，而不需要實例化類。

靜態(tài)屬性和方法在許多情況下非常有用，例如用于創(chuàng)建工具類或提供全局共享的功能。