TypeScript学习实战-4-枚举类型(一)

这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战

前言

如今 TypeScript 应用特别广了,如果不学习, 总感觉跟不上大厂的步伐了. 学习 TypeScript(当然也是可选的). 这里记录学习 TypeScript 的过程, 收录在 TypeScript 实战专栏

回顾上一篇: 学习了 TS 的初始化, 安装, 创建 TS 项目, 编译运行以及初识 TS 类型约束的世界: TypeScript 原始数据类型 各个击破

本文来学习较 JavaScript 没有而 TS 的类型: 枚举

1. Typescript 文档

Typescript 官网地址: www.typescriptlang.org/zh/

Typescript 文档地址：Basic Types

TypeScript 枚举类型

在 JavaScript 中我们对一个词比较熟悉, 可枚举性的属性. 当那些“可枚举” 标志设置为 true 时的属性成为 可枚举属性. 而这里要学习的是 TypeScript 的一种类型-枚举类型

枚举类型定义

当我们要声明一个变量有几种可能的取值时, 这时就可以定义其为枚举类型。 枚举类型 用于声明一组命名的常数, 使用枚举可以清晰地表达意图或创建一组有区别的用例。

枚举的本质

我们可以把枚举类型看成一个 JavaScript 对象, 由于枚举其特殊的构造, 导致其拥有正反向同时映射的特性。每个枚举成员的值都是不同的

枚举类型分类

TypeScript 支持数字的和基于字符串的枚举。

1. 数字枚举
2. 字符串枚举
3. 常量枚举
4. 异构枚举
5. 联合枚举与枚举成员的类型

枚举代码示例:

数字枚举

// 不给初始化
/// 这时 UP 将从0开始, 依次类推
enum Direction {
  Up,
  Down,
  Left,
  Right,
}

// 这时给枚举初始化一个 1
/// 这时 UP 将从 1 开始, 依次类推 Down 为 2

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}

使用枚举

通过枚举的属性来访问枚举成员, 和枚举的名字来访问枚举类型：

enum Response {
  No = 0,
  Yes = 1,
}

function respond(recipient: string, message: Response): void {
  // ...
}

respond('Princess Caroline', Response.Yes)

Vue3 学习实战系列更文:

1. Vue3 源码学习-工具函数 utils(二)
2. Vue3-初体验,
3. Vue3-生命周期 和 setup()函数,
4. Vue3-computed & watch,
5. Vue3-Teleport 改变组件挂载的根节点,
6. Vue3-Suspense 处理异步请求,
7. Vue3-defAsyncComponent 异步组件(新增),
8. Vue3-fragments (新增),
9. Vue3-v-model (非兼容),

• Vue3 源码仓库 vue-next : github.com/vuejs/vue-n…
• Vue3.x 官方中文文档: v3.cn.vuejs.org

2. TypeScript 系列:

   • TypeScript 初识-进入 TS 类型约束的世界
   • TypeScript 原始类型
   • TypeScript 其他类型