首页 前端知识 TS中的枚举类型

TS中的枚举类型

2024-06-06 00:06:44 前端知识 前端哥 579 329 我要收藏

众所周知,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----------------------

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10945.html
标签
评论
发布的文章

基于Vue2的ofd文件预览

2024-06-10 11:06:28

网页快速置灰效果

2024-06-10 11:06:17

HTML5 CSS——Day6

2024-06-10 11:06:11

HTML5 CSS3面试题整理

2024-05-05 22:05:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!