TypeScript - 靜態方法和屬性

上一頁
下一頁

在 TypeScript 中，靜態屬性屬於類本身，而不是類的例項。靜態方法和屬性可以在不使用類例項的情況下訪問。這意味著您不需要建立類的物件來使用這些方法和屬性。

TypeScript 中有兩種型別的屬性和方法。一種是例項屬性和方法，另一種是靜態屬性和方法。在這裡，您將學習有關靜態屬性和方法的知識。

靜態屬性和方法可用於建立實用程式函式和常量，這些函式和常量在不同例項之間不會發生變化。例如，如果您正在建立圓形類，並且想要在類中定義“PI”屬性，則可以將其設為靜態，因為它是一個常量。

靜態屬性

我們可以在屬性名稱之前使用“static”關鍵字來定義靜態屬性。

語法

您可以按照以下語法在 TypeScript 類中定義靜態屬性。

class className {
    static property_name: data_type = value; 
}

在上述語法中，我們在屬性名稱之前使用了“static”關鍵字來定義靜態屬性。

要訪問靜態屬性，我們可以使用類名後跟點號，再跟靜態屬性名稱，如下所示。

className.property_name;

示例

在下面的程式碼中，我們建立了“circle”類。該類包含“pi”靜態屬性，該屬性具有一個常數值。

class Circle {
    static pi: number = 3.14159; // Static property to hold the value of Pi
}
console.log("The value of the PI is: " + Circle.pi);

編譯後，它將生成以下 JavaScript 程式碼。

var Circle = /** @class */ (function () {
    function Circle() {
    }
    Circle.pi = 3.14159; // Static property to hold the value of Pi
    return Circle;
}());
console.log("The value of the PI is: " + Circle.pi);

輸出

上述生成的 JavaScript 程式碼的輸出如下所示：

The value of the PI is: 3.14159

示例

在下面的程式碼中，我們定義了“student”類。它包含名為“studentCount”的靜態屬性，用於儲存學生的總數。

class Student {
    static studentCount: number = 0; // Static variable to store the count of students

    constructor(public name: string, public age: number) {
        this.name = name;
        this.age = age;
        Student.studentCount++; // Incrementing the count of students
    }

    // Method to display the student details
    display() {
        console.log(`Name: ${this.name}, Age: ${this.age}`);
    }
}

// Creating objects of Student class
let student1 = new Student('John', 20);
let student2 = new Student('Doe', 21);

// Accessing static variable
console.log("Total number of registered students is: " + Student.studentCount); // Output: 2

編譯後，它將生成以下 JavaScript 程式碼。

class Student {
    constructor(name, age) {
        this.name = name;
        this.age = age;
        this.name = name;
        this.age = age;
        Student.studentCount++; // Incrementing the count of students
    }
    // Method to display the student details
    display() {
        console.log(`Name: ${this.name}, Age: ${this.age}`);
    }
}
Student.studentCount = 0; // Static variable to store the count of students
// Creating objects of Student class
let student1 = new Student('John', 20);
let student2 = new Student('Doe', 21);
// Accessing static variable
console.log("Total number of registered students is: " + Student.studentCount); // Output: 2

輸出

上述生成的 JavaScript 程式碼的輸出如下所示：

Total number of registered students is: 2

靜態方法

您可以在方法名稱之前使用“static”關鍵字來宣告靜態方法。

語法

您可以按照以下語法在 TypeScript 類中定義靜態方法。

class Class_name {
    static method_name(params) {
        // Code to be executed
    }
}

在上述語法中，method_name 方法是一個靜態方法，它可以接受多個引數並返回值。

您可以透過使用類名訪問靜態方法來呼叫它，如下面的程式碼所示。

Class_name.method_name();

示例

在下面的程式碼中，“square”類包含“area()”靜態方法，該方法獲取正方形邊的值作為引數並返回正方形的面積。

class Square {
    // Define a static method
    static area(side: number) {
        return side * side; // return the area of the square
    }
}

// call the static method
let area = Square.area(5);
console.log(`Area of the square: ${area}`); // Output: Area of the square: 25

編譯後，它將生成以下 JavaScript 程式碼。

class Square {
    // Define a static method
    static area(side) {
        return side * side; // return the area of the square
    }
}
// call the static method
let area = Square.area(5);
console.log(`Area of the square: ${area}`); // Output: Area of the square: 25

輸出

上述生成的 JavaScript 程式碼的輸出如下所示：

Area of the square: 25

示例

下面的示例與本課中介紹的第二個示例非常相似。它有一個名為“studentCount”的私有靜態成員，用於儲存學生的總數。

class Student {
    private static studentCount: number = 0; // Static variable to store the count of students

    constructor(public name: string, public age: number) {
        this.name = name;
        this.age = age;
        Student.studentCount++; // Incrementing the count of students
    }

    // Method to get the count of students
    static getStudentCount() {
        return Student.studentCount;
    }
}

// Creating objects of Student class
let student1 = new Student('John', 20);
let student2 = new Student('Doe', 21);

// Accessing static variable
console.log("Total number of registered students is: " + Student.getStudentCount()); // Output: 2

編譯後，它將生成以下 JavaScript 程式碼。

class Student {
    constructor(name, age) {
        this.name = name;
        this.age = age;
        this.name = name;
        this.age = age;
        Student.studentCount++; // Incrementing the count of students
    }
    // Method to get the count of students
    static getStudentCount() {
        return Student.studentCount;
    }
}
Student.studentCount = 0; // Static variable to store the count of students
// Creating objects of Student class
let student1 = new Student('John', 20);
let student2 = new Student('Doe', 21);
// Accessing static variable
console.log("Total number of registered students is: " + Student.getStudentCount()); // Output: 2

輸出

上述生成的 JavaScript 程式碼的輸出如下所示：

Total number of registered students is: 2

在即時開發中，靜態屬性可用於儲存應用程式版本、特定設定等值，因為它們保持不變。簡而言之，您可以使用靜態屬性來儲存常量值。此外，當方法的程式碼不依賴於任何例項屬性時，您可以使用靜態方法。

列印頁面
上一頁
下一頁
廣告