您的位置:首页 > Web前端 > JavaScript

typescript 实现enum枚举值定义为对象

2022-05-13 14:54 751 查看 https://www.cnblogs.com/echolu

壹 ❀ 引

最近因为有一些闲散时间,所以一直在做将

Class
组件重构为
typescript + hooks
组件的工作,结果今天就遇到一个有趣的问题。我们知道
react Class
组件一般都会定义
Component.propTypes
属性,目的在于限制组件
props
类型以及某个属性是否必传等。结果在改写过程中,我发现有个属性它的定义是一个枚举:

// 枚举定义,这里借用了项目自己封装的枚举创建方法
const PaymentTypeEnum = createSimpleEnum({
SENIOR: {
value: 'pro',
type: 1,
},
TRIAL: {
value: 'trial',
type: 2
},
FREE: {
value: 'free',
type: 0,
},
PENDING: {
value: 'pending',
type: 3
}
});

// props大概的定义,type的结构可能是
Component.propTypes = {
type: PropTypes.oneOf(EnumHelper.enumValues(PaymentTypeEnum)
}

这里的

type
类型就表示属于
PaymentTypeEnum
其一,它可能是
{value:'pro',type:1}
,也可能是
{value:'free',type:0}
,而
ts
是自带枚举的,所以这里我需要将其修改为
ts
的枚举,让其类型推断上也能满足枚举其一。

贰 ❀ 解决Enum枚举值不能是对象

我们知道

ts
中的类型其实可以分为比较抽象的原始类型,以及较为具体的字面量类型,比如我希望变量
a
的值一定是个字符串,这里就能用抽象的
string
表示:

const a:string = '1';

此时

a
的值就必须是个字符串。而有时候我们希望某个变量的值,是按照我们预设好的值其一,这里就可以用联合类型结合字面量类型来达到效果,比如:

type NameType = 'echo' | '听风是风' | '时间跳跃';
const user: NameType = 'echo';

此时

user
就只能是
echo
这三个值其一,这在我们日常开发中,当为组件预设了部分固定配置时将十分有用。

所以回到开头的问题,我现在就是希望

type
的类型约束,是我定义的枚举定义四个对象中的某一个,但尴尬的是,
ts
枚举值定义并不支持对象,这会直接导致报错,这里我们可以借用接口与枚举达到这个效果:

// 定义枚举
enum PaymentTypeEnum {
SENIOR,
TRIAL,
FREE,
PENDING,
};

// 定义接口
interface PaymentType {
[PaymentTypeEnum.SENIOR]: {
value: 'pro';
type: 1;
};
[PaymentTypeEnum.TRIAL]: {
value: 'trial';
type: 2;
};
[PaymentTypeEnum.FREE]: {
value: 'free';
type: 0;
};
[PaymentTypeEnum.PENDING]: {
value: 'pending';
type: 3;
};
}

// 组件props接口定义
interface ComponentPropsType {
type: PaymentType[PaymentTypeEnum]
}

我们来做个试验验证下,比如我现在要定义

payment
值为:

const payment: ComponentPropsType = {
type: {
value: 'pendings',// Type '"pendings"' is not assignable to type '"pro" | "trial" | "free" | "pending"'.
type: 4 // Type '4' is not assignable to type '0 | 1 | 2 | 3'.
}
}

可以看到,不管是

value
还是
type
,只要我们属性定义错误,或者额外多添加属性,都能正确达到错误提示。其实到这里我们就已经达到了枚举值是对象字面量类型的效果了。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐