How to implement class constants in TypeScript?

Classes are the templates of variables and methods that follow the inheritance model for the creation of an object. The method, properties, or variables declared in the class may be dynamic(can be modified) or static(constant). If the properties or variables of a class are declared as constant, then the whole class is considered as a constant class. It is mostly used in the condition when the user does not want to extend their class with any other class.

This post demonstrates all possible methods to implement class constants in TypeScript with the following guidelines:

Method 1: Using the “readonly” Utility Type
Method 2: Using the “static” Keyword with “readonly” Type

Let’s start with the first “readonly” Utility Type method.

Method 1: Implement Class Constants in TypeScript Using the “readonly” Utility Type

TypeScript “Readonly” utility type that makes a field/property read-only whose value cannot be changed once it is initialized. If the user changes the read-only property value, then the compiler throws an error that cannot assign to “property-name” because it is a read-only property.

Here it is used to make a class constant by making all its properties constant by specifying the “readonly” keyword with them:

class Employee {
readonly emp_name: string = "Mia";
readonly emp_post: string= "Receptionist";
showData() : void{
console.log(this.emp_name);
console.log(this.emp_post);
}
}
let emp = new Employee();
emp.showData();

In the above code lines:

The “class” named “Employee” is declared that contains two fields of type “string”. These fields are made constant by specifying the “readonly” utility type at their beginnings. After it, these fields cannot assign to the constructor of this class.
Next, define a function named “showData()” that returns “void”.
Inside this function, the “log()” method is applied to display the specified fields of the class.
Lastly, the “new” keyword creates the instance/object of the “Employee” class.
After that, the “showData()” function is called, defined in the “Employee” class using its instance “emp”.

Use the below given commands to compile the “.ts” file and to run the automatically generated “.js” file:

tsc main.ts //Compile .ts File
node main.js //Run .js File

The file name in the above-provided command can be changed according to your file name.

Output

The terminal shows the specified properties of the “Employee” class.

Method 2: Using the “static” Keyword with “readonly” Type

The “static” is another keyword that makes the property of the class, interface, and type constant without creating its instance. This keyword remains the property constant that cannot be assignable to the constructor.

Here in this scenario, it is used with the “readonly” type to make the class constants:

class Employee {
static readonly emp_name: string = "Mia";
static readonly emp_post: string= "Receptionist";
static showData() : void{
console.log(Employee.emp_name);
console.log(Employee.emp_post);
}
}
Employee.showData();

In the given lines of code:

The “static” with “readonly” utility type makes the specified class properties constant.
Next, it also declares the “showData()” function constant that does not allow the use of the specified constant properties inside or outside the constructor. It displays their values directly on the web console without calling any instance.
After that invoke the “showData()” function defined in the “Employee” class.

Output

The output is identical to the “readonly” utility type method. That is all about implementing class constants in TypeScrip.

Conclusion

TypeScript offers the “readonly” utility type and the “static” keyword to implement or declare the class constant. Both approaches are simple and easy to use but the “static” with “readonly” property is considered the simplest method. This is because it directly displays the property value in the browser console instead of creating the class instance. This post practically demonstrated all possible methods for implementing the class constants in TypeScript.

How to implement class constants in TypeScript?

Method 1: Implement Class Constants in TypeScript Using the “readonly” Utility Type

Method 2: Using the “static” Keyword with “readonly” Type

Conclusion

About the author

Areej Nadeem