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 object 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() {}
}

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