壹 ❀ 引

最近因为有一些闲散时间,所以一直在做将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,只要我们属性定义错误,或者额外多添加属性,都能正确达到错误提示。其实到这里我们就已经达到了枚举值是对象字面量类型的效果了。

typescript 实现enum枚举值定义为对象的更多相关文章

  1. Java进阶知识点1:白捡的扩展性 - 枚举值也是对象

    一.背景 枚举经常被大家用来储存一组有限个数的候选常量.比如下面定义了一组常见数据库类型: public enum DatabaseType { MYSQL, ORACLE, SQLSERVER } ...

  2. 获取Enum枚举值描述的几法方法

    原文:获取Enum枚举值描述的几法方法 1.定义枚举时直接用中文 由于VS对中文支持的很不错,所以很多程序员都采用了此方案. 缺点:1.不适合多语言 2.感觉不太完美,毕竟大部分程序员大部分代码都使用 ...

  3. MVC3不能正确识别JSON中的Enum枚举值

    一.背景 在MVC3项目里,如果Action的参数中有Enum枚举作为对象属性的话,使用POST方法提交过来的JSON数据中的枚举值却无法正确被识别对应的枚举值. 二.Demo演示 为了说明问题,我使 ...

  4. Enum 枚举值 (一) 获取描述信息

    封装了方法: public static class EnumOperate { public class BaseDescriptionAttribute : DescriptionAttribut ...

  5. java enum 枚举值

    public enum PieChartEnum { PIE00("pie00"), PIE10("pie10"), PIE11("pie11&quo ...

  6. Java进阶知识点: 枚举值

    Java进阶知识点1:白捡的扩展性 - 枚举值也是对象   一.背景 枚举经常被大家用来储存一组有限个数的候选常量.比如下面定义了一组常见数据库类型: public enum DatabaseType ...

  7. Java中的enum枚举类

    首先说说为什么要写这个enum枚举类吧,是群里有个新手问:怎样把enum类中的值遍历得到,其实自己用的也很少.自己也是确实不知道,于是我去网上搜了不少,总结了些,希望对大家有帮助:首先我说说怎样遍历枚 ...

  8. [数据库/MySQL]数据类型:enum 枚举类型

    1 需求描述 场景 性别(gender) :男 / 女 / 保密 2 基本语法 enum(枚举值 1,枚举值 2...); 枚举值列表在 255 个以内,使用 1 个字节来存储 枚举值列表超过 255 ...

  9. c# 枚举的定义,枚举的用法,获取枚举值

    1.定义枚举类型 public enum Test { 男 = , 女 = } 2.获取枚举值 public void EnumsAction() { var s = Test.男;//男 var a ...

  10. 利用DescriptionAttribute定义枚举值的描述信息 z

    System.ComponentModel命名空间下有个名为DescriptionAttribute的类用于指定属性或事件的说明,我所调用的枚举值描述信息就是DescriptionAttribute类 ...

随机推荐

  1. java 文件上传 :MultipartFile 类型转换为file类型

    通过前台进行文件上传并保存服务器. 1.从前台解析得到的文件类型为 MultipartFile 类型,在进行解析的时候,我们需要将 MultipartFile 类型转换为file类型,然后将文件上传到 ...

  2. spring-transaction源码分析(5)TransactionInterceptor事务拦截逻辑

    spring-tx的事务拦截逻辑在TransactionInterceptor类,本文将详细分析其实现方式. 事务拦截器TransactionInterceptor spring-tx的事务拦截逻辑在 ...

  3. [转帖]fullgc问题解决:Full GC (Metadata GC Threshold)

    #问题描述 在工作过程中,遇到一个问题:Tomcat在重启或者发布的时候,会有多次的full GC. 笔者使用的版本说明: Tomcat7.0.25 JDK8 首先排查JVM的问题,就要把GC日志打开 ...

  4. Oceanbase部分参数学习与验证

    Oceanbase部分参数学习与验证 字符集等参数查看 yum install obclient -y 然后使用客户端连接: obclient -h172.24.110.175 -P2881 -uro ...

  5. [转帖]Prometheus监控系统存储容量优化攻略,让你的数据安心保存!

    云原生监控领域不可撼动,Prometheus 是不是就没缺点?显然不是. 一个软件如果什么问题都想解决,就会导致什么问题都解决不好.所以Prometheus 也存在不足,广受诟病的问题就是 单机存储不 ...

  6. [转帖]一次操作系统报错OutOfMemory Error的处理记录

    在启动公司内嵌的tomcat容器时出现报错, 如下: # There is insufficient memory for the Java Runtime Environment to contin ...

  7. 一次典型的Memroy Leak的跟踪学习过程

    背景 周四时某项目在QQ群里说自己的系统出现了CPU占用较高的情况. TOP 查看发现大部分占用CPU的都是 JAVA核心进城后附近的进程. 所以初步怀疑 是出现了FullGC的问题. 然后群里反馈了 ...

  8. Linux应用程序下网络栈参数的简单整理

    somaxconn 该参数应该是决定一个服务能够同时处理多少个网络请求的核心参数. 一个程序能够支持多少个访问参数,是有两部分来决定, 第一部分是somaxconn ,第二部分是应用服务器启动时传递过 ...

  9. Concat、Push、Spread syntax性能差异对比

    今天在力扣上做了一道数组扁平化的题,按理来说,应该熟能生巧了,但是在使用concat时候超出了时间限制,使用push可以通过,代码如下: /** * @describe 使用concat,超出时间限制 ...

  10. ABP vNext系列文章01---模块化

    一.模块化应用  1.继承AbpModule 每个模块都应该定义一个模块类.定义模块类的最简单方法是创建一个派生自AbpModule的类,如下所示:  2.配置依赖注入和其他模块---ConfigSe ...