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.
classclassName{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.
classCircle{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(){functionCircle(){}
Circle.pi =3.14159;// Static property to hold the value of Pireturn Circle;}());console.log("The value of the PI is: "+ Circle.pi);</code></pre>
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.
classStudent{static studentCount:number=0;// Static variable to store the count of studentsconstructor(public name:string,public age:number){this.name = name;this.age = age;
Student.studentCount++;// Incrementing the count of students}// Method to display the student detailsdisplay(){console.log(Name: ${this.name}, Age: ${this.age});}}// Creating objects of Student classlet student1 =newStudent('John',20);let student2 =newStudent('Doe',21);// Accessing static variableconsole.log("Total number of registered students is: "+ Student.studentCount);// Output: 2</code></pre>
On compiling, it will generate the following JavaScript code.
classStudent{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 detailsdisplay(){console.log(Name: ${this.name}, Age: ${this.age});}}
Student.studentCount =0;// Static variable to store the count of students// Creating objects of Student classlet student1 =newStudent('John',20);let student2 =newStudent('Doe',21);// Accessing static variableconsole.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.
classClass_name{staticmethod_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.
classSquare{// Define a static methodstaticarea(side:number){return side * side;// return the area of the square}}// call the static methodlet 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.
classSquare{// Define a static methodstaticarea(side){return side * side;// return the area of the square}}// call the static methodlet 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.
classStudent{privatestatic studentCount:number=0;// Static variable to store the count of studentsconstructor(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 studentsstaticgetStudentCount(){return Student.studentCount;}}// Creating objects of Student classlet student1 =newStudent('John',20);let student2 =newStudent('Doe',21);// Accessing static variableconsole.log("Total number of registered students is: "+ Student.getStudentCount());// Output: 2</code></pre>
On compiling, it will generate the following JavaScript code.
classStudent{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 studentsstaticgetStudentCount(){return Student.studentCount;}}
Student.studentCount =0;// Static variable to store the count of students// Creating objects of Student classlet student1 =newStudent('John',20);let student2 =newStudent('Doe',21);// Accessing static variableconsole.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.
