本系列教程帶您逐步學習 TypeScript。第一部分簡要介紹了 TypeScript 并推薦了一些可用于編寫 TypeScript 的 IDE。第二部分重點介紹了數據類型，第三部分討論了 TypeScript 接口的基礎知識。

您可能已經知道，JavaScript 現在也原生支持類和面向對象編程。但是，TypeScript 長期以來都允許開發(fā)人員在其代碼中使用類。這段代碼隨后編譯成可在所有主要瀏覽器上運行的 JavaScript 代碼。在本教程中，您將學習 TypeScript 中的類。它們與其 ES6 對應物類似，但更嚴格。

創(chuàng)建您的第一個類

讓我們從基礎開始。類是面向對象編程的基礎部分。您可以使用類來表示任何具有某些屬性和函數的實體，這些函數可以作用于給定的屬性。TypeScript 使您可以完全控制在其自身包含的類內部和外部可訪問的屬性和函數。以下是如何創(chuàng)建類的基本示例。

您可能已經注意到，構造函數類似于 get 和 name，以及 get 但不是 readonly。如果未顯式指定，則設置器的參數類型將從 getter 的返回類型推斷。從 TypeScript 4.3 開始，您可以擁有一個設置器，它接受與 getter 返回的類型不同的類型。

使用接口實現類

在我們之前的 TypeScript 接口入門教程中，我們了解到接口基本上用于指定我們在代碼中將使用的不同對象的結構。現在，我們將學習如何基于一些先前聲明的接口實現類。

interface IPoint {
    x: number;
    y: number;
    position(x: number, y: number): void
}

interface IRectangle extends IPoint {
    width: number;
    length: number;
    area(width: number, length: number): number
}

class Point implements IPoint {
    x: number;
    y: number;

    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }

    position(): void {
        console.log(`The point is at (${this.x}, ${this.y}).`);
    }
}

class Rectangle implements IRectangle {
    width: number;
    length: number;
    x: number;
    y: number;

    constructor(x: number, y: number, width: number, length: number) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.length = length;
    }

    area(): number {
        return this.width * this.length;
    }

    position(): void {
        console.log(`The rectangle is at (${this.x}, ${this.y}).`);
    }
}

let myPoint = new Point(10, 20);

let myRect = new Rectangle(0, 0, 20, 30);

myPoint.position();

myRect.position();

console.log(myRect.area());

我們創(chuàng)建了一個 IRectangle 接口，就像我們在之前的教程中所做的那樣。這里的一個額外更改是，我們還向接口添加了一個函數聲明。

IRectangle，這意味著它將具有這四個屬性和兩個方法來輸出其位置和顯示其面積。

總結

在本教程中，我嘗試介紹 TypeScript 中類的基礎知識。我們首先創(chuàng)建了一個非?；镜?Person 類，它將人的姓名打印到控制臺中。之后，您學習了 private 關鍵字，該關鍵字可用于防止在程序的任意點訪問類的成員。

最后，您學習了如何使用繼承基類在代碼中擴展不同的類。您可以在官方文檔中了解更多關于類的信息。

以上是初學者的打字稿，第4部分：課程的詳細內容。更多信息請關注PHP中文網其他相關文章！