新的枚举使用方式enum-plus

简介

enum-plus是一个增强版的枚举库，完全兼容ts中Enum的用法，同时支持扩展显示文本，生成符合UI框架组件的数据以及提供了丰富的扩展方式，是Enum的一个直接替代品。轻量级、零依赖、100%支持ts，适用于多种前端框架。

安装

使用npm安装

arduino 复制代码

npm install enum-plus

使用pnpm安装

csharp 复制代码

pnpm add enum-plus

使用yarn安装

csharp 复制代码

yarn add enum-plus

定义枚举

1、基本格式 number类型

php 复制代码

import { Enum } from 'enum-plus';

const WeekEnum = Enum({
  Sunday: 0,
  Monday: 1,
} as const);

WeekEnum.Monday; // 1

as const类型断言用于将枚举的值变成字面量类型，否则它们将会是 number 类型。但是如果你使用的是js，

2、基本格式 string类型

php 复制代码

import { Enum } from 'enum-plus';

const WeekEnum = Enum({
  Sunday: 'Sun',
  Monday: 'Mon',
} as const);

WeekEnum.Monday; // 'Mon'

3、标准格式（推荐）为每个枚举项定义 value枚举值 label显示文本字段，这是最常见的格式，也是最推荐的格式。方便在UI框架中快速使用和显示枚举。

php 复制代码

import { Enum } from 'enum-plus';

const WeekEnum = Enum({
  Sunday: { value: 0, label: '星期日' },
  Monday: { value: 1, label: '星期一' },
} as const);

WeekEnum.Sunday; // 0
WeekEnum.label(0); // 星期日
WeekEnum.label('Sunday'); // 星期日

4、只有label格式不定义value，那么key的值将作为value

php 复制代码

import { Enum } from 'enum-plus';

const WeekEnum = Enum({
  Sunday: { label: '星期日' },
  Monday: { label: '星期一' },
} as const);

WeekEnum.Sunday; // 'Sunday'
WeekEnum.label('Sunday'); // 星期日

5、数组格式数组格式在需要动态创建枚举值时非常有用，比如从接口获取的数据

ini 复制代码

import { Enum } from 'enum-plus';

const animals = [
    { value: 1, key: 'dog', label: '狗' },
    { value: 2, key: 'cat', label: '猫' },
    { value: 3, key: 'rabbit', label: '兔子' },
]
const Animals = Enum(animals);

Animals.dog; // 1
Animals.label('dog'); // 狗
Animals.label(2); // 猫

6、数组格式，字段名映射动态数据的格式很可能不是value、label、key而是其他字段名，这时你可以传入一个自定义选项，把这些映射到字段名上

php 复制代码

import { Enum } from 'enum-plus';

const animals = [
    { id: 1, code: 'dog', name: '狗' },
    { id: 2, code: 'cat', name: '猫' },
    { id: 3, code: 'rabbit', name: '兔子' },
]

const AnimalsEnum = Enum(animals, {
    getKey: 'code',
    getValue: 'id',
    getLabel: 'name',
})

Animals.dog; // 1
Animals.label('dog'); // 狗
Animals.label(2); // 猫

7、原生Enum格式如果你从未使用过enum-plus，你也可以用原有的枚举适配enum-plus

csharp 复制代码

import { Enum } from 'enum-plus';

enum init {
  Sunday = 0,
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
}
const WeekEnum = Enum(init);

WeekEnum.Sunday; // 0
WeekEnum.Monday; // 1
WeekEnum.Saturday; // 6
WeekEnum.label('Sunday'); // Sunday

API

1、获取枚举值直接和原生一样

arduino 复制代码

WeekEnum.Sunday; // 0
WeekEnum.Monday; // 1

2、items 获取一个包含所有枚举项的数组，可以方便遍历，并且符合antd组件的数据规范

css 复制代码

WeekEnum.items

{value, lable, key, raw}[]

[    {        "value": 1,        "label": "星期一",        "key": "Monday",        "raw": {            "value": 1,            "label": "星期一"        }    },    {        "value": 2,        "label": "星期二",        "key": "Tuesday",        "raw": {            "value": 2,            "label": "星期二"        }    }]

3、keys 获取包含所有枚举项key的数组

复制代码

WeekEnum.keys

4、label 获取枚举项的标签，也就是显示文本，传入的参数可以是value或者key label(keyOrValue: string | number): string | undefined

scss 复制代码

WeekEnum.label(1); // 星期一
WeekEnum.label('Monday'); // 星期一

5、根据枚举值获取key

perl 复制代码

WeekEnum.key(1); // 'Monday'

6、判断某个枚举项是否存在 has(keyOrValue: string | number): boolean

ruby 复制代码

WeekEnum.has(1); // true
WeekEnum.has('Sunday'); // true
WeekEnum.has(9); // false
WeekEnum.has('Birthday'); // false

7、toSelect 快速生成下拉选项，和items类型，但是只是有label和value两个字段

css 复制代码

WeekEnum.toSelect()
[    {        "value": 1,        "label": "星期一",        "key": "Monday",        "raw": {            "value": 1,            "label": "星期一"        }    },    {        "value": 2,        "label": "星期二",        "key": "Tuesday",        "raw": {            "value": 2,            "label": "星期二"        }    }]

WeekEnum.toSelect({ firstOption: true })
默认在头部插入一条数据，value是空，label是ALL
[    {        "key": "",        "value": "",        "label": "All"    },    {        "value": 1,        "label": "星期一",        "key": "Monday",        "raw": {            "value": 1,            "label": "星期一"        }    },    {        "value": 2,        "label": "星期二",        "key": "Tuesday",        "raw": {            "value": 2,            "label": "星期二"        }    }]

WeekEnum.toSelect({ firstOption: { label: '请选择', value: -1 } })
自定义插入头部数据的lable和value
[    {        "label": "请选择",        "value": -1,        "key": -1    },    {        "value": 1,        "label": "星期一",        "key": "Monday",        "raw": {            "value": 1,            "label": "星期一"        }    },    {        "value": 2,        "label": "星期二",        "key": "Tuesday",        "raw": {            "value": 2,            "label": "星期二"        }    }]

8、toMenu 快速生成一个数组对象，适用于antd的Menu、DropDown等组件

scss 复制代码

WeekEnum.toMenu()
[    {        "key": 1,        "label": "星期一"    },    {        "key": 2,        "label": "星期二"    }]

9、toFilter 快速生成一个数组对象

scss 复制代码

WeekEnum.toFilter()
[    {        "text": "星期一",        "value": 1    },    {        "text": "星期二",        "value": 2    }]

10、toValueMap 生成一个由value为key，{ text: label }为value的对象

javascript 复制代码

WeekEnum.toValueMap()
{
    "1": {
        "text": "星期一"
    },
    "2": {
        "text": "星期二"
    }
}

11、raw 获取枚举的初始化对象

yaml 复制代码

WeekEnum.raw()

{
    "Monday": {
        "value": 1,
        "label": "星期一"
    },
    "Tuesday": {
        "value": 2,
        "label": "星期二"
    }
}

WeekEnum.raw(1)
{
    "value": 1,
    "label": "星期一"
}

const WeekEnum = Enum({
  Sunday: { value: 0, label: '星期日', happy: true },
  Monday: { value: 1, label: '星期一', happy: false },
} as const);

枚举项是可以扩展自定义字段的，支持无限扩展

WeekEnum.raw(0).happy // true
WeekEnum.raw(0); // { value: 0, label: '星期日', happy: true }
WeekEnum.raw('Monday'); // { value: 1, label: '星期一', happy: false }
WeekEnum.raw(); // { Sunday: { value: 0, label: '星期日', happy: true }, Monday: { value: 1, label: '星期一', happy: false } }

12、name 创建枚举时，第二个参数可以传入name参数，定义该枚举的名称

php 复制代码

const WeekEnum = Enum({
  Sunday: { value: 0, label: '星期日', happy: true },
  Monday: { value: 1, label: '星期一', happy: false },
} as const, {
  name: 'i18n.enums.week', // 可以是一个本地化键值
  name: '周', // 可以是一个具体的值
});

WeekEnum.name; // 周
WeekEnum.label(0); // 星期日
WeekEnum.label(1); // 星期一

13、枚举合并支持将存在的枚举合并到另一个枚举中

php 复制代码

const week = Enum({
    Monday: { value: 1, label: '星期一' },
    Tuesday: { value: 2, label: '星期二' },
})

const weeks = Enum({
    ...week.raw(),
    Wednesday: { value: 3, label: '星期三' },
    Thursday: { value: 4, label: '星期四' },
    Friday: { value: 5, label: '星期五' },
    Saturday: { value: 6, label: '星期六' },
    Sunday: { value: 0, label: '星期日' },
})

[
    {
        "value": 1,
        "label": "星期一",
        "key": "Monday",
        "raw": {
            "value": 1,
            "label": "星期一"
        }
    },
    {
        "value": 2,
        "label": "星期二",
        "key": "Tuesday",
        "raw": {
            "value": 2,
            "label": "星期二"
        }
    },
    {
        "value": 3,
        "label": "星期三",
        "key": "Wednesday",
        "raw": {
            "value": 3,
            "label": "星期三"
        }
    },
    {
        "value": 4,
        "label": "星期四",
        "key": "Thursday",
        "raw": {
            "value": 4,
            "label": "星期四"
        }
    },
    {
        "value": 5,
        "label": "星期五",
        "key": "Friday",
        "raw": {
            "value": 5,
            "label": "星期五"
        }
    },
    {
        "value": 6,
        "label": "星期六",
        "key": "Saturday",
        "raw": {
            "value": 6,
            "label": "星期六"
        }
    },
    {
        "value": 0,
        "label": "星期日",
        "key": "Sunday",
        "raw": {
            "value": 0,
            "label": "星期日"
        }
    }
]

类型获取

1、valueType 获取值的类型

ini 复制代码

type WeekValues = typeof WeekEnum.valueType; // 0 | 1

const weekValue: typeof WeekEnum.valueType = 1; // ✅ 类型正确，1 是一个有效的周枚举值
const weeks: (typeof WeekEnum.valueType)[] = [0, 1]; // ✅ 类型正确，0 和 1 是有效的周枚举值
const badWeekValue: typeof WeekEnum.valueType = 8; // ❌ 类型错误，8 不是一个有效的周枚举值
const badWeeks: (typeof WeekEnum.valueType)[] = [0, 8]; // ❌ 类型错误，8 不是一个有效的周枚举值

2、keyType 获取key的类型

ini 复制代码

type WeekKeys = typeof WeekEnum.keyType; // 'Sunday' | 'Monday'
const weekKey: typeof WeekEnum.keyType = 'Monday';
const weekKeys: (typeof WeekEnum.keyType)[] = ['Sunday', 'Monday'];

3、rawType 获取原始结构的类型

php 复制代码

const animal = Enum([
    { value: 1, key: 'dog', label: '狗' },
    { value: 2, key: 'cat', label: '猫' },
    { value: 3, key: 'rabbit', label: '兔子' },
])

type Animal = typeof animal.rawType
{
  value: number;
  key: string;
  label: string;
}

4、使用valueType来缩小取值范围

ini 复制代码

const weekValue: number = 8; // 👎 任意数字都可以赋值给周枚举，即使错误的
const weekName: string = 'Birthday'; // 👎 任意字符串都可以赋值给周枚举，即使错误的

const goodWeekValue: typeof WeekEnum.valueType = 1; // ✅ 类型正确，1 是一个有效的周枚举值
const goodWeekName: typeof WeekEnum.keyType = 'Monday'; // ✅ 类型正确，'Monday' 是一个有效的周枚举名

const badWeekValue: typeof WeekEnum.valueType = 8; // ❌ 类型错误，8 不是一个有效的周枚举值
const badWeekName: typeof WeekEnum.keyType = 'Birthday'; // ❌ 类型错误，'Birthday' 不是一个有效的周枚举名

type FooProps = {
  value?: typeof WeekEnum.valueType; // 👍 组件属性类型约束，可以防止错误赋值，还能智能提示有效值有哪些
  names?: (typeof WeekEnum.keyType)[]; // 👍 组件属性类型约束，可以防止错误赋值，还能智能提示有效值有哪些
};