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





Related posts

How to convert json to/from  object in angular|Typescript 

What not to commit in Angular| Ignore files in git example

Angular ngFor index - How to get current last even and odd index?

How to Format array of dates in typescript Angular example

In this post, you learn writing comments in Angular and typescript. You can also write single multiline and documentation comments in Typescript. This includes declare comments in Angular typescript and template HTML components.

Typescript Singleton pattern Implementation with example

Learn Typescript compiler option,tsconfig.json file