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"],
};