众所周知,前端项目中尽量少写数字,但是后端返回的状态枚举又经常是数字,那么前端在定义枚举的时候通常需要定义枚举,定义对应的文案。如果还需要使用options,需要自己再次对枚举进行封装。
export const question_type_status = {
multiple: 1,
radio: 2,
judge: 3,
};
export const question_type = {
[question_type_status.multiple]: '多选题',
[question_type_status.radio]: '单选题',
[question_type_status.judge]: '判断题',
};
自己写一个方法,如果没有处理好里面的一些逻辑,就没有对应的ts提示功能。
为了应对上面的各种不适,createEnum的出现解决了这个问题。
idx是用于生成options的排序,如果不需要特殊排序,完全可以不用写的。
最后的
as const一定要写,不然提示的时候,只能提示出对应的类型
// 定义方式const verifyStatusEnum = createEnum({
wait: {
label: "等待",
value: 0,
idx: 1,
},
pass: {
label: "通过",
value: 1,
idx: 2,
},
reject: {
label: "拒绝",
value: 2,
idx: 3,
},
init: {
label: {
text: "支付取消",
status: "Success",
},
value: 3,
idx: 4,
},
} as const);
createEnum是使用ts进行开发的,所以在createEnum之后,生成 verifyStatusEnum 的在使用时,会有对应值的提示。
demo:
// result -> 0
verifyStatusEnum.wait
// result -> 等待
verifyStatusEnum.waitName
// result -> { wait: '等待', pass: '通过', reject: '拒绝', init: { text: '支付取消', status: 'Success' } }
verifyStatusEnum.enum
// result -> { wait: '等待', pass: '通过', reject: '拒绝', init: '支付取消' }
verifyStatusEnum.textEnum
/**
*
[
{ label: '等待', value: 0, idx: 1 },
{ label: '通过', value: 1, idx: 2 },
{ label: '拒绝', value: 2, idx: 3 },
{ label: { text: '支付取消', status: 'Success' }, value: 3, idx: 4 }
]
*/
verifyStatusEnum.options