How to declare static constants in Typescript and Angular

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

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

Static in typescript

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

Objects contains instance member variables and functions which can be accessed using object 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 an static that belongs to class name is an instance of a class which belongs to object of an 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 works and gives compilation error A class member cannot have the ‘const’ keyword

As 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 is 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 class is declared, You can import using 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 variable declaration

static variable and functions

• Static variable is an class variable which is shared by all object 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 an static variable can be changed

const variable

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