{

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"],
};
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.