TS中的enum类型——常用场景

枚举（ enum ）可以定义 ⼀组命名常量 ，它能增强代码的可读性，也让代码更好维护。

1.数字枚举 

1.1默认数字递增

没有定义enum属性的值默认从0开始递增

enum Status {
    up,        // 0
    dowm,      // 1
    right,     // 2
    left       // 3
}

1.2自定义数字递增

字定义enum属性的值默认从设置的数字开始递增

enum Status {
    up=8,      // 8
    dowm,      // 9
    right,     // 10
    left       // 11
}

2.字符串枚举

枚举成员的值是字符串

enum Status {
    up = 'up',      
    dowm = 'dowm',      
    right = 'right,     
    left = 'left'      
}

3.常量枚举

官⽅描述：常量枚举是⼀种特殊枚举类型，它使⽤ const 关键字定义，在编译时会被

内联 ， 避免 ⽣成⼀些 额外 的代码。

---

何为 编译时内联 ？

所谓“内联”其实就是 TypeScript 在编译时，会将枚举成员引⽤替换为它们的实际值，

⽽不是⽣成额外的枚举对象。这可以减少⽣成的 JavaScript 代码量，并提⾼运⾏时性

能。

使⽤普通枚举的 TypeScript 代码如下：

enum Directions {
 Up,
 Down,
 Left,
 Right
}
let x = Directions.Up;

编译后⽣成的 JavaScript 代码量较⼤ ：

"use strict";
var Directions;
(function (Directions) {
 Directions[Directions["Up"] = 0] = "Up";
 Directions[Directions["Down"] = 1] = "Down";
 Directions[Directions["Left"] = 2] = "Left";
 Directions[Directions["Right"] = 3] = "Right";
})(Directions || (Directions = {}));
let x = Directions.Up;

使⽤常量枚举的 TypeScript 代码如下：

const enum Directions {
 Up,
 Down,
 Left,
 Right
}
let x = Directions.Up;

编译后⽣成的 JavaScript 代码量较⼩：

"use strict";
let x = 0 /* Directions.Up */;

使用场景:

对后端传来的某一个值存在多种状态进行不同状态进行枚举

<script setup lang="ts">
import { ref } from "vue";
// 多状态定义
enum Status {
    up,        // 0
    dowm,      // 1
    right,     // 2
    left       // 3
}
const stausvalue = ref(0)//假设为后端传来的值(存在多种状态)
</script>

<template>
  // 假设后端的值变化
    <button @click="stausvalue = Status.up">上</button>
    <button @click="stausvalue = Status.dowm">下</button>
    <button @click="stausvalue = Status.left">左</button>
    <button @click="stausvalue = Status.right">右</button>
    <!-- 利用enum进行条件渲染 -->
    <p v-if="stausvalue === Status.up">上</p>
    <p v-if="stausvalue === Status.dowm">下</p>
    <p v-if="stausvalue === Status.right">又</p>
    <p v-if="stausvalue === Status.left">左</p>

</template>