How to declare static constants in Typescript and Angular

In this blog post, we will cover the following topics,

  • The static keyword in TypeScript.
  • const in Angular.
  • How to define public static constants in TypeScript and Angular.
  • The difference between the static and const keywords in TypeScript and JavaScript.

Static in typescript

Like in any other object-oriented programming language, TypeScript features objected and classes.

Objects contain instance member variables and functions that can be accessed using the object itself. On the other hand, a class contains static member variables and functions that can be accessed using the class itself.

Here’s an example about static and instance variables within a class.

class User {
  static defaultRole: string = "employee";
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

User.defaultRole; // returns 'employee'

let myUser = new User("John");
myUser.name; // returns 'John'

In the above class, defaultRole is a static variable belonging to the class, while name is an instance variable belonging to objects of the class.

const in Angular and TypeScript

Let’s consider declaring a public const member variable in an Angular component.

export class AppComponent {
  public static text: string;

  constructor() {}
}

Does this code work?

No, it will not work and will give a compilation error: A class member cannot have the 'const' keyword.

Class members are mutable and can be modified and accessed by different calls and objects.

So, how do you replace const?

TypeScript provides a readonly modifier instead of const. readonly variables can be reassigned, unlike const` variables.

export class AppComponent {
  public text: string;
  constructor() {}
}

How to Declare Static Constants in Angular and TypeScript

As const fields cannot be declared as instance variables within a class, you can declare public static readonly fields for static constants.

class Employee {
  static readonly staticVariable = "staticdata";
  readonly instanceVariable = "instanceData";
}

Once the class is declared, you can import it using the import statement:

import { Employee } from "./Employee";
console.log(Employee.staticVariable);
console.log(new Employee().instanceVariable);

Difference Between static and const in JavaScript and TypeScript

Both static and const are used in variable declarations.

  • Static Variables and Functions:

    • A static variable is a class variable shared by all objects of a class.
    • Static functions, when declared, can access static variables only.
    • They can be accessed using the class itself.
    • Static classes can also be used.
    • The value of a static variable can be changed.
  • const Variables:

    • The const keyword is used to define variables for constants.
    • It is assigned a fixed value and cannot be changed.
    • Constants can be of normal types, objects, and arrays.
    • const variables can be declared/reassigned in different local or block scopes.
export const constants = {
  WEEK_NAMES: [
    "SUNDAY",
    "MONDAY",
    "TUESDAY",
    "WEDNESDAY",
    "THURSDAY",
    "FRIDAY",
    "SATURDAY",
  ],
  MONTH_NAMES: ["JAN", "FEB", "MAR"],
};