TS学习(五) :TS枚举的使用

扩展类型有那些？

• 类型别名
• 枚举
• 接口
• 类

类型别名之前已经接触了就不再过多解释，这里主要学习的是枚举

枚举

一般是后端语言的东西，这里学过后端都应该了解，枚举通常用于约束某个变量的取值范围。

像开发一些游戏的上下左右的操作可以用枚举，还有定义用户的性别也可以用枚举，

用户的性别这里之前我们是用的是字面量和联合类型配合使用，也可以达到同样的目标。

但是为什么还要用到枚举呢？这肯定是在用字面量和联合类型配合使用时遇到了问题，所以才不得不使用枚举，什么问题呢

• 字面量类型的问题

  • 1、在类型约束位置、会产生重复代码。可以使用类型别名解决该问题，如下

    例子：
    let gender: "男" | "女";
    gender="男";
    gender="女";
    function searchUser(g:"男" | "女"){
    //...doing something
    }
    

  • 2、逻辑含义和真实的值产生了混淆，会导致当修改真实值的时候，产生大量的修改

    例子：
    type Gender ="男" | "女"
    let gender: Gender;
    //do something 很多代码
    if(true){
      gender="男";
    }else{
      gender="女";
    }
    function searchUser(g:Gender){
    //...doing something
    }
    

    这个时候如果有需求说不要用男女来表示，用其他的比如帅哥/美女，这样改的地方就会很多如 Gender ="帅哥" | "美女"，

    其他地方给gender变量赋值的也得改不然会报错，万一写了成百上千行代码，这改起来就很麻烦

  • 3、字面量类型不会进入到编译结果，而枚举可以

• 定义枚举

enum 枚举名 {
    //枚举字段1=值1
    //枚举字段2=值2
}

在赋值的时候，像使用对象一样

// 如
enum Gender {
    male = "男",
    female = "女"
}
let gender: Gender;
//do something 很多代码
if(true){
    gender= Gender.male;
}else{
    gender=Gender.female;
}
function searchUser(g:Gender){
    //...doing something
}

编译完成后的代码 由于”男女“是中文转义了，所以使用枚举是可以被编译的

var Gender;
(function (Gender) {
    Gender["male"] = "\u7537";
    Gender["female"] = "\u5973";
})(Gender || (Gender = {}));
var gender;
//do something 很多代码
var number = Math.random() > 0.5;
if (number) {
    gender = Gender.male;
}
else {
    gender = Gender.female;
}

如果想要改值也仅仅只需要改 Gender里面的值就行了，其他的不需要动，

当然如果说把逻辑值male|female改了，那没办法得全局改了

enum Gender {
    male = "先生",
    female = "女士"
}

• 枚举的规则

  • 枚举的字段值可以是字符串，也可以是数字

    enum Level{
        level1=1,
        level2=2,
        level3=3
    }
    

  • 数字枚举的值会自动自增，如果第一个值不赋值，则第一个值为0，后面依次递增

    enum Level{
        level1=1,
        level2,
        level3
    }
    let l:Level = Level.level1;
    l = Level.level2
    console.log(l)//打印结果是2
    

  • 被数字枚举约束的变量，可以直接赋值为数字，这样的方法不建议使用，这样又在使用真实值

      enum Level{
          level1,
          level2,
          level3
      }
      let l:Level = 1;
      l = 2
      console.log(l)//打印结果是2
    

  • 数字枚举的编译结果 和 字符串枚举有差异

        //编译后的结果
        var Level;
        (function (Level) {
        Level[Level["level1"] = 1] = "level1";
        Level[Level["level2"] = 2] = "level2";
        Level[Level["level3"] = 3] = "level3";
        })(Level || (Level = {}));
        var l = Level.level1;
        l = Level.level2;
    

  • 不要在一个枚举中既出现数字，又出现字符串

  • 使用枚举时，尽量使用枚举的字段名称，而不使用真实值