东莞网站建设服务协议,东莞网络营销网络推广系统,假淘宝网站怎么做,wordpress js加载速度慢导语 在 TypeScript 中#xff0c;新增了很多具有特性的一些数据类型处理方法#xff0c;enum 【枚举】就是其中#xff0c;很具有代表性的一种#xff0c;所以本章节就来聊聊 在 TypeScript 中如何去运用 enum 【枚举】。 枚举的概念#xff1a; 枚举#xff08;Enum新增了很多具有特性的一些数据类型处理方法enum 【枚举】就是其中很具有代表性的一种所以本章节就来聊聊 在 TypeScript 中如何去运用 enum 【枚举】。 枚举的概念 枚举Enum类型用于取值被限定在一定范围内的场景比如一周只能有七天颜色限定为红绿蓝等。 枚举使用 enum 关键字来定义
enum DaysDataType {Sun,Mon,Tue,Wed,Thu,Fri,Sat
};
console.log(DaysDataType);默认赋值【自动赋值】
枚举成员默认值会被赋值为从 0 开始递增的索引数字同时也会对枚举值到枚举名进行反向映射
上面输出打印 枚举 DaysDataType 上面声明的枚举最后被编译为 JS 后会呈现以下的样式。 手动赋值
我们也可以给枚举项手动赋值
enum DaysDataType {Sun 7,Mon 14,Tue 21,Wed 54,Thu,Fri,Sat
};
console.log(DaysDataType);
手动赋值后再次注意看编译后的内容
console.log(DaysDataType[Sun] 7); //true
console.log(DaysDataType[Mon] 14);//true
console.log(DaysDataType[Tue] 21);//true
console.log(DaysDataType[Wed] 54);//true
console.log(DaysDataType[Thu] 55);//true
console.log(DaysDataType[Fri] 56);//true
console.log(DaysDataType[Sat] 57);//true上面案例可以看出未手动赋值的枚举项会接着上一个枚举项的值进行递增。 注意如果手动赋值的为 number 类型的值下一位如果没有手动赋值则会在上一次的基础上递增。并且所赋值的数字可以被用做数组的下标索引的方式来读取数据,赋值非number类型的不支持通过下标读取 如
enum DaysDataType {Sun 789,Mon 4546,Tue 415,Wed asd,Thu asdasd,Fri 41,Sat asddf
};
console.log(DaysDataType);
console.log(DaysDataType[4546]); //Mon
console.log(DaysDataType[41]); //Fri截止目前TS 枚举手动赋值仅支持 numberstringnullundefined,不支持 Boolean 值得注意 如果未手动赋值的枚举项与手动赋值的重复了TypeScript 是不会察觉到这一点的,它会进行一个 后来居上的覆盖处理
enum DaysDataType {Sun 7,Mon 14,Tue 21,Wed 54,Thu 13,Fri, //14 根据前枚举项 递增会覆盖掉前面 Mon 的14。Sat //15
};console.log(DaysDataType[7] Sun); //trueconsole.log(DaysDataType[14] Mon); //false 被 Fri 覆盖掉了丢失了唯一性。console.log(DaysDataType[21] Tue); //true
console.log(DaysDataType[54] Wed); //true
console.log(DaysDataType[13] Thu); //true
console.log(DaysDataType[14] Fri); //true // Fri 覆盖掉了 Mon
console.log(DaysDataType[15] Sat); //true所以使用的时候需要特别注意尽量避免出现 数据覆盖的情况。
当然手动赋值的枚举项不仅仅可以不是数字类型此时需要使用类型断言来让 tsc 无视类型检查 (编译出的 js 仍然是可用的)
enum DaysDataType {Sun 7,Mon 14,Tue 21,Wed 54,Thu 13,Fri,Sat any张三 //类型断言
};同时手动赋值的枚举项也可以为小数或负数此时后续未手动赋值的项的递增步长仍为 1
enum DaysDataType {Sun 1.5,Mon,Tue,Wed,Thu,Fri,Sat
};
console.log(DaysDataType);枚举的常数项和计算所得项 枚举项有两种类型常数项constant member和计算所得项computed member 前面我们所举的例子都是 常数项那么 计算所得项又是什么呢如下案例
enum Color {Red, Green, Blue blue.length};案例中 Blue 的值是通过 一个字符串的 length 计算而得来的。这种就被称为计算所得项。
注意 如果紧接在计算所得项后面的是未手动赋值的项那么它就会因为无法获得初始值而报错 常数枚举:
常数枚举是使用 const enum 定义的枚举类型
const enum Directions {Up,Down,Left,Right
}let directions [Directions.Up, Directions.Down, Directions.Left, Directions.Right]; // let directions [0 /* Directions.Up */, 1 /* Directions.Down */, 2 /* Directions.Left */, 3 /* Directions.Right */];常数枚举与普通枚举的区别是它会在编译阶段被删除并且不能包含计算所得项的枚举成员。主要作用是在编译阶段进行类型检查。 外部枚举 外部枚举Ambient Enums是使用 declare enum 定义的枚举类型。 declare enum Directions {Up,Down,Left,Right
}let directions [Directions.Up, Directions.Down, Directions.Left, Directions.Right];//let directions [Directions.Up, Directions.Down, Directions.Left, Directions.Right];declare 定义的类型只会用于编译时的检查编译结果中会被删除。
同时使用 declare 和 const 也是可以被支持的。
declare const enum Directions {Up,Down,Left,Right
}let directions [Directions.Up, Directions.Down, Directions.Left, Directions.Right];编译后
var directions [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];总结
本章节主要介绍了在 TypeScript 中 如何应用 enum 【枚举】的使用场景以及使用枚举的多种定义方式。提供给大家参考学习。 ♂️ 博主座右铭向阳而生我还在路上 —————————————————————————————— 博主想说将持续性为社区输出自己的资源同时也见证自己的进步 —————————————————————————————— ♂️ 如果都看到这了博主希望留下你的足迹【收藏点赞✍️评论】 ——————————————————————————————
