Ways to get literal type of array values(获取数组中值的联合类型)

当我们写页面的时候,定义一个页面状态的数组,我们可能是如下写法:


const pageStatus = [0,1,2] //0123具体代表什么,自己根据项目组情况而定 或者写成 ['loading','success','error'] 随便什么,只要你喜欢

这是js写法,那如果我们项目引入了 ts 呢?那他可能就会变成


type PageStatusProps = 0 | 1 | 2  //或者 'loading' | 'success' | 'error'

const pageStatus: PageStatusProps[] = [0, 1, 2] //['loading', 'success', 'error']

再来个类似的,定义一个你喜欢的动物列表


type Animal = 'cat'| 'duck' | 'rabbit'

const animals = ['cat', 'duck', 'rabbit']

细心的你可能发现,type('cat'| 'duck' | 'rabbit') 和 最终的数组(['cat', 'duck', 'rabbit']),里面单个值,重复写了。那么意味着:我们要维护两个地方的代码..

那么如何优雅解决这个问题呢?


export type Lit = string | number //可以更多,但是感觉不是特别有用

export const tuple = <T extends List[]>(...args: T) => args

//example1

const animals = tuple('cat','duck','rabbit');

type Animal = typeof animals[number]; //联合类型,'cat' | 'duck' | 'rabbit'

//example2

const pageStatus = tuple(0,1,2)

type PageStatusProps = typeof pageStatus[number] //0,1,2

如果聪明的你有更好的方法,跪求告知。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容