初學者的打字稿，第4部分：課程-js教程-PHP中文網

初學者的打字稿，第4部分：課程

William Shakespeare

發布： 2025-03-16 09:49:08

原創

869 人瀏覽過

TypeScript for Beginners, Part 4: Classes

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

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

創建您的第一個類

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

您可能已經註意到，構造函數類似於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());

登入後複製

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

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