how to define static constants in typescript and angular

user_7302170 0
Viewed 53907

I have bunch of constants which are business related and I have to store them in Angular.Something like below

STUDENT_NAMES= ["JOHN","BOB","NICK"]
TEACHER_NAME = ["HARRY","CHRIS"]
 SCHOOL_CODE = [100,102,107];

I have a lot of them and they are kind of static ..I need them in most of my service classes. What is the best place to store them? Should i create a interface and let my service class inherit them? In java , we define a class of public static final constants and other classes uses them.Like this , what is the typescript way?

angular typescript static constants
5 Answers

Define an abstract class for your constants:

export abstract class Constants {
  static readonly STUDENT_NAMES: string[] = ["JOHN", "BOB", "NICK"];
  static readonly TEACHER_NAME: string[] = ["HARRY", "CHRIS"];
  static readonly SCHOOL_CODE: number[] = [100, 102, 107];
}

Then include this class whereever needed with import { Constants } from '...'; and use its values with const names: string[] = Constants.STUDENT_NAMES;

Regarding the naming I agree with @AdrianBrand to prefer names like studentNames, teacherNames and schoolCodes.

Edit: TypeScript 3.4 introduced so called const assertions, which might also be suited:

export const constants = {
  studentNames: ["JOHN", "BOB", "NICK"],
  ...
} as const;
user_24366550

You put them in a TypeScript file and import them where needed.

export const STUDENT_NAMES: string[] = ["JOHN","BOB","NICK"];

Put it in student-names.ts

import { STUDENT_NAMES } from './path/cosnstants/student-names';

where you need it.

Personally I would name them studentNames and not STUDENT_NAMES but that is a matter of taste.

user_16791260

You can create a TS file constants.ts that contains all your constants : 

export const constants = {
   STUDENT_NAMES: ["JOHN","BOB","NICK"],
   TEACHER_NAME: ["HARRY","CHRIS"],
   SCHOOL_CODE: [100,102,107]
};

Then whenever you need a constant you can call it like this code bellow:

let studentsNames : any = constants.STUDENT_NAMES;

Regards,

user_62152700

you could try enums, this will allow you to define a set of named constants. Refer to this document.

enum Constants {
    STUDENT_NAMES= ["JOHN","BOB","NICK"]
    TEACHER_NAME = ["HARRY","CHRIS"]
    SCHOOL_CODE = [100,102,107];
}
user_51922890

Add all your constants in environment.ts file - this is the best practice and there will be no change in the values basd on the environment specific

Add both in environment.ts and environment.prod.ts - this will be your global object and can be accessed at any level

Importing will be same as importing an interface or any class Thanks - Happy coding

user_83986300
Related