TypeScript-枚举类型

原创

杨不易呀

发布于 2023-09-28 18:22:14

5040

文章被收录于专栏：杨不易呀杨不易呀

前言

介绍其基本概念、语法特性以及如何开始使用它来构建类型安全的JavaScript应用程序。无论您是新手还是有经验的开发者，都能在这篇文章中找到有关TypeScript的重要信息和实用技巧。让我们一起探索这个强大的编程语言！

枚举类型是 TS 为 JS 扩展的一种类型，在原生的 JS 中是没有枚举类型的，枚举用于表示固定的几个取值例如：一年只有四季、人的性别只能是男或者女

定义枚举

enum Gender {
    Male,
    Female
}

如上代码的含义为，定义了一个名称叫做 Gender 的枚举类型, 这个枚举类型的取值有两个, 分别是 Male 和 Female：

enum Gender {
    Male,
    Female
}

let val: Gender;
val = Gender.Female;
console.log(val);

如上代码的含义为，定义了一个名称叫做 val 的变量, 这个变量中只能保存 Male 或者 Female 运行结果如下：

错误示例，例如给了不是在 Gender 当中定义的值：

enum Gender {
    Male,
    Female
}

let val: Gender;
val = 'nan';
console.log(val);

注意点

TS 中的枚举底层实现的本质其实就是 数值类型，所以赋值一个数值不会报错：

enum Gender {
    Male,
    Female
}

let val: Gender;
val = 0;
console.log(val);
console.log(Gender.Male);
console.log(Gender.Female);

TS 中的枚举类型的取值, 默认是从上至下从 0 开始递增的：

enum Gender {
    Male,
    Female
}

console.log(Gender.Male);
console.log(Gender.Female);

虽然默认是从 0 开始递增的, 但是我们也可以手动的指定枚举的取值的值：

enum Gender {
    Male = 6,
    Female = 9
}

console.log(Gender.Male);
console.log(Gender.Female);

如果手动指定了前面枚举值的取值, 那么后面枚举值的取值会根据前面的值来进行递增：

enum Gender {
    Male = 6,
    Female
}

console.log(Gender.Male);
console.log(Gender.Female);

如果手动指定了后面枚举值的取值, 那么前面枚举值的取值不会受到影响：

enum Gender {
    Male,
    Female = 8
}

console.log(Gender.Male);
console.log(Gender.Female);

我们还可以同时修改多个枚举值的取值，如果同时修改了多个, 那么修改的是什么最后就是什么：

enum Gender {
    Male = 1,
    Female = 8
}

console.log(Gender.Male);
console.log(Gender.Female);

还可以通过枚举值拿到它对应的数字：

enum Gender {
    Male,
    Female
}

console.log(Gender.Male);
console.log(Gender.Female);

还可以通过它对应的数字拿到它的枚举值：

enum Gender {
    Male,
    Female
}

console.log(Gender[0]);

探究底层实现原理

进入：https://www.typescriptlang.org/play?#code/KYOwrgtgBA4qAmwBOUDeAoKWoFkCGANsADSbYBiwEhw6AvkA

将我们的枚举代码复制进去进行编译可以得到经过最终处理的 JS 代码如下：

然后将编译好的 JS 代码复制出来进行分析，发现当中有一个逼格很高，而且很巧妙很灵活的一种写法 Gender[Gender["Male"] = 0] 然后博主亲自去浏览器的控制台当中进行测试一下该语法的返回值就是所对应的 0：

弄明白了底层语法的其中不明确的内容之后那么编译之后的 JS 代码可以等价于如下的代码, 其实 TS 实现枚举就是在一个对象当中添加 4 个不同的 key 进行实现的，所以这就是如上我们即可使用数字又可以使用所对应值的原因：

let Gender = {};
Gender["Male"] = 0;
Gender[0] = "Male";
Gender["Femal"] = 1;
Gender[1] = "Femal";

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第二期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第二期

#TS系列

登录后参与评论

0 条评论

热度