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

在实时开发中，静态属性可用于存储应用程序版本、特定设置等值，因为它们保持不变。简而言之，您可以使用静态属性来存储常量值。此外，当方法的代码不依赖于任何实例属性时，您可以使用静态方法。

打印页面