vue + ts之旅

# 枚举的使用

# 1. 我们需要创建一个枚举的文件，我们可以在根目录下创建一个名为enum.ts文件，然后在该文件中使用枚举

    export  MyEnum {
        n1 = '刘德华', 
        n2 = '张学友', 
        n3 = '郭富城'
    }

1
2
3
4
5

# 2. 然后在vue组件中使用

<template>
  <div>MyEnum.n1</div>
  <div>MyEnum.n2</div>
  <div>MyEnum.n3</div>
</template>
<script setup lang="ts">
import { MyEnum } from '@/enum'
</script>

1
2
3
4
5
6
7
8

# 3.我们可以把枚举赋值给c

let c:MyMenyu = MyMenyu.n1
console.log(c) // 输入 刘德华

1
2

# 4. 枚举类型

# 数字枚举

ts
enum Type {
  red,
  blue,
  green
}

## 增长枚举
enum Type {
    red = 1,
    blue,
    green
}

1
2
3
4
5
6
7
8
9
10
11
12
13

上面枚举说明，red为0，ble为1，green为2

# 字符串枚举

每个成员都必须用字符串字面量，或另外一个字符串枚举成员进行初始化。

enum Types{
   Red = 'red',
   Green = 'green',
   BLue = 'blue'

1
2
3
4
5

# 异构枚举

枚举可以混合物字符串和数字成员

enum Types{
   No = "No",
   Yes = 1,
}

1
2
3
4

# 接口枚举

   enum Types {
      yyds,
      dddd
   }
   interface A {
      red:Types.yyds
   }
 
   let obj:A = {
      red:Types.yyds
   }

1
2
3
4
5
6
7
8
9
10
11

# 反向映射

它包含了正向映射（ name -> value）和反向映射（ value -> name）要注意的是不会为字符串枚举成员生成反向映射。

enum Enum {
   fall
}
let a = Enum.fall;
console.log(a); //0
let nameOfA = Enum[a]; 
console.log(nameOfA); //fall

1
2
3
4
5
6
7

# const 声明后是个对象

使用 const 枚举可以在编译后直接将枚举变量替换为相应的值，从而减少编译后的代码量和运行时的性能开销
const 声明的枚举会被编译成常量
普通声明的枚举编译完后是个对象

const enum Color {
    Red = 1,
    Green = 2,
    Blue = 3
}
//  直接使用枚举
let color: Color = Color.Red;
console.log(color); // 1

1
2
3
4
5
6
7
8

编译后的js代码

"use strict";
var color = 1 /* Red */;
console.log(color); // 1

1
2
3

需要注意的是，使用 const 枚举时不能包含计算成员和常量成员以外的成员，因为这些成员的值只有在运行时才能确定，无法在编译时替换为相应的值。此外，使用 const 枚举时也无法通过枚举值反向映射回枚举成员，因为枚举成员在编译后被完全移除了。

上次更新: 2023/04/25, 7:04:00

← composition API provide与inject的用法 →