Angular基于TypeScript开发时全局常量与enum类型选用最佳实践

两种实现方式的适用场景差异 #

两种方式没有绝对的优劣，只对应不同的使用场景：

• 独立 const 常量：更适合单文件、极小范围复用的零散固定值，比如仅在当前组件内部使用、不会出现在其他组件或服务中的常量，这种场景下直接写 const 更轻便，没有额外的定义成本。如果担心组件内散落太多全大写常量，可以把同业务域的常量统一放到单独的常量文件比如 stage.const.ts 中批量导出，避免组件文件顶部冗余。
• enum 枚举：更适合同类型多值、跨文件复用的场景，比如业务阶段、状态码、类型标识这类本身属于同类别枚举值的场景，优势突出：
  • 类型约束更强，TS 可以自动完成类型校验，比如将函数参数定义为 Stage 类型时，只能传入枚举内定义的有效值，避免随意传字符串导致的隐性问题
  • 语义化更清晰，调用时 Stage.Stage1 可以直观看到值的业务归属，不会出现全大写常量散落在各处、难以溯源分类的问题
  • 后续迭代维护成本更低，新增、修改枚举值只需要调整定义处的代码，不需要全局替换散写的常量

Angular 开发场景下的推荐规则 #

• 仅当前组件使用、无复用需求的独立常量，直接在组件文件顶部写 const 即可，不需要强行套枚举，避免过度设计
• 同类型包含 2 个及以上值、或者需要跨组件/服务/管道复用的常量，优先使用 enum，统一放到对应业务模块的 enums/ 目录下单独维护
• 如果需要在 Angular 模板中使用枚举值，可以在组件类内声明一个只读属性做绑定，示例如下：

import { Stage } from './enums/stage.enum';

@Component({
  // 组件配置
})
export class DemoComponent {
  // 把枚举绑定到组件实例属性，模板即可直接调用
  readonly Stage = Stage;
}

模板中使用方式：

<div *ngIf="currentStage === Stage.Stage1">
  阶段1的内容
</div>

• 不建议在组件类内部定义枚举，统一放到独立的枚举文件中更方便全局复用

其他语言常用 const 写法的说明 #

Java、Go 等语言偏好全局常量写法是对应语言的使用习惯，TypeScript 原生提供了专门处理枚举值的 enum 语法糖，更贴合前端业务中大量状态、类型枚举的场景，不需要强行对齐其他语言的写法，优先贴合 TS 生态和 Angular 开发习惯即可。

内容的提问来源于stack exchange，提问作者grmnth