在Typescript中你真的会用枚举了吗？？？

在Typescript中你真的会用枚举了吗？？？

以往我们一般写枚举映是根据后端的枚举同样映射；就比如是：

     * 提现状态：0：待审核 1：发放中 2：发放失败 3：已驳回 4：已发放 5：已撤销
     */
    status?: number;
    enum xxxStatus {
        ....
    }

但是在实际工作中，有些枚举状态还需要支持下拉框查询功能，这样上面的枚举就不得不再次增量代码转译或者重新定义一个变量； 分享一个简单示例：

class WithdrawalStatusClass {
    withdrawalStatusEnum: Record<number, string> = {
        0: "待审核",
        1: "发放中",
        4: "已发放",
        2: "发放失败",
        3: "已驳回",
        5: "已取消",
    };
    // 转成数组
    toArray(): any[] {
        return Object.entries(this.withdrawalStatusEnum).map(([key, value]) => {
            return {
                value: Number(key),
                label: value
            };
        });
    }
    // 查找某一个的值
    formatterById(value: string | number): string {
        if (!String(value)) return "";
        return this.withdrawalStatusEnum[Number(value)] || String(value);
    }
    // 可以根据需求做更多 增加方法在类里面实现
    // DO SomeThing
}

export default new WithdrawalStatusClass();

这样可不写传统的枚举enum这种模式，在实际工作中使用：

<el-select v-model="state.dataForm.type" clearable placeholder="请选择提现类型">
                        <el-option v-for="v in WithdrawalStatusClass.toArray()" :key="v.value"   :label="v.label" :value="v.value" />
          </el-select>

// 获取值
WithdrawalStatusClass.formatterById(withdrawalDetail.status || "")

这样增加枚举，使用Class来实现，避免处理一些常用逻辑在页面上； 每个人的代码风格跟想法不同，大家都可以多多分享，这只是我在项目上用到比较多，因为我们的项目用的枚举大部分都得支持查询；后续可以封装一个通用的Class来继承，写起来就更方便了