简单聊下enum(枚举)

当你需要定义一些固定值的集合的场景时,你通常都是如何考虑的?例如对于一个订单状态集合,未支付、支付成功、支付失败、已取消、已发货、已签收、已退款,对应的数字分别是:1、2、3、4、5、6、7。

type字面量联合类型

你会选择定义一个单纯的类型,简洁直观,无运行开销吗?

typescript 复制代码
type OrderStatus = 1 | 2 | 3 | 4 | 5 | 6 | 7

但这并非理想方案。它本质是类型约束,而非 "集合"------ 无法通过 "键"(如 "未支付")访问对应的值(1),必须手动写数字或字符串,即使 TypeScript 会校验,仍存在拼写或记错值的风险。

普通对象

最初我使用普通对象去满足这项要求:

typescript 复制代码
const OrderStatus = {
  UNPAID: 1,
  PAID_SUCCESS: 2,
  PAID_FAILED: 3,
  CANCELLED: 4,
  SHIPPED: 5,
  SIGNED: 6,
  REFUNDED: 7,
}

可以直接通过"键"访问值,例如OrderStatus.UNPAID,这是我想要的。 但是这种方式也有一些不直观的地方,类型松散,TS会自动推断该对象的类型为{ UNPAID: number, PAID_SUCCESS: number, PAID_FAILED: number, CANCELLED: number, SHIPPED: number, SIGNED: number, REFUNDED: number },这显然不是我想要的。

另外,虽然枚举类型规定了1-7,但是我直接赋值其他number类型数字,也是没啥问题的,TS也不会报错。

当然这个也有解决方式,就是使用as const断言,将对象的所有属性都变成只读的字面量类型。

typescript 复制代码
const OrderStatus = {
  UNPAID: 1,
  PAID_SUCCESS: 2,
  PAID_FAILED: 3,
  CANCELLED: 4,
  SHIPPED: 5,
  SIGNED: 6,
  REFUNDED: 7,
} as const

这样,TS就会自动推断该对象的类型为{ readonly UNPAID: 1, readonly PAID_SUCCESS: 2, readonly PAID_FAILED: 3, readonly CANCELLED: 4, readonly SHIPPED: 5, readonly SIGNED: 6, readonly REFUNDED: 7 },这显然是我想要的。

兼具了普通对象的"键"访问值的便利性,同时也具备了枚举类型的"值"访问键的便利性。 但是它又不能当作类型去使用,需要手动使用typeof OrderStatus来提取它的联合类型。

typescript 复制代码
type OrderStatusT = typeof OrderStatus[keyof typeof OrderStatus]

所以要兼具普通对象的"键"访问值的便利性,同时也具备了枚举类型的"值"访问键的便利性,以及使用联合类型。那么只能另辟蹊径了。

enum

最后可以选择使用枚举类型去满足:

typescript 复制代码
enum OrderStatus {
  UNPAID = 1,
  PAID_SUCCESS = 2,
  PAID_FAILED = 3,
  CANCELLED = 4,
  SHIPPED = 5,
  SIGNED = 6,
  REFUNDED = 7,
}

如图所示,优势不言而喻了。

相关推荐
烬羽3 小时前
NestJS 依赖注入:Controller 里那个没有 new 的 service,到底从哪来的?
设计模式·typescript·nestjs
渣波4 小时前
NestJS 企业级后端架构实战:从核心代码到工程化思维的深度重构
前端·typescript·nestjs
嘟嘟07174 小时前
NestJS 入门:从 NestFactory 入口到 Module/Controller/Service 模块化结构一次讲清
typescript·node.js·nestjs
用户9385156350715 小时前
实战 Todo CRUD —— 从路由到异常,手写一个完整模块
后端·typescript·nestjs
不知疲倦的老鸟21 小时前
Next.js 15 多语言站点的 6 个坑:从 query string 路由到 URL 路径
typescript·next.js
北墨NoLimit21 小时前
鸿蒙线程间通信怎么选:TaskPool、TaskGroup、LongTask 与 Worker 实战
typescript·harmonyos
Orange_sparkle1 天前
从五个 TypeScript 文件看懂 Coding Agent:一次 nano-pi 学习复盘
javascript·学习·typescript
深海鱼在掘金2 天前
深入浅出RAG——第7章:基础篇实战:文档问答机器人
人工智能·typescript·命令行
苏灿烤鱼2 天前
Cursor 官方插件仓,许可证未声明
typescript·agent·cursor
濮水大叔2 天前
CabloyJS 强大之处不仅仅是 IoC,而是全栈资源的寻址体系
typescript·node.js·全栈