打字稿中的枚举声明中的方括号是什么意思？

Question

我正在浏览一个名为collection.ts的Angular ngrx项目中的一个打字稿文件，在那儿，我看到声明了以下枚举常量。

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;

为枚举常量提供一个值很好，但是我很困惑这个[Collection]在这里表示每个常量的一部分。 这样写对枚举常量的值没有影响还是显示了其他内容？ 谁能解释一下？

Answer 1

您可能正在使用某些ngrx store类似的flux / redux框架。 这个枚举定义了动作，并确保您的动作键（字符串）在全局级别上是唯一的，因为最后，它们全部合并为减速器做出反应的一大套动作。 为帮助满足该条件，通常将操作所要使用的类型放在方括号中键的开头。 它只是一个命名约定，与打字稿完全无关。

例如，

您可以拥有实体Book和Category 。 对于它们两者，您都可以使用键Load Entity 。 为了区分这两个操作键，一种约定是放置诸如[Book] Load Entity和[Category] Load Entity 。

Answer 2

由于方括号位于值字符串中，因此就enum或TypeScript而言，它们没有任何内在含义。 括起来的值只是该特定项目的约定-可以是括号或大括号，没关系-可以或可以不以其他方式使用它们。

您可能正在考虑或已经看到的类似语法将是计算键，例如：

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

但是，这些在enum声明中是不允许的。 如果您从enum声明中查看已编译的JavaScript，则它确实使用计算键来实现反向映射（如本页面所述 ）：

打字稿：

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"

但这与您所使用的方括号的用法非常不同。