打字稿中枚举声明中方括号的含义是什么?
What is the meaning of square brackets in the enum declaration in typescript?
我正在浏览名为 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]
在这里作为每个常量的一部分表示什么。像这样写对枚举常量的值没有影响还是它显示了其他东西?谁能解释一下?
您可能正在使用一些 flux/redux 框架,例如 ngrx store
或类似的框架。这个枚举定义了动作,并确保你的动作键(字符串)在全局范围内是唯一的,因为最后,它们都被合并到一个大的动作集合中,reducer 会对其做出反应。
为了帮助满足该条件,您通常会将操作所针对的类型放在方括号中的键的开头。它只是一个与打字稿无关的命名约定。
例如,
您可以有实体 Book
和 Category
。对于他们两个,您可以使用键 Load Entity
进行操作。为了区分这 2 个操作键,一种惯例是使用 [Book] Load Entity
和 [Category] Load Entity
.
这样的名称
由于方括号在值字符串中,就 enum
或 TypeScript 而言,它们没有内在含义。括号内的值只是该特定项目的约定 - 它们可以是圆括号或大括号,没关系 - 它们可能会或可能不会以其他方式使用。
您可能正在考虑或已经看到的类似语法是计算键,例如:
const propNam = 'test';
const obj = {[propName]: 2};
console.log(obj.test); // 2
但是,这些在 enum
声明中是不允许的。如果您从 enum
声明中查看已编译的 JavaScript,它确实使用计算键来实现反向映射(如 this page 所述):
打字稿:
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"
但这与您的案例中括号的用法有很大不同。
我正在浏览名为 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]
在这里作为每个常量的一部分表示什么。像这样写对枚举常量的值没有影响还是它显示了其他东西?谁能解释一下?
您可能正在使用一些 flux/redux 框架,例如 ngrx store
或类似的框架。这个枚举定义了动作,并确保你的动作键(字符串)在全局范围内是唯一的,因为最后,它们都被合并到一个大的动作集合中,reducer 会对其做出反应。
为了帮助满足该条件,您通常会将操作所针对的类型放在方括号中的键的开头。它只是一个与打字稿无关的命名约定。
例如,
您可以有实体 Book
和 Category
。对于他们两个,您可以使用键 Load Entity
进行操作。为了区分这 2 个操作键,一种惯例是使用 [Book] Load Entity
和 [Category] Load Entity
.
由于方括号在值字符串中,就 enum
或 TypeScript 而言,它们没有内在含义。括号内的值只是该特定项目的约定 - 它们可以是圆括号或大括号,没关系 - 它们可能会或可能不会以其他方式使用。
您可能正在考虑或已经看到的类似语法是计算键,例如:
const propNam = 'test';
const obj = {[propName]: 2};
console.log(obj.test); // 2
但是,这些在 enum
声明中是不允许的。如果您从 enum
声明中查看已编译的 JavaScript,它确实使用计算键来实现反向映射(如 this page 所述):
打字稿:
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"
但这与您的案例中括号的用法有很大不同。