2.3.1 枚举类型 -TypeScript和Vue从入门到精通(一)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(一)

2.3.1 枚举类型

在TypeScript中，枚举（Enumerations，简称Enums）是一种强大的数据类型，它允许我们定义一组命名的常量集合。枚举类型使得代码更加清晰、易于理解和维护，特别是在处理具有固定集合的值的场景时，如星期、月份、状态码等。通过使用枚举，我们可以避免在代码中直接使用硬编码的字符串或数字，从而提高代码的可读性和可维护性。

2.3.1.1 枚举的基础

在TypeScript中定义枚举非常简单，使用enum关键字后跟枚举名称和枚举成员。枚举成员可以是常量值，也可以是计算得出的值。默认情况下，枚举成员从0开始递增，但也可以手动指定成员的值。

基本枚举示例：

enum Days {
    Sunday,
    Monday,
    Tuesday,
    Wednesday,
    Thursday,
    Friday,
    Saturday
}
console.log(Days.Monday); // 输出: 1

在上面的例子中，Days是一个枚举类型，它包含了从Sunday到Saturday的七天。由于我们没有为Sunday指定值，所以它默认为0，之后的每个成员都自动递增。

2.3.1.2 手动指定枚举成员的值

我们也可以为枚举成员指定具体的值，这并不影响后续成员的递增规则，除非明确指定。

指定值的枚举示例：

enum Color {
    Red = 1,
    Green,
    Blue = 10,
    Yellow
}
console.log(Color.Red); // 输出: 1
console.log(Color.Green); // 输出: 2，紧随Red之后递增
console.log(Color.Blue); // 输出: 10，直接指定
console.log(Color.Yellow); // 输出: 11，紧随Blue之后递增

在这个例子中，Color枚举中Red被显式地赋值为1，Green则自动递增为2。Blue被显式地赋值为10，而Yellow则继续递增，成为11。

2.3.1.3 常量枚举与计算枚举

常量枚举：在编译阶段会被完全移除，并且枚举成员会被替换为它们的值。这有助于减少最终代码的体积，但要求枚举成员在编译时必须是常量表达式。

常量枚举示例：

const enum Directions {
    Up,
    Down,
    Left,
    Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
// 编译后，directions数组将直接包含数字[0, 1, 2, 3]，没有Directions枚举的痕迹

计算枚举：允许成员值是计算得出的，但这意味着枚举不会在编译时被完全移除，因为计算过程需要保留。

计算枚举示例：

enum FileAccess {
    None,
    Read    = 1 << 1,
    Write   = 1 << 2,
    ReadWrite  = Read | Write,
    // 'G' in the name so we go beyond 26 values (since enums members are converted to strings)
    G = "123".length
}
console.log(FileAccess.ReadWrite); // 输出: 6，即二进制110

在这个例子中，Read和Write是通过位运算计算得出的值，而ReadWrite则是这两个值的位或操作结果。此外，G是一个通过表达式计算得出的值，展示了枚举成员可以包含非数字类型的值（尽管这种情况较少见且通常不推荐）。

2.3.1.4 枚举成员的类型与反向映射

枚举成员具有两种类型：数字枚举和字符串枚举。数字枚举的成员是数值类型，而字符串枚举的成员是字符串类型。枚举还有一个特性是反向映射，即枚举成员的值可以映射回其名称。

字符串枚举示例及反向映射：

enum DirectionString {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT"
}
function printDirection(dir: DirectionString) {
    console.log(DirectionString[dir]); // 使用反向映射
}
printDirection(DirectionString.Up); // 输出: "UP"

在字符串枚举中，每个成员都有一个字符串值，并且TypeScript会自动为每个值创建一个到成员名的反向映射。这使得我们可以从值回溯到成员名，这在某些情况下非常有用。

2.3.1.5 枚举的联合类型与类型守卫

枚举成员可以与其他类型一起使用，形成联合类型。同时，TypeScript提供了类型守卫来检查一个值是否是枚举的一个成员。

枚举联合类型与类型守卫示例：

enum FileType {
    Text,
    Image,
    Video
}
function handleFile(file: FileType | string) {
    if (typeof file === "number") {
        // 实际上，由于我们控制了类型，这里的检查可能不是必需的
        // 但为了演示类型守卫，我们假设有可能接收到一个数字
        console.log(`Handling a numeric file type, but this is unlikely: ${file}`);
    } else if (typeof file === "string") {
        console.log(`Handling a string file type: ${file}`);
    } else if (FileType[file] !== undefined) {
        // 类型守卫：检查file是否是FileType枚举的一个成员
        console.log(`Handling a FileType enum: ${FileType[file]}`);
    } else {
        console.log("Unknown file type");
    }
}
handleFile(FileType.Text); // 输出: Handling a FileType enum: Text
handleFile("CustomFileType"); // 输出: Handling a string file type: CustomFileType

注意：在上面的handleFile函数中，对于FileType枚举的检查实际上并不需要typeof file === "number"的分支，因为我们已经控制了file参数的类型。这里主要是为了演示如何在更复杂的场景下使用类型守卫。

2.3.1.6 枚举与Vue的结合使用

在Vue项目中，枚举类型可以用于多种场景，如组件的props定义、组件的状态管理、以及Vuex的mutations和actions等。使用枚举可以使Vue项目的代码更加清晰和易于维护。

Vue中使用枚举的示例：

// 定义一个Vue组件，使用枚举作为props的类型
<template>
  <div>
    <p>Today is {{ dayName }}</p>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Days } from './enums'; // 假设Days枚举定义在enums.ts文件中
export default defineComponent({
  props: {
    day: {
      type: Number as () => Days, // 指定props的类型为Days枚举
      required: true
    }
  },
  computed: {
    dayName(): string {
      return Days[this.day]; // 使用反向映射获取枚举成员的名称
    }
  }
});
</script>

在这个Vue组件中，我们定义了一个名为day的prop，其类型为Days枚举。通过计算属性dayName，我们可以利用枚举的反向映射功能，将数字类型的day转换为对应的星期名称字符串。

综上所述，枚举类型是TypeScript中一个非常有用的特性，它能够帮助我们定义和管理一组具有固定集合的值的常量，从而提高代码的可读性、可维护性和安全性。在Vue项目中，合理使用枚举类型可以进一步提升项目的质量和开发效率。