TypeScript中的Enum如何用-创新互联
本篇内容介绍了“TypeScript中的Enum如何用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
目前创新互联已为数千家的企业提供了网站建设、域名、网页空间、网站托管、服务器租用、企业网站设计、兴文网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。Enum
Enum 是在 TypeScript 中新增的语法,也叫做枚举,一般用它来管理多个相同系列的常量(即不能被修改的变量),用于状态的判断。
在 Web 中比较常见的状态判断,是在处理请求时,要针对不同的响应状态码做对应的处理:
const handleResponseStatus = (status: number): void => { switch (status) { case 200: // 请求成功时 // Do something... break; case 400: // 请求失败时 // Do something... break; default: throw (new Error('No have status code!')); } };
但因为响应状态码都是预先定义好的,所以没什么争议,代码写成这样看也很正常,但是如果后端在服务器发生错误时自定义了一些编码,并告诉前端,这些代码都代表什么错误,那么上面的函数可能会变成这样:
const handleWrongStatus = (status: string): void => { switch (status) { case 'A': // Do something... break; case 'B': // Do something... break; case 'C': // Do something... break; default: throw (new Error('No have wrong code!')); } };
如果是这种代码,别说是刚接手的人,就算是你自己两星期前写的,恐怕不去翻文档也想不起它们都代表什么了吧。
但是如果善用 Enum ,就可以避免上述发生的情况。
基本用法
先来看看 Enum 该怎么定义,它和 Object 的用法很像:
enum requestStatusCodes { error, success, }
不需要在内容与名称之间加等号,直接在大括号内叙述该 Enum 中具有哪些变量,与其说是变量,不如说是常量更恰当些,因为在 Enum 中的值是不可修改的,所以也不必担心这些定义好的规则会在代码执行的过程中发生改变,导致执行错误。
而既然 Enum 是用来定义同一个系列常量的,那这些常量应该都能维护特定的值。没错,在 Enum 中的每个常量,都可以通过 =
来指定具体的值 。
但如果是像前面的 requestStatusCodes
,没有为 error
或 success
指定具体的值也不会出错,因为 TypeScript 会从 0
开始自动递增定义值,所以签名的 requestStatusCodes
会和下面的结果相同:
enum requestStatusCodes { error = 0, success = 1, }console.log(requestStatusCodes.error) // 0 console.log(requestStatusCodes.success) // 1
除了数字外,也可以定义为字串:
enum requestWrongCodes { missingParameter = 'A', wrongParameter = 'B', invalidToken = 'C', }console.log(requestWrongCodes.wrongParameter) // 'B'
当然也可以在一个 enum 中设定不同的类型,但这样一点意义都没有:
enum requestStatusCodes { error = 0, success = 'OK', }
了解基本的 Enum 怎么定义后,接着就来改写前面代码中的 handleResponseStatus
和 handleWrongStatus
,让它们在语义上能够更明确。
首先用 Enum 定义两者的状态描述:
enum requestStatusCodes { error = 400, success = 200, } enum requestWrongCodes { missingParameter = 'A', wrongParameterType = 'B', invalidToken = 'C', }
然后修改 handleResponseStatus
和 handleWrongStatus
中的 Switch 判断:
const handleResponseStatus = (status: number): void => { switch (status) { case requestStatusCodes.success: // Do something... break; case requestStatusCodes.error: // Do something... break; default: throw (new Error('No have status code!')); } }; const handleWrongStatus = (status: string): void => { // 如果觉得 requestWrongCodes.missingParameter 太长了,也可以用以下方式: const { missingParameter, wrongParameterType, invalidToken, } = requestWrongCodes; switch (status) { case missingParameter: // Do something... break; case wrongParameterType: // Do something... break; case invalidToken: // Do something... break; default: throw (new Error('No have wrong code!')); } };
修改后的代码就变得直观多了,因为状态码都被放到了 Enum 中统一管理,所以就能用常量名来代表它们,之后不管过了多久,可以明确的知道这里再做什么,甚至连注解或文档都不用写了,因为代码就是最好的文档。
善用 Enum 能使代码绝对是不可或缺的,但就算没使用 TypeScript 也别灰心,因为 TypeScript 最终会被转换为 JavaScript ,那来看看如何直接用 JavaScript 实现 Enum 吧!
用原生 JavaScript 实现 Enum
在前面说过 Enum 很像 Object ,如果研究一下 Enum 被编译成 javascript 之后的代码,就会发现还真的是 Object。
Enum 被编译后会变成 Key 和 Value 反向对应的对象,这样看起来非常简单,为了方便使用,下面把它的编译方式写成一个函数:
const newEnum = (descriptions) => { const result = {}; Object.keys(descriptions).forEach((description) => { result[result[description] = descriptions[description]] = description; }); return result; }; const responseStatus = newEnum({ error: 400, success: 200, }); // { '200': 'success', '400': 'error', error: 400, success: 200 } console.log(responseStatus);
虽然得到的结果相同,但是丧失了 Enum 中最可贵的常量特色,如果不能让它变成不可修改,那就有可能会在代码里不经意地改动它,导致执行结果可能出错,于是可以在最后利用 Object.freeze()
,让外部操作无法新增、删除或重新定义任何 Property :
const newEnum = (descriptions) => { const result = {}; Object.keys(descriptions).forEach((description) => { result[result[description] = descriptions[description]] = description; }); return Object.freeze(result); }; const responseStatus = newEnum({ error: 400, success: 200, }); // 即使不小心修改了 responseStatus['200'] = 'aaaaaaaa'; // 仍然是 { '200': 'success', '400': 'error', error: 400, success: 200 } console.log(responseStatus);
这样就能简单在 JavaScript 中实现 Enum 了。
const Enum 的用法
从前面的 JavaScript 代码中可以看到 Enum 编译过后会变成 Key 和 Value 互相对应的 Object ,也就是说不管是用 Key 还是Value 都可以取出对应的值,
但是如果用 const
声明 Enum ,编译之后就不会产生 Object。
直接看例子,假设我把 responseState
用 const
重新生命,且也是以 handleResponseStatus
使用该 Enum 做判断:
enum responseStatus { error = 400, success = 200, } const handleResponseStatus = (status: number): void => { switch (status) { case responseStatus.success: console.log('请求成功!'); break; case responseStatus.error: console.log('请求失败!'); break; default: throw (new Error('No have status code!')); } };
看起来一切正常,不过在编译后的 JavaScript 中,会发现 Enum 并没有产生 Object ,而是直接用 const
声明在 Enum 中的值。
用 const
声明 Enum 有几个好处:
假设要用到的 Enum 非常多,那在执行时就会不停地使用 IIFE 产生 Object 将 Key 和 Value 绑定到 Object,会造成一些效率上的损失,也会增加内存,但是
const
并不会产生 Object ,也就不会有以上的问题。就算到的 Enum 不多,判断时也需要一直从 Object 中找出对应的值,而如果是用
const
声明 Enum ,在编译成 JS 时就将声明的值直接放入判断中。
不过这样也就没法从 Enum 中反向取值了,因为它并不会产生对象:
const enum responseStatus { error = 400, success = 200, }// 会出错,因为已经没有对象可供查找了 console.log(responseStatus[400])// 但这个不会有问题,因为编译的时候会直接填值 console.log(responseStatus.error)// 编译后: // console.log(400)
“TypeScript中的Enum如何用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联-成都网站建设公司网站,小编将为大家输出更多高质量的实用文章!
分享题目:TypeScript中的Enum如何用-创新互联
转载源于:http://scyanting.com/article/ddddpc.html