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

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

### 2.3.1 枚举类型

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

#### 2.3.1.1 枚举的基础

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

**基本枚举示例**：

```typescript
enum Days {
    Sunday,
    Monday,
    Tuesday,
    Wednesday,
    Thursday,
    Friday,
    Saturday
}

console.log(Days.Monday); // 输出: 1
```

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

#### 2.3.1.2 手动指定枚举成员的值

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

**指定值的枚举示例**：

```typescript
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 常量枚举与计算枚举

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

**常量枚举示例**：

```typescript
const enum Directions {
    Up,
    Down,
    Left,
    Right
}

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

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

**计算枚举示例**：

```typescript
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 枚举成员的类型与反向映射

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

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

```typescript
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提供了类型守卫来检查一个值是否是枚举的一个成员。

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

```typescript
enum FileType {
    Text,
    Image,
    Video
}

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中使用枚举的示例**：

```typescript
// 定义一个Vue组件，使用枚举作为props的类型
<template>
  <div>
    <p>Today is {{ dayName }}</p>
  </div>
</template>

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项目中，合理使用枚举类型可以进一步提升项目的质量和开发效率。

该分类下的相关小册推荐：

vue项目构建基础入门与实战

Vue.js从入门到精通(一)

TypeScript和Vue从入门到精通(四)

TypeScript和Vue从入门到精通(三)

Vue原理与源码解析

移动端开发指南

TypeScript和Vue从入门到精通(二)

Vue面试指南

TypeScript和Vue从入门到精通(五)

Vue源码完全解析

Vue.js从入门到精通(二)

vuejs组件实例与底层原理精讲