TypeScript Enum类型入门

// 不用枚举：直接写值，别人看不懂 200 啥意思
const successCode = 200;

// 用枚举：语义清晰，一看就懂
enum HttpStatus {
  Success = 200,
  Error = 500
}

// 显式赋值：每个成员指定数字
enum Weekday {
  Monday = 1,
  Tuesday = 2,
  Wednesday = 3
}

// 使用：直接通过 枚举名.成员名 取值
const today = Weekday.Monday;
console.log(today); // 输出 1

// 隐式递增：Left=0, Right=1, Top=2, Bottom=3
enum Direction {
  Left,
  Right,
  Top,
  Bottom
}

console.log(Direction.Right); // 输出 1

enum Weekday {
  Monday = 1
}

// 正向：名字 → 值
console.log(Weekday.Monday); // 1
// 反向：值 → 名字
console.log(Weekday[1]); // "Monday"

// 每个成员都要写字符串值
enum UserRole {
  Admin = "ADMIN",
  Editor = "EDITOR",
  Viewer = "VIEWER"
}

// 使用
const role = UserRole.Admin;
console.log(role); // 输出 "ADMIN"

// 字符串枚举没有反向映射，下面代码会报错
console.log(UserRole["ADMIN"]); // undefined

// 常量枚举
const enum Color {
  Red = "RED",
  Green = "GREEN"
}

// 使用
const myColor = Color.Green;

// 定义状态码枚举
enum ApiStatus {
  Success = 200,
  NoAuth = 401,
  ServerError = 500
}

// 接口请求后判断状态
function handleResult(code: ApiStatus) {
  switch(code) {
    case ApiStatus.Success:
      console.log("请求成功");
      break;
    case ApiStatus.NoAuth:
      console.log("请先登录");
      break;
    case ApiStatus.ServerError:
      console.log("服务器出错了");
      break;
  }
}

// 调用函数
handleResult(ApiStatus.NoAuth); // 输出 "请先登录"

// 性别枚举
enum Gender {
  Male = "MALE",
  Female = "FEMALE"
}

// 转成前端框架需要的选项格式
const genderOptions = [
  { label: "男", value: Gender.Male },
  { label: "女", value: Gender.Female }
];

// Vue 里用
// <el-select v-model="gender">
//   <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.value" />
// </el-select>