玩转TypeScript枚举

前言

😎在我们来详细介绍枚举前，不如先从编程世界的整体上来了解下枚举，我们首先看下其他语言的枚举类型，虽然在JS中没有枚举类型，但是在其他编程语言里面其实早就是老朋友了，我们先看下C#和Java中的枚举的使用方法。在 C# 中，枚举类型使用 enum 关键字来定义。与 TypeScript 类似，C# 的枚举类型也允许为一组相关的常量值分配名称。C# 的枚举类型默认基于整数，并且可以手动指定每个常量值的整数值或使用隐式递增。以下是一个示例：

enum DayOfWeek {
    Monday,
    Tuesday,
    Wednesday,
    Thursday,
    Friday,
    Saturday,
    Sunday
    }

在 Java 中，枚举类型使用 enum 关键字来定义。Java 的枚举类型与 TypeScript 的枚举类型类似，允许为一组相关的常量值分配名称。Java 的枚举类型可以包含方法、字段和构造函数。以下是一个示例：

enum Size {
    SMALL,
    MEDIUM,
    LARGE
}

🫥其实在TypeScript中的使用方法和写法和C#中的写法一模一样，我们来看下在TypeScript中枚举写法

enum Person{
  WOMAN,
  MAN
}

二.枚举的用法汇总

🤗关于枚举的用法我会从上面四个部分进行拆分介绍，具体分为普通枚举 枚举延迟求值 数字枚举 字符枚举 枚举扩展等几个方面展开。

三.常量枚举（普通枚举）

🫥上述图中并没有标注常量枚举，因为它是枚举中最普通的用法，所以我比较喜欢称之为普通枚举，普通枚举的使用方法非常的简单，下边例子我们写了一个关于人的枚举，枚举的取值方式和JS中对象的取值方式一样，但是不同点在于枚举可以双向映射简而言之就是，通过key可以获得value通过value可以获得key，具体转为JS的细节我们不需要去了解，我们就把TS当作一门类似于C#的语言来学习就好。

enum Person{
    RIBEN,
    MEIGUO,
    YINGGUO,
}
console.log(Person[0])
console.log(Person.RIBEN)

四.数字枚举与字符枚举

🥱我们对上面的那个枚举进行修改，为后两个枚举分别添加上数字和字符串的值，并且在TS中枚举的值只能是数字或者字符串。

enum Person{
    YINGGUO,
    RIBEN = 599,
    MEIGUO = "En",
}

既然看到这里不妨我们来解决一个报错，报错内容如下所示，普通枚举放到最后为什么报错了？我们思考一下，普通枚举在通过key取value值的时候取到的值是下标，那么如果把它放在字符串枚举的后边它该如何取值？所以我们可以参考下面的运行结果来解决，解决的办法就是要把这个普通的枚举放在字符串枚举值的上边。

🫥总结一下就是，数字枚举就是一种特殊的普通枚举，只不过是自己限定了值，这样的话其实就很清楚了，枚举分为两类：普通枚举 字符枚举

五.延迟求值枚举

😎延迟求值枚举就是，值先不确定，在使用的时候再进行计算，可以简单理解为懒加载相关的内容，我们可以看下这个例子，我们依然要注意上方那种报错的问题。

const sum = ()=> 45 + 34

enum Num{
    ONE = sum(),
    THREE = 455,
    TWO,
}
console.log(Num.ONE) // 79
console.log(Num.TWO) // 455
console.log(Num.THREE) // 456

六.枚举扩展

🫥假设你正在开发一个音乐播放器应用程序。请定义一个枚举类型 MusicGenre，包含以下音乐风格的成员：

Pop Rock HipHop Jazz EDM，然后，请定义一个函数 getSongRecommendation，该函数接受一个 MusicGenre 类型的参数，并根据传入的音乐风格返回一个对应的歌曲推荐。

1. getSongRecommendation 函数的返回类型为字符串。
2. 如果传入的音乐风格是 Pop，则返回 “Dance Monkey”。
3. 如果传入的音乐风格是 Rock，则返回 “Bohemian Rhapsody”。
4. 如果传入的音乐风格是 HipHop，则返回 “Lose Yourself”。
5. 如果传入的音乐风格是 Jazz，则返回 “Take Five”。
6. 如果传入的音乐风格是 EDM，则返回 “Wake Me Up”.

你需要完成的部分是定义枚举类型和编写 getSongRecommendation 函数的实现。

enum MusicGenre {
  // 在这里定义音乐风格的枚举成员
}

function getSongRecommendation(genre: MusicGenre): string {
  // 在这里根据传入的音乐风格返回对应的歌曲推荐
}

// 测试代码
const popSong = getSongRecommendation(MusicGenre.Pop);
console.log(popSong); // 应该输出 "Dance Monkey"

enum MusicGenre {
    Pop = "Dance Monkey",
    Rock = "Bohemian Rhapsody",
    HipHop = "Lose Yourself",
    Jazz = "Take Five",
    EDM = "Wake Me Up",
}
function getSongRecommendation(genre: MusicGenre): string {
return genre
}
getSongRecommendation(MusicGenre.Pop)
console.log(getSongRecommendation(MusicGenre.Pop));

原文链接：https://juejin.cn/post/7319781980975087651 作者：一溪风月