TypeScript - Static Methods and Properties

---

---

In TypeScript, static properties belong to the class itself, instead of the instances of the class. The static methods and properties can be accessed without using the instance of the classes. This means you do not need to create an object of the class to use these methods and properties.

There are two types of properties and methods in TypeScript. One is instance properties and methods and another one is static properties and methods. Here, you will learn about static properties and methods.

Static properties and methods are useful to create utility functions and constants that don't change across different instances. For example, if you are creating the circle class, and want to define the 'PI' property inside the class, you can make it static as it is a constant.

Static Properties

We can use the 'static' keyword before the property name to define static properties.

Syntax

You can follow the syntax below to define the static properties in TypeScript classes.

class className {
    static property_name: data_type = value; 
}

In the above syntax, we have used the 'static' keyword before the property name to define the static property.

To access the static property, we can use the class name followed by a dot followed by the static property name as shown below.

className.property_name;

Example

In the code below, we have created the 'circle' class. The class contains the 'pi' static property, which has a constant value.

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);

On compiling, it will generate the following JavaScript code.

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);

Output

The output of the above generated JavaScript code is as follows −

The value of the PI is: 3.14159

Example

In the code below, we have defined the 'student' class. It contains the static property named 'studentCount' to store the total number of students.

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

On compiling, it will generate the following JavaScript code.

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

Output

The output of the above generated JavaScript code is as follows −

Total number of registered students is: 2

Static Methods

You can use the 'static' keyword before the method name to declare the static method.

Syntax

You can follow the syntax below to define the static methods in TypeScript classes.

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

In the above syntax, the method_name method is a static method, which can take multiple parameters and return a value.

You can call the static method by accessing it using the class name as shown in the code below.

Class_name.method_name();

Example

In the code below, the 'square' class contains the 'area()' static method, which gets the value of the square side as a parameter and returns the area of the square.

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

On compiling, it will generate the following JavaScript code.

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

Output

The output of the above generated JavaScript code is as follows −

Area of the square: 25

Example

The below example is very similar to the second example covered in this lesson. It has a private static member named 'studentCount' to store the total number of students.

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

On compiling, it will generate the following JavaScript code.

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

Output

The output of the above generated JavaScript code is as follows −

Total number of registered students is: 2

In real-time development, static properties can be used to store values like application version, particular settings, etc. as they remain constant. In short, you can use static properties to store constant values. Furthermore, you can use static methods when the code of the method is not dependent on any instance property.