What is the meaning of square brackets in the enum declaration in typescript?

Question

I was going through a typescript file in an Angular ngrx project named as collection.ts and there, I saw the following enum constant being declared.

import { Action } from '@ngrx/store';
import { Book } from '../models/book';

export enum CollectionActionTypes {
  AddBook = '[Collection] Add Book',
  AddBookSuccess = '[Collection] Add Book Success',
  AddBookFail = '[Collection] Add Book Fail',
  RemoveBook = '[Collection] Remove Book',
  RemoveBookSuccess = '[Collection] Remove Book Success',
  RemoveBookFail = '[Collection] Remove Book Fail',
  Load = '[Collection] Load',
  LoadSuccess = '[Collection] Load Success',
  LoadFail = '[Collection] Load Fail',
}

/**
 * Add Book to Collection Actions
 */
export class AddBook implements Action {
  readonly type = CollectionActionTypes.AddBook;

  constructor(public payload: Book) {}
}

export class AddBookSuccess implements Action {
  readonly type = CollectionActionTypes.AddBookSuccess;

  constructor(public payload: Book) {}
}

export class AddBookFail implements Action {
  readonly type = CollectionActionTypes.AddBookFail;

  constructor(public payload: Book) {}
}

/**
 * Remove Book from Collection Actions
 */
export class RemoveBook implements Action {
  readonly type = CollectionActionTypes.RemoveBook;

  constructor(public payload: Book) {}
}

export class RemoveBookSuccess implements Action {
  readonly type = CollectionActionTypes.RemoveBookSuccess;

  constructor(public payload: Book) {}
}

export class RemoveBookFail implements Action {
  readonly type = CollectionActionTypes.RemoveBookFail;

  constructor(public payload: Book) {}
}

/**
 * Load Collection Actions
 */
export class Load implements Action {
  readonly type = CollectionActionTypes.Load;
}

export class LoadSuccess implements Action {
  readonly type = CollectionActionTypes.LoadSuccess;

  constructor(public payload: Book[]) {}
}

export class LoadFail implements Action {
  readonly type = CollectionActionTypes.LoadFail;

  constructor(public payload: any) {}
}

export type CollectionActions =
  | AddBook
  | AddBookSuccess
  | AddBookFail
  | RemoveBook
  | RemoveBookSuccess
  | RemoveBookFail
  | Load
  | LoadSuccess
  | LoadFail;

Providing a value to the enum constants is fine but I'm confused what does this [Collection] signify here as a part of each constant. Does writing like this have no effect on the value of the enum constant or does it show something else? Can anyone please explain?

Answer 1

You're probably using some flux/redux framework like ngrx store or similar. This enum defines actions and ensures your actions keys (which are strings) are unique on a global level since at the end, they all get merged into one big set of actions that reducers react to. To help meet that condition, you would usually put the type that actions are for at the begining of key in square brackets. Its just a naming convention not related to typescript in any way.

For example,

You could have entities Book and Category . For both of them you could have action with key Load Entity . To distinguish those 2 action keys, one convention is to put names like [Book] Load Entity and [Category] Load Entity .

Answer 2

As the brackets are within the value string, they have no intrinsic meaning as far as the enum or TypeScript is concerned. The bracketed values are simply a convention for that specific project - they could be parentheses or braces, it doesn't matter - they may or may not be utilized in some other fashion.

A similar syntax you may be thinking of or have seen would be a computed key, ex:

const propNam = 'test';
const obj = {[propName]: 2};
console.log(obj.test); // 2

However, these are not allowed in enum declarations. If you look at the compiled JavaScript from an enum declaration, it does use computed keys to achieve reverse mappings (as explained down this page ):

TypeScript:

enum Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"

JavaScript:

var Enum;
(function (Enum) {
    Enum[Enum["A"] = 0] = "A";
})(Enum || (Enum = {}));
var a = Enum.A;
var nameOfA = Enum[a]; // "A"

But this is very different from the usage of brackets in your case.