使用 Typescript 的 Angular 中的常量变量与枚举类型

Question

为打字稿角度分量声明常量变量时的最佳实践是什么？

这两种方式我都用过，但我想知道哪一种更好。

第一种方法，它在类之前或在单独的打字稿文件中以大写字母声明全局常量变量。然而，我真的不喜欢当我通过类组件有几个大写字母的全局常量变量时。

const STAGE_1: string = 'stage1';

STAGE_1

第二种方法，它在打字稿文件中创建一个枚举，并将其导入到组件中。

export enum Stage {
  Stage1 = 'stage1',
}

Stage.Stage1

我最近一直在使用第二种方法，正如我在打字稿手册中看到的那样。然而，我在 java 和 go 等其他语言中看到了第一种方法。

有什么建议或放大吗？

Answer 1

实际上有三种不同的方法：

类型

允许您指定仅限于给定值的类型。由于它们不生成任何代码，因此它们实际上就像存在于编译时但不存在于运行时的枚举。当您处理返回预定义值的 REST API 时，它们非常有用；例如：

type Stage = "stage1" | "stage2";

function fnByType(value: Stage) {
}

fnByType("stage1"); // OK
fnByType("stage2"); // OK
fnByType("stage3"); // Not assignable!

枚举

允许您指定仅限于给定值的枚举。它们确实生成代码，因此存在于编译时和运行时。因为它们在运行时存在，所以您可以枚举它们的所有键和值；例如：

enum Stage {
    Stage1 = "stage1",
    Stage2 = "stage2"
}

function fnByEnum(value: Stage) {
}

fnByEnum(Stage.Stage1); // OK
fnByEnum(Stage.Stage2); // OK
fnByEnum("stage1") // Not assignable!
fnByEnum("stage3") // Not assignable!

console.log(Object.keys(Stage)); // ["Stage1", "Stage2"]
console.log(Object.values(Stage)); // ["stage1", "stage2"] 

常量

允许您定义新的常量（只读）变量。当您想要避免“魔法值”（读者实际上不知道其用途，但在代码中有意义的值）之类的东西时，这非常有用，这意味着您可以更好地解释代码在做什么。此外，它支持 DRY（不要重复自己）原则，因为您可以引用 const 值，而不是在代码中重复“神奇值”。最后，这意味着如果您需要更新 const 值，则不必在代码中查找该值的所有实例；您只需更新一次；例如：

const STAGE1: string = "stage1";
const STAGE2: string = "stage2";

function fnByString(value: string) {
}

fnByString(STAGE1); // OK
fnByString(STAGE2); // OK
fnByString("stage3"); // OK...but re-read the benefits of NOT using "magic values"

您可以互换使用这三个概念，并相互补充；例如：

type Stage = "stage1" | "stage2";

const STAGE1: string = "stage1";
const STAGE2: string = "stage2";

function fnByType(value: Stage) {
}

fnByType(STAGE1); // OK
fnByType(STAGE2); // OK
fnByType("stage3"); // Not assignable!

最后，一些值得深思的地方。如果您可以定义 const 值，然后使用它们来定义预定义值的类型，那就太好了，但据我所知，以下情况（尚）是不可能的：

const STAGE1: string = "stage1";
const STAGE2: string = "stage2";

type Stage = STAGE1 | STAGE2;

function fnByType(value: Stage) {
}

fnByType(STAGE1); // OK
fnByType(STAGE2); // OK
fnByType("stage3"); // Not assignable!

Answer 2

同时使用类型和枚举

你好，这篇文章只是为了强调在 typescript 中使用 types 和 enums

的更有用的技术

class __EntityNames {
  readonly User = 'User';
  readonly Role = 'Role';
  readonly Permission = 'Permission';

  private constructor() {
    // Private constructor
  }

  static instance() {
    return new __EntityNames();
  }
}


/**
 * EntityNames as enum
 */
export const EntityNames = __EntityNames.get();



/**
 * EntityNames as type
 */
export type EntityName = keyof __EntityNames;

让我们在代码中使用它

/**
 * Shows type error! And supports autocomplete
 */
const value: EntityName = 'Action';

const enumValue:EntityNames = EntityNames.User