How to declare static constants in Typescript and Angular

How to declare static constants in Typescript and Angular

In this blog post, We are going to cover the following things.

  • A static keyword in typescript.
  • const in angular.
  • How to define public static constants in typescript and angular
  • the difference between static and const keywords in typescript and javascript

Static in typescript

Like any other object-oriented programming, Typescript has objected and classes

Objects contain instance member variables and functions which can be accessed using the object. A class contains static member variables and functions which can be accessed using the class.

Here is an example of class static and instance variables

class User {
  static defaultRole: string = "employee";
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  getName() {
    return name;
  }
}

User.defaultRole; // returns employee

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

In the above class defaultRole is a static that belongs to a class name is an instance of a class that belongs to the object of a class

const in Angular and typescript

Declared public const member variable in Angular component

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

Does this code works?

No, It will not work and gives a compilation error A class member cannot have the ‘const’ keyword

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

Then how do you replace const with another?

Typescript provides a readonly modifier field instead of const,

These readonly can be reassigned unlike the const keyword

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

How do declare static const in Angular and typescript

As the const field does not declare in a class instance variable

In a class, you can declare public static readonly for static constants.

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

Once the class is declared, You can import using the import

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 a variable declaration

  • static variable and functions

  • Static variable is a class variable that is shared by all objects of a class

  • Static functions also declared can access static variables only

  • It can be accessed using class only

  • Static classes can also be used

  • The value of a static variable can be changed

  • const variable

  • const keyword is used to define the variables for constants

  • It is assigned a fixed value and can not be changed

  • Variables for constant can be normal types, objects, and arrays

  • const variables can be declared/reassigned in different local or block scope

export const constants = {
  WEEK_NAMES: [
    "SUNDAY",
    "MONDAY",
    "TUESDAY",
    "WEDNESDAY",
    "THURSDAY",
    "FRIDAY",
    "SATURDAY",
  ],
  MONTH_NAMES: ["JAN", "FEB", "MAR"],
};