🎉 enum-plus 发布新版本了!

🎉 enum-plus v3.0 已经发布了!

这是一个重大的里程碑版本升级,带来了很多令人兴奋的功能和改进,同时也包含了一些破坏性变更。请仔细阅读以下内容,以了解新版本的变化以及如何升级你的项目。请点击这里查看完整的API文档,如果你认为这个项目有帮助,请在 GitHub 上给它一个 ⭐️星标

新功能

  • 🔥 简化枚举初始化,不再需要 as const 断言。
ts 复制代码
// 之前
const WeekEnum = Enum({
  Monday: { value: 1, label: '星期一' },
  Tuesday: { value: 2, label: '星期二' },
} as const);

// 现在
const WeekEnum = Enum({
  Monday: { value: 1, label: '星期一' },
  Tuesday: { value: 2, label: '星期二' },
});
  • 🔥 新增 enum.named 属性,聚合所有枚举项,方便通过 enum.named.XXX 快速访问某个枚举项。
js 复制代码
// 以前
const monday = WeekEnum.items.find(item => item.value === 1);
// 现在
const monday = WeekEnum.named.Monday;
  • 🔥 新增 enum.meta 对象,聚合枚举中定义的所有自定义字段,键为字段名,值为各字段的原始值。这样可以在不遍历枚举项的情况下访问自定义字段。
js 复制代码
const ColorEnum = Enum({
  Red: { value: 1, label: 'Red', hex: '#FF0000' },
  Green: { value: 2, label: 'Green', hex: '#00FF00' },
  Blue: { value: 3, label: 'Blue', hex: '#0000FF' },
});
ColorEnum.meta.hex; // ['#FF0000', '#00FF00', '#0000FF']
  • 🔥 修改 enum.values 的行为,现在它返回成员原始值的数组。请使用 enum.items 获取旧行为。
js 复制代码
WeekEnum.values; // [1, 2, 3, 4, 5, 6, 7]
  • 🔥 新增 enum.labels 属性,返回成员标签的只读数组。
js 复制代码
WeekEnum.labels; // ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
  • 🔥 新增 enum.toList 方法,作为 toSelecttoMenutoFilter 的替代品。后者已经被移出核心库,作为插件提供。
js 复制代码
WeekEnum.toList();
// [
//   { value: 1, label: '星期一' },
//   { value: 2, label: '星期二' },
//   ...
// ]
WeekEnum.toList({ valueField: 'id', labelField: 'name' });
// [
//   { id: 1, name: '星期一' },
//   { id: 2, name: '星期二' },
//   ...
// ]
  • 🔥 新增 enum.toMap 方法,作为 enum.toValueMap 的替代品。
js 复制代码
WeekEnum.toMap();
// {
//   "1": '星期一',
//   "2": '星期二',
//   ...
// }
WeekEnum.toMap({ keySelector: 'key', valueSelector: 'value' });
// {
//   "Monday": 1,
//   "Tuesday": 2,
//   ...
// }
  • 新增 Enum.isEnum 方法,用于检查一个对象是否是 Enum 的实例。
js 复制代码
Enum.isEnum(WeekEnum); // true
  • 🔥 新增 enum.findBy 方法,允许通过内置字段和自定义 meta 字段(即自定义字段)搜索枚举项。
js 复制代码
WeekEnum.findBy('value', 1); // { key: 'Monday', value: 1, label: '星期一' }
WeekEnum.findBy('key', 'Monday'); // { key: 'Monday', value: 1, label: '星期一' }
  • EnumCollectioninstanceof 检查添加类型断言。
ts 复制代码
const value: typeof WeekEnum.valueType | string | { value: number; name: string };
if (value instanceof WeekEnum) {
  console.log(value); // 现在 value 的类型是: 0 | 1 | 2 | 3 | 4 | 5 | 6
}
  • 🔥 新增 Enum.install 方法,用于安装插件。有关详细信息,请查看 插件系统
ts 复制代码
Enum.install(plugin);
  • 🔥 Enum.extends 方法对应的类型定义方式发生了变化,详情请参考 迁移指南

  • 🔥 在 umd 文件夹中发布 UMD 格式的模块。

  • 支持多个 TypeScript 版本的平滑降级。对于 v5.0 及更高版本,允许在 Enum 初始化时省略 as const 断言。对于较早版本,将自动降级为较早的语法,需要手动添加 as const 断言。

全局配置

  • ✨ 引入 Enum.config 来管理所有枚举的全局配置。
    • Enum.config.autoLabel 用于启用/禁用通过指定标签前缀来自动生成枚举项的标签。
  • ✨ 添加 options.labelPrefix,用于在创建枚举时指定枚举项的标签前缀。
  • ✨ 添加 options.autoLabel,用于在创建枚举时启用/禁用自动标签生成。它会覆盖全局配置。
  • ✨ 允许扩展 EnumItemLabel 类型以支持智能感知。

内部变更

  • 移除 EnumItemClass 内部的 proxy,改用 getter。这是为了防止循环引用,以支持在微信小程序中使用 JSON.stringify

  • Jeste2e 测试重用一份测试代码。

  • 从代码库中移除 private member 语法,因为它无法被完全序列化。

  • 枚举项被修改的警告信息已被移除。

    为了避免枚举项内的循环引用(这会影响序列化),我们移除了内部的 proxy,改用 getter/setter。然而,这带来了另一个问题:在浏览器控制台或 node.js 中打印枚举项时,keyvaluelabel 无法显示它们的值,而是显示为 [Getter/Setter]。这在某种程度上影响了调试体验。

    @yyz945947732 最早引入了这个功能,但经过权衡,我们不得不移除掉这个特性。对此我感到抱歉。

插件系统

如果您搜索的插件不可用,或者您想开发自己的插件,请参阅 插件开发指南。 我们真诚地需要您的帮助,来丰富插件生态系统!

破坏性变更

  • 修改 enum.values 的行为,现在它返回成员原始值的数组。请使用 enum.items 获取旧行为。
  • 以下符号已被重命名,以更好地反映其用途:
    • ENUM_COLLECTION 变更为 IS_ENUM
    • ENUM_ITEM 变更为 IS_ENUM_ITEM
    • ENUM_ITEMS 变更为 IS_ENUM_ITEMS
  • enum.toSelect 被迁移到插件库,请安装 @enum-plus/plugin-antd
  • enum.toMenu 被迁移到插件库,请安装 @enum-plus/plugin-antd
  • enum.toFilter 被迁移到插件库,请安装 @enum-plus/plugin-antd
  • enum.toValueMap 被迁移到插件库,请安装 @enum-plus/plugin-antd
  • 移除已弃用的 enum.options
  • 移除已弃用的 enum.menus
  • 移除已弃用的 enum.filters
  • 移除已弃用的 enum.valuesEnum

Bug 修复

  • 修复 lib 目录下的 sourcemap 文件无法被解析的问题。
相关推荐
起风了___8 小时前
Flutter 多端音频控制台:基于 audio_service 实现 iOS、Android 锁屏与通知中心播放控制
前端·flutter
WYiQIU8 小时前
高级Web前端开发工程师2025年面试题总结及参考答案【含刷题资源库】
前端·vue.js·面试·职场和发展·前端框架·reactjs·飞书
WuWuII8 小时前
SSE服务端单向推送消息到前端
前端·推送
.又是新的一天.8 小时前
04-Fiddler详解+抓包定位问题
前端·测试工具·fiddler
克里斯蒂亚L8 小时前
OpenLayers - 画全国轨道线路图
前端
GISer_Jing8 小时前
小米前端面试
前端·面试·职场和发展
静西子8 小时前
Vue标签页切换时的异步更新问题
前端·javascript·vue.js
时间的情敌8 小时前
Vue 3.0 源码导读
前端·javascript·vue.js
自由日记8 小时前
css属性使用手册
前端·css·html