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

Question

为 typescript angular 组件声明常量变量时的最佳做法是什么？

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

第一种方法，它在 class 之前或在单独的打字稿文件中以大写字母声明一个全局常量变量。但是，我不太喜欢通过 class 组件使用大写字母表示的几个全局常量变量。

const STAGE_1: string = 'stage1';

STAGE_1

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

export enum Stage {
  Stage1 = 'stage1',
}

Stage.Stage1

我最近一直在使用第二种方法，正如我在打字稿手册中看到的那样。但是，我在其他语言中看到了第一种方法，例如 java and go.

有什么建议或扩充吗？

Answer 1

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

类型

允许您指定一个仅限于给定值的类型。由于它们不生成任何代码，因此它们实际上就像存在于编译时但不存在于运行时的枚举。当您处理 return 预定义值的 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"]

常数

允许您定义一个新的常量（只读）变量。当您想避免诸如“魔法值”（reader 不知道其目的，但在您的代码中有某种含义的值）时，这很有用，这意味着您可以更好地解释您的代码在做什么。此外，它支持 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!

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

constant variables vs enum type in Angular using Typescript

variables

enums

constants

typescript

angular

类型

枚举

常数