TypeScript入门七:TypeScript的枚举

  • 关于枚举
  • 数字枚举
  • 字符串枚举
  • 异构枚举
  • 计算的和常量成员
  • 运行时的枚举与反向映射
  • 常量枚举与外部枚举

一、关于枚举

枚举:一个集的枚举是列出某些有穷序列集的所有成员的程序,或者是一种特定类型对象的计数。

在定义中可以看到这些关键词:有穷序列集、成员、类型对象、计数。

在这些关键字中可以了解到枚举是一组有穷数据的集合;这些数据或者类型对象被当成这个集合的成员;计数的话我的理解有两种:前面提到有序集那么就可以使用有序的数字对数据进行标识,而前面提到的有穷就说明这些数据量是可以被计算的。

根据这些定义的内容再来理解TypeScript枚举类型:

TypeScript枚举的每个成员都属于它们所在枚举集合的一个对象,也就是说它们的数据类型名称就是枚举集合的名称,例如下面这段代码:

 1 enum en {
 2     No =  0,
 3     Yes = 1
 4 }
 5 function respond(recipient: string, message:en): void {//message参数类型为定义的枚举类型 en,指向的是en成员No、Yes
 6     if(message){
 7         console.log(recipient);
 8     }
 9 }
10 respond("Princess Caroline", en.Yes);//这里传入了枚举成员Yes

关于计数相关可以了解后面的数字枚举,以及TypeScript的一些其他细节内容。

二、数字枚举

TypeScript在默认情况下自动采用数字枚举,不设置初始化的时候第一个成员的值为0,可以理解它为成员标识、计数、索引。

也可以在声明枚举变量时可以使用初始化器对成员值进行初始化,也就是对第一个成员设置一个整数值,可以为负数,然后后面的成员就会自动一次默认实行+1的方式赋值。

 1 enum En1 {//默认情况下自动采用数字枚举
 2     a,
 3     b,
 4     c
 5 }
 6 enum En2 {
 7     a = -5,//使用初始化器初始化
 8     b,
 9     c
10 }
11 enum En3 {
12     a = 5,//使用初始化器初始化
13     b,
14     c
15 }
16 enum En4 {
17     a,
18     b = 0,//非必要的情况下不建议这样做
19     c
20 }
21 console.log(En1);//{0: "a", 1: "b", 2: "c", a: 0, b: 1, c: 2}
22 console.log(En2);//{a: -5, -5: "a", b: -4, -4: "b", c: -3, …}
23 console.log(En3);//{5: "a", 6: "b", 7: "c", a: 5, b: 6, c: 7}
24 console.log(En4);//{0: "b", 1: "c", a: 0, b: 0, c: 1}

这里重点来看下En4,在注释中就表示不建议这样做,知悉看打印出来的值你会发现找不到“{0:a}”这个原本应该存在的模式,这是因为TypeScript归根到底还是js,而其枚举还是依据类数组来实现的,如果在中间的成员上实现初识化的话就会出现两种情况:初识化值小于当前成员对应的位置时就会覆盖前面的成员的,并且后面跟着的成员会连续覆盖,直到覆盖所有位置差;还有一种情况就是初识化值大于当前成员的对应位置时,那么中间就会发生成员空缺的现象,比如如果对枚举对象进行遍历就会出现中间没有成员的现象。

三、字符串枚举

字符串枚举的概念很简单,但是有细微的 运行时的差别。 在一个字符串枚举里,每个成员都必须用字符串字面量,或另外一个字符串枚举成员进行初始化。

1 enum Direction {
2     Up = "UP",
3     Down = "DOWN",
4     Left = "LEFT",
5     Right = "RIGHT",
6 }
7 console.log(Direction);//{Up: "UP", Down: "DOWN", Left: "LEFT", Right: "RIGHT"}

可以使用另一个成员初识化:

1 enum Direction {
2     Up = "UP",
3     Down = Up,//使用另一个成员初识化
4     Left = "LEFT",
5     Right = "RIGHT",
6 }

四、异构枚举

所谓异构枚举就是数字枚举与字符串枚举混合在一起,这显然不是啥好想法,特别不建议这么做。

1 enum En5 {
2     a = 0,
3     b = "YES",
4     c = 3,//如果这里不进行数字枚举初识化会报错,要么字符串枚举后面就都手动赋值字符串
5     d
6 }
7 console.log(En5);//{0: "a", 3: "c", 4: "d", a: 0, b: "YES", c: 3, d: 4}

五、计算的和常量成员

5.1常量枚举成员:

没有初始化器,被默认赋值的第一个枚举成员为常量,其值为0。(这种解析进一步明确TypeScript枚举的特性)

// E.X is constant:
enum E { X }

不带初始化器,但是该成员前面一个成员是数字常量,该成员为一个常量,其值为前面一个成员的数字常量+1。这也就意味着所有被默认为数值枚举成员都是常量。

1 //E1、E2的所有成员都是常量
2 enum E1 { X, Y, Z }
3 enum E2 {
4     A = 1, B, C
5 }

5.2常量枚举表达式:

一个枚举表达式字面量,这就是说字面量表达式声明的枚举为一个常量枚举表达式,其不可被重写。

 1 enum En2 {
 2     a = -5,//使用初始化器初始化
 3     b,
 4     c
 5 }
 6 enum En3 { //En3的字面量表达式{a,b,c}也是En2的字面量表达式,这个表达式为一个常量,所以b=‘b‘会报错
 7     a = -5,
 8     b = ‘b‘,//这里修改了枚举表达式字面量内部一个成员的值,这是不允许的
 9     c
10  }
11 enum En4 { //这个不会报错
12     a = -5,
13     b,
14     c
15 }

一个对之前定义的常量枚举成员的引用为一个常量枚举表达式,这就意味着不能使用枚举成员引用修改引用成员。

1 enum En2 {
2     a = -5,//使用初始化器初始化
3     b,
4     c
5 }
6 console.log(En2[-5]);//枚举成员的引用获取对应枚举成员
7 //En2[-5]; = ‘c‘;//这是不允许的,可以获取枚举成员的值,但不能重写引用指向,因为它是一个常量

一元运算符和二元运算符应用在枚举表达式中也都是常量枚举表达式,(+-~)(+-*/%<<>>>>>&|^), 若常数枚举表达式求值后为 NaN或 Infinity,则会在编译阶段报错。

1 enum FileAccess {
2     // constant members常量成员
3     None,
4     Read    = 1 << 1,
5     Write   = 1 << 2,
6     ReadWrite  = Read | Write,
7     // computed member计算成员
8     G = "123".length
9 }

六、运行时的枚举与反向映射

在前面就有提到TypeScript的枚举是基于类数组来实现的,当然这部绝对,比如字符串枚举就是一个纯粹的对象。如果像是数字枚举的话,就可以实现反向映射。

1 enum Enum {
2     A
3 }
4 let a = Enum.A;
5 let nameOfA = Enum[a]; // "A"

在前面示例中打印的值来看或许你已经猜到了什么,这里来看看运行时的枚举代码到底是什么?

1 var Enum;
2 (function (Enum) {
3     Enum[Enum["A"] = 0] = "A";
4 })(Enum || (Enum = {}));
5 var a = Enum.A;
6 var nameOfA = Enum[a]; // "A"

首先,它本身是一个对象,这里则是一个类数组,它包含了正向映射( name -> value)和反向映射( value -> name)。 引用枚举成员总会生成为对属性访问并且永远也不会内联代码。要注意的是 不会为字符串枚举成员生成反向映射。

七、常量枚举与外部枚举

常量枚举简单的说就是给引用常量的部分直接给定一个确定的值,而不是转码的后的对象属性引用表达式。来看下面这两段代码以及编译代码:

1 //常量枚举
2 const enum Enum {
3     A = 1,
4     B = A * 2
5 }
6 console.log(Enum.A);
7 //编译后的代码
8 console.log(1 /* A */);

在TypeScript中常量枚举如果没有被使用的话不会被编译,而使用部分只会直接使用确定的值。

 1 //常量枚举
 2 const enum Directions {
 3     Up,
 4     Down,
 5     Left,
 6     Right
 7 }
 8 let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]
 9 //编译后的代码
10 var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

外部枚举:

瞅了半天官方文档还是没瞅明白,哪位大佬弄明白的请留个言,感激不尽!

原文地址:https://www.cnblogs.com/ZheOneAndOnly/p/11780554.html

时间: 2024-10-08 15:45:50

TypeScript入门七:TypeScript的枚举的相关文章

【第11篇】最全的中文TypeScript入门指南详解案例教程与代码案例

一.最全的中文TypeScript入门指南详解案例教程           文档下载 二.代码案例 源代码下载 手机微信扫一扫有惊喜... ================================================================================================================= 1.详细安装文章请看 http://blog.csdn.net/jilongliang/article/details/219429

TypeScript入门指南(JavaScript的超集)

TypeScript入门指南(JavaScript的超集) 你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析,显式接口.TypeScript是微软的开源项目,它是由C#之父Anders Hejlsberg发起的. 为什么会有 TypeScript? JavaScript 只是一个脚本语言,并非真正设计用于开发大型 Web 应用,JavaScript 没有提供类和模块等概念,对于一个真正的应用开发,TypeSc

TypeScript入门五:TypeScript的接口

TypeScript接口的基本使用 TypeScript函数类型接口 TypeScript可索引类型接口 TypeScript类类型接口 TypeScript接口与继承 一.TypeScript接口的基本使用 1.1定义TypeScript接口的指令(interface) 接口让我们想到的第一个短语就是(API).比如日常我们所说的调用某某程序的API一般都是跨应用的接口,如别的网站的或者APP的接口:还有我们每天都是用的编程语言的指令和内置的方法及属性,这些可以叫做编程语言的接口:还有令我们既

TypeScript入门三:TypeScript函数类型

TypeScript函数类型 TypeScript函数的参数 TypeScript函数的this与箭头函数 TypeScript函数重载 一.TypeScript函数类型 在上一篇博客中已经对声明TypeScript类型变量已经做了初步的解析,这里先回顾以下: 1 //声明函数 2 function add1(x:number,y:number):number{ 3 return x+y; 4 } 5 6 let add2 = function(x:number,y:number):number

TypeScript 入门指南

你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销:增加一个完整的类结构,使之更新是传统的面向对象语言. 为什么会有 TypeScript? JavaScript 只是一个脚本语言,并非设计用于开发大型 Web 应用,Jav

TypeScript入门指南

原文转自:http://www.oschina.net/question/12_72250 TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销:增加一个完整的类结构,使之更新是传统的面向对象语言. 为什么会有 TypeScript? JavaScript 只是

TypeScript入门教程

TypeScript是什么 TypeScript是JavaScript的一个超集 TypeScript需要编译为JavaScript才能运行(语法糖) TypeScript提供了类型系统,规范类似Java TypeScript提供了ES6的支持,也可以支持部分ES7草案的特性,不用担心TypeScript无法兼容目前主流的JavaScript解释器 环境安装 安装node.js https://nodejs.org/en/download/ 安装TypeScript包,这就是TS的编译器 npm

typescript 入门 01

安装 typescript cmd: npm  install -g typescript 安装成功以后  就可以使用 tsc 命令   例如 tsc -V 查看当前typescript的版本 typescript文件 的运行 需要进行编译成为js 文件,然后通过node 运行js 文件 编译命令:tsc xxx.ts      运行命令 node xxx.js 原文地址:https://www.cnblogs.com/duanyiwen/p/11789242.html

VueJS + TypeScript 入门第一课

楔子 伴随着 Vue 新版本发布对 TypeScript 支持越来越好.当然值得在项目中使用优秀的技术栈. 学习要求背景知识 * NodeJs * NpmJs * VueJS * TypeScript 创建 VueJS - TypeScript 项目 使用官方推荐的脚手架 Vue Cli vue create VueJs-TypeScript // 项目名为 VueJs-TypeScript,另外创建过程中,请选 "Manually select features",后选中 TypeS