TS中的枚举类型

众所周知，JavaScript 语言本身是不支持枚举的，只能拿对象来模拟伪枚举，TypeScript 帮助我们解决了这一痛点！

1. 什么是枚举？

枚举是一种类型，它是值的有限集合，如果值定义为这个类型则该值是可以列出（或称可枚举）的。打个比方，客人来你家做客感觉口渴了，你只给他三种选择：矿泉水、可乐、雪碧，客人只能在矿泉水、可乐、雪碧三个里面挑一个，这个场景就是典型的枚举。

2. TS中的枚举

TypeScript 支持数字的和基于字符串的枚举。使用枚举我们可以定义一些带名字的常量。使用枚举可以清晰地表达意图或创建一组有区别的用例。

并且TS中的枚举既可以用做类型，又可以用做值！！！

2.1 数字枚举

enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}

如上，我们定义了一个数字枚举， Up使用初始化为 1。其余的成员会从 1 开始自动增长。换句话说， Direction.Up 的值为 1， Down为 2， Left为 3， Right为 4。

我们还可以完全不使用初始化器：

enum Direction {
    Up,
    Down,
    Left,
    Right,
}

现在， Up的值为 0， Down的值为 1等等。当我们不在乎成员的值的时候，这种自增长的行为是很有用处的，但是要注意每个枚举成员的值都是不同的。

使用枚举很简单，通过枚举的属性来访问枚举成员，和枚举的名字来访问枚举类型：

enum Response {
    No,
    Yes
}

function respond(recipient: string, message: Response): void {
    // ...
}

respond("Princess Caroline", Response.Yes)

2.2 字符串枚举

字符串枚举的概念很简单，但是有细微的运行时的差别。在一个字符串枚举里，每个成员都必须用字符串字面量！

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT"
}

2.3 示例代码

# 不建议把枚举书写在 d.ts 的类型声明文件里
# 因为枚举的值经常需要在运行的时候使用, 而 d.ts 不参与运行
# 这里基于Vue3+TS的环境演示
# src目录下新建enums文件夹 \ index.ts

/**
* 支付方式枚举
*/
export enum PaymentMethod {
    /**
    * 微信支付 - 0
    */
    WeChatPay,
    /**
    * 支付宝 - 1
    */
    AliPay
}

# 组件内使用
# 自动生成可能会产生 import type { PaymentMethod } from ...
# 既做类型又做值使用的场景下, 去除type
 
<script lang="ts" setup>
import { ref } from 'vue'
import { PaymentMethod } from '@/enums'


# 这里用做类型
const paymentMethod = ref<PaymentMethod>()

</script>

<template>
    <div>
        # 这里用做值
        <button @click="paymentMethod = PaymentMethod.WeChatPay">微信支付</button>
        <button @click="paymentMethod = PaymentMethod.AliPay">支付宝</button>
    <div>
</template>

End----------------------

1. 什么是枚举？

2. TS中的枚举

2.1 数字枚举

2.2 字符串枚举

2.3 示例代码

猜你喜欢