Complete Typescript Class constants tutorials

TypeScript Static Readonly Constants: Learn How to Declare Constants in TypeScript Classes and Constructors.

Constants in TypeScript are readonly values that cannot be changed once assigned a value. While in many programming languages like Java, constants are typically declared as class member variables, TypeScript does not directly support class-level constants.

You can also check Typescript final keyword

#Class Properties Constants in TypeScript

Constants are fixed values that cannot be changed once assigned a value. In any programming language, such as Java, these are declared in class-like member variables.

But typescript does not allow class-level constants.

What will happen if the class declares constants member variables?

class Employee {
  defaultValue = 10;

  calculate() {
    console.log(this.defaultValue);
  }
}

The line constant declaration in the above class throws a compile error A class member cannot have the ‘const’. Declaring member constants in typescript class declarations can be done in many ways.

• readonly keyword
• static with readonly properties

#TypeScript Readonly Property Constants

The readonly keyword was introduced in TypeScript version 2.0. Readonly properties, once assigned a value, cannot be modified.

Important points

• readonly properties are not modified once the value is assigned.
• One way is to declare and assign with value in readonly properties
• another way is readonly properties can be declared at class level and assigned with value in constructor only.
• Assigning readonly properties outside the constructor is not allowed

The same class can be rewritten with the readonly property keyword

readonly properties are assigned with value when the property is declared as follows

class Employee {
  readonly defaultValue = 10;

  calculate() {
    console.log(this.defaultValue);
    this.defaultValue = 40; // gives compilation error
    console.log(this.defaultValue);
  }
}

readonly properties make properties initialized and act as constants.

Attempting to assign a new value to defaultValue will result in an error: Cannot assign to 'defaultValue' because it is a read-only property.

Alternatively, you can initialize readonly properties in the constructor.

class Employee {
  readonly defaultValue: number;
  constructor(value: number) {
    this.defaultValue = value;
  }
  calculate() {
    console.log(this.defaultValue);
  }
}
let emp = new Employee(123);
emp.calculate();

#Static Readonly Property Constants

The static keyword in TypeScript allows you to declare and assign values at the class level. When combined with readonly, it creates true constants.

class Employee {
  static readonly defaultValue: number;
  constructor(value: number) {
    Employee.defaultValue = value; // gives compilation error
  }
  calculate() {
    console.log(Employee.defaultValue);
  }
}

let emp = new Employee(123);
emp.calculate();

Attempting to assign a value to defaultValue in the constructor or elsewhere will result in a compilation error.

Static with readonly property declaration is equal to real constants.

#Conclusion

In conclusion, you’ve learned how to declare class-level constants in TypeScript using readonly properties and static readonly properties, mimicking true constants in TypeScript.