How to declare static constants in Typescript and Angular
- Admin
- Sep 20, 2023
- Typescript 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 objected 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() {}
}
Does 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"],
};