本系列教程帶您逐步學(xué)習(xí)TypeScript。第一部分簡(jiǎn)要介紹了TypeScript 並推薦了一些可用於編寫(xiě)TypeScript 的IDE。第二部分重點(diǎn)介紹了數(shù)據(jù)類型，第三部分討論了TypeScript 接口的基礎(chǔ)知識(shí)。

您可能已經(jīng)知道，JavaScript 現(xiàn)在也原生支持類和麵向?qū)ο缶幊?。但是，TypeScript 長(zhǎng)期以來(lái)都允許開(kāi)發(fā)人員在其代碼中使用類。這段代碼隨後編譯成可在所有主要瀏覽器上運(yùn)行的JavaScript 代碼。在本教程中，您將學(xué)習(xí)TypeScript 中的類。它們與其ES6 對(duì)應(yīng)物類似，但更嚴(yán)格。

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

讓我們從基礎(chǔ)開(kāi)始。類是面向?qū)ο缶幊痰幕A(chǔ)部分。您可以使用類來(lái)表示任何具有某些屬性和函數(shù)的實(shí)體，這些函數(shù)可以作用於給定的屬性。 TypeScript 使您可以完全控制在其自身包含的類內(nèi)部和外部可訪問(wèn)的屬性和函數(shù)。以下是如何創(chuàng)建類的基本示例。

您可能已經(jīng)註意到，構(gòu)造函數(shù)類似於get和name ，以及get但不是readonly 。如果未顯式指定，則設(shè)置器的參數(shù)類型將從getter 的返回類型推斷。從TypeScript 4.3 開(kāi)始，您可以擁有一個(gè)設(shè)置器，它接受與getter 返回的類型不同的類型。

使用接口實(shí)現(xiàn)類

在我們之前的TypeScript 接口入門(mén)教程中，我們了解到接口基本上用於指定我們?cè)诖a中將使用的不同對(duì)象的結(jié)構(gòu)。現(xiàn)在，我們將學(xué)習(xí)如何基於一些先前聲明的接口實(shí)現(xiàn)類。

 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)建了一個(gè)IRectangle接口，就像我們?cè)谥暗慕坛讨兴龅哪菢印＿@裡的一個(gè)額外更改是，我們還向接口添加了一個(gè)函數(shù)聲明。

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

總結(jié)

在本教程中，我嘗試介紹TypeScript 中類的基礎(chǔ)知識(shí)。我們首先創(chuàng)建了一個(gè)非?；镜?code>Person類，它將人的姓名打印到控制臺(tái)中。之後，您學(xué)習(xí)了private關(guān)鍵字，該關(guān)鍵字可用於防止在程序的任意點(diǎn)訪問(wèn)類的成員。

最後，您學(xué)習(xí)瞭如何使用繼承基類在代碼中擴(kuò)展不同的類。您可以在官方文檔中了解更多關(guān)於類的信息。

以上是初學(xué)者的打字稿，第4部分：課程的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！