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 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 object of a class

const in Angular and typescript

Declared public const member variable in Angular component

export class AppComponent {
public static const 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 readonly modifier field instead of const,

These readonly can be reassigned unlike const keyword

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

How do declare static const in Angular and typescript

As const field does not declared 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
• Value of a static variable can be changed

const variable

• const keyword is used to define the variables for constants
• It is assigned with 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"]
};