🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正/微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付

🎉 enum-plus 發布新版本了!

enum-plus v3.0 已經發布了!

這是一個重大的里程碑版本升級,帶來了許多令人興奮的功能和改進,同時也包含了一些破壞性變更,完整文檔請看 👉 這裡。 如果你認為這個項目有幫助,請在 GitHub 上給它添加一個 ⭐️星標

新功能

  • 🔥 簡化枚舉初始化,不再需要 as const 斷言。
// 之前
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 快速訪問某個枚舉項。
// 以前
const monday = WeekEnum.items.find(item => item.value === 1);
// 現在
const monday = WeekEnum.named.Monday;
  • 🔥 新增 enum.meta 對象,聚合枚舉中定義的所有自定義字段,鍵為字段名,值為各字段的原始值。這樣可以在不遍歷枚舉項的情況下訪問自定義字段。
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 獲取舊行為。
WeekEnum.values; // [1, 2, 3, 4, 5, 6, 7]
  • 🔥 新增 enum.labels 屬性,返回成員標籤的只讀陣列。
WeekEnum.labels; // ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
  • 🔥 新增 enum.toList 方法,作為 toSelecttoMenutoFilter 的替代品。後者已經被移出核心庫,作為插件提供。
WeekEnum.toList();
// [
//   { value: 1, label: '星期一' },
//   { value: 2, label: '星期二' },
//   ...
]
WeekEnum.toList({ valueField: 'id', labelField: 'name' });
// [
//   { id: 1, name: '星期一' },
//   { id: 2, name: '星期二' },
//   ...
// ]
  • 🔥 新增 enum.toMap 方法,作為 enum.toValueMap 的替代品。
WeekEnum.toMap();
// {
//   "1": '星期一',
//   "2": '星期二',
//   ...
// }
WeekEnum.toMap({ keySelector: 'key', valueSelector: 'value' });
// {
//   "Monday": 1,
//   "Tuesday": 2,
//   ...
// }
  • 新增 Enum.isEnum 方法,用於檢查一個對象是否是 Enum 的實例。
Enum.isEnum(WeekEnum); // true
  • 🔥 新增 enum.findBy 方法,允許通過內置字段和自定義 meta 字段(即自定義字段)搜索枚舉項。
WeekEnum.findBy('value', 1); // { key: 'Monday', value: 1, label: '星期一' }
WeekEnum.findBy('key', 'Monday'); // { key: 'Monday', value: 1, label: '星期一' }
  • EnumCollectioninstanceof 檢查添加類型斷言。
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 方法,用於安裝插件。有關詳細信息,請查看 插件系統
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 文件無法被解析的問題。

原文出處:https://juejin.cn/post/7567581946143834163


精選技術文章翻譯,幫助開發者持續吸收新知。

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
🏆 本月排行榜
🥇
站長阿川
📝22   💬4   ❤️6
679
🥈
我愛JS
📝1   💬4   ❤️2
45
🥉
酷豪
1
#5
1
評分標準:發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次
🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正/微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付