TypeScript笔记——枚举

枚举是一种 有穷序列 的集合，在TypeScript中，枚举类型是一种原始类型，它通过enum关键字来定义。枚举类型由零个或多个枚举成员构成，每个枚举成员都是一个命名的常量。
数值型枚举

数值型枚举是最常用的枚举类型，每个数值型枚举成员都表示一个具体的数字。
enum Color {
  red = 1,
  blue = 2,
  yellow = 4,
  black = 7
数值型枚举语法糖
如果在定义枚举时没有设置枚举成员的值，那么TypeScript将自动计算枚举成员的值
第一个枚举成员的值为0，其后每个枚举成员的值等于前一个枚举成员的值加1
enum Color {
  red,	// 0
  blue,	// 1
  yellow,	// 2
  black, // 3
可以为一个或多个枚举成员设置初始值
enum Color {
  red = 1,	// 1
  blue,	// 2
  yellow = 4,	// 4
  black, // 5
数值型枚举与number类型
数值型枚举是number类型的子类型，因此允许将数值型枚举类型赋值给number类型
enum Color {
  red,	// 0
  blue,	// 1
  yellow,	// 2
  black, // 3
const color: number = Color.red
注意：number类型也能够赋值给枚举类型，即使number类型的值不在枚举成员值的列表中也不会产生错误
enum Color {
  red,	// 0
  blue,	// 1
  yellow,	// 2
  black, // 3
const color1: Color = 0 // Color.red
const color2: Color = 10; // 不会产生错误
枚举成员映射
对于数值型枚举，不但可以通过枚举成员名来获取枚举成员值，也可以反过来通过枚举成员值去获取枚举成员名
enum Color {
  red,	// 0
  blue,	// 1
  yellow,	// 2
  black, // 3
Color.red // 1
Color[Color.red] // 'red'
Color[0] // 'red'
字符串枚举
在字符串枚举中，枚举成员的值为字符串，成员必须初始化，且没有自增长的行为。
  enum Color {
    red = 'red',
    blue = 'blue',
    yellow = 'yellow',
    black = 'black'
字符串枚举与string类型
字符串枚举是string类型的子类型，因此允许将字符串枚举类型赋值给string类型
  enum Color {
    red = 'red',
    blue = 'blue',
    yellow = 'yellow',
    black = 'black'
const color: string = Color.red
注意：不允许将string类型赋值给字符串枚举类型
异构型枚举
枚举中同时定义数值型枚举成员和字符串枚举成员（实际项目不推荐使用）
enum Color {
  red = 0,
  blue = 'blue'
const枚举类型
const枚举类型将在编译阶段被完全删除，并且在使用了const枚举类型的地方会直接将const枚举成员的值内联到代码中
// const枚举类型
const enum Color {
  red,	// 0
  blue,	// 1
  yellow,	// 2
  black, // 3
const colors = [
  Color.red,
  Color.blue,
  Color.yellow,
  Color.balc
/********* const枚举类型 编译成JS后的代码 ********/
"use strict";
const colors = [
    0 /* red */,
    1 /* blue */,
    2 /* yellow */,
    3 /* black */
// 枚举类型
enum Color {
  red,	// 0
  blue,	// 1
  yellow,	// 2
  black, // 3
const colors = [
  Color.red,
  Color.blue,
  Color.yellow,
  Color.black
/********* 枚举类型 编译成JS后的代码 ********/
"use strict";
var Color;
(function (Color) {
    Color[Color["red"] = 0] = "red";
    Color[Color["blue"] = 1] = "blue";
    Color[Color["yellow"] = 2] = "yellow";
    Color[Color["black"] = 3] = "black";
})(Color || (Color = {}));
const colors = [
    Color.red,
    Color.blue,
    Color.yellow,
    Color.black
枚举：是一个双向键值对（可以通过值获取值，也可以通过值获取建），会入侵编译后的js代码
常量枚举：只能通过建获取值
使用建议：如果不需要通过索引获取键值，建议用常量枚举
vue3中使用枚举示例
// statusEnum.ts
export enum ApplyStatus {
    checkPending,  // 待审核
    success,    // 审核成功
    refuse  // 审核拒绝
// 获取枚举对应的 name
export function getApplyStatus(type: Status) {
    let result = '--'
    switch (type) {
        case Status.checkPending:
            result = '待审核'
            break
        case Status.success:
            result = '审核成功'
            break
        case Status.refuse:
            result = '审核拒绝'
            break
    return result
// vue
<template>
    <select>
        <option v-for="item in list"
          :key="item.value"
          :key="item.value">
          {{item.lable}}
       </option>
    </select>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { ApplyStatus, getApplyStatus} from './statusEnum.ts'
export default defineComponent({
      setup() {
        const list = [
          { value: ApplyStatus.checkPending, lable: getApplyStatus(ApplyStatus.checkPending) },
          { value: ApplyStatus.success, lable: getApplyStatus(ApplyStatus.success) },
          { value: ApplyStatus.refuse, lable: getApplyStatus(ApplyStatus.refuse) },
        return { list }
</script>
使用好处：