TS—枚举Enum用法

这篇具有很好参考价值的文章主要介绍了TS—枚举Enum用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.概述

枚举用于定义数据集合,使用枚举可以定义一些带名字的常量,有普通枚举、字符串枚举和常量枚举等类型。

2.示例

  • 普通枚举:初始值默认为 0,其余的属性按顺序依次递增。
enum Color {
    Red,
    Blue,
    Green
} 
console.log(Color.Red);  //0
// const red:Color=Color.Red;
// console.log(red); 
复制代码

也可手动设置初始值(其余的属性依旧按顺序递增):

enum Color {
    Red=3,
    Blue,
    Green
}
console.log(Color.Red);  //3
复制代码
  • 字符串枚举:
enum Color {     
    Red='红色',
    Blue='蓝色',
    Green='绿色'
}
console.log(Color.Blue);  //蓝色
复制代码
  • 常量枚举:使用 const 关键字修饰的枚举
const enum Color {
    Red,
    Blue,
    Green
}
console.log(Color.Red,Color.Blue,Color.Green);  //0 1 2
复制代码

3.枚举的实际应用

//enum.ts
/** 登录状态 */
export enum LoginStatus {  //普通枚举
  Login,
  Register,
}
//LoginStatus[0]---'Login'

//index.vue
<template>
      <el-button color="#4A52FF" class="w-284px h-54px rounded-6px text-20px font-light" type="primary"
        @click="userLogin">
        登录
      </el-button>
</template>

<script setup lang='ts'>
import { LoginStatus } from '~/types';
</script>
复制代码

可修改为:

//enum.ts
/** 登录状态 */
export enum LoginStatus {   //中文的字符串枚举
  '登录',
  '注册',
}
//LoginStatus['登录']---0
//LoginStatus[0]---登录

//index.vue
<template>
      <el-button color="#4A52FF" class="w-284px h-54px rounded-6px text-20px font-light" type="primary"
        @click="userLogin">
        {{ LoginStatus[0] }}   //登录
      </el-button>
</template>

<script setup lang='ts'>
import { LoginStatus } from '~/types';
</script>
复制代码

英文的普通枚举只有一种作用:只能通过数组下标读出枚举里的属性,不便于代码的理解。

LoginStatus[0]---'Login'

中文的字符串枚举有两种作用:

1.当用中文形式时,可以显示出对象属性的索引。LoginStatus['登录']---0

2.当用数组下标形式时,可以显示出中文,以便提高代码的可读性与理解。LoginStatus[0]---登录

所以,项目中建议使用中文的字符串枚举。
参考:https://juejin.cn/post/7137982601481945102
 文章来源地址https://www.toymoban.com/news/detail-602240.html

到了这里,关于TS—枚举Enum用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 虚幻C++中的细节之枚举类型(enum)

    虚幻引擎中的代码部分实现了一套反射机制,为c++代码带了更多方便的特性。本篇文章将会着眼于其中更加细节的部分——虚幻中的enum。 在虚幻风格的代码中,我们经常能使用这样的方法来创建枚举类型: 似乎有一些c++的影子,但又好像有一些不一样的部分。它有基本c++的

    2024年02月02日
    浏览(35)
  • 自定义类型之枚举类型(enum)和联合体类型(union)

    目录   枚举类型(enum) 什么是枚举类型? 枚举类型的使用 枚举类型的优势 枚举类型的应用场景 总结 联合体类型(union) 什么是联合体? 联合体的应用场景 联合体的注意事项 总结 枚举类型是C语言中一种非常有用的数据类型,它允许程序员定义一组命名的常量。枚举类型

    2024年02月20日
    浏览(42)
  • Rust 数据类型 之 类C枚举 c-like enum

    目录 枚举类型 enum 定义和声明 例1:Color 枚举 例2:Direction 枚举 例3:Weekday 枚举 类C枚举 C-like 打印输出 强制转成整数 例1:Weekday 枚举 例2:HttpStatus 枚举 例3:Color 枚举 模式匹配 match 表达式 枚举方法 枚举类型是一种用于表示一组有限数量相互关联的离散型数据,这些值可

    2024年02月16日
    浏览(38)
  • Vue使用ts的枚举类型

    vue项目中要使用ts的枚举类型需要为script标签的lang属性添加ts属性值  首先要声明一下(我这里是声明了一个名称一个颜色): 接下来是页面中的标签使用(用的是element表格的组件): 效果: 

    2024年02月09日
    浏览(61)
  • TypeScript【enum 枚举】

    导语 在 TypeScript 中,新增了很多具有特性的一些数据类型处理方法, enum 【枚举】 就是其中,很具有代表性的一种,所以本章节就来聊聊 在 TypeScript 中如何去运用 enum 【枚举】 。 枚举的 概念 : 枚举(Enum)类型 用于取值被限定在一定范围内的场景 ,比如一周只能有七天

    2024年02月14日
    浏览(35)
  • C++枚举解读(enum)

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 对于开发C++来说,枚举是一个几乎必然用到的功能。当然今天要讲的枚举肯定不是平常漫不经心的使用,而是从里到外地深扒它,逐渐揭开它神秘地面纱,发现一些未曾注意到地东西。 枚举(enumeration)类

    2024年02月13日
    浏览(41)
  • 【C++】枚举enum使用详解

    目录 一.什么是枚举enum(WHAT) 二.使用枚举enum的场景(WHEN and WHERE) 三.如何使用枚举enum(HOW) 1)枚举的定义 2)枚举的初始化 3)指定枚举类型  4)声明枚举对象 5)枚举对象赋值问题 6)枚举的取值范围 四.枚举enum的应用 枚举(enumeration)和类相似,能够定义一种新的数据类型,不同的

    2024年02月15日
    浏览(38)
  • C语言中enum(枚举)详解

    enum 是 enumerate(列举,枚举)一词的缩写,是 C 语言中的一种 常量 ,被称为 enumeration constant 。 enum 提供了一种很方便的方法来将值和名称关联起来,是 #define 的一种替代方法。 enum 可以看作是一种特殊的数组,是 常量组成的列表 ,而且这个常量只能是整数型。 所以如果是

    2024年02月13日
    浏览(34)
  • ffmpeg enum AVChannel枚举解析

    AVChannel枚举是在2022-12-20的提交中添加的,对应的版本号是5.1. 这个提交的描述是\\\"avutil/channel_layout: add AVChannel enum and related functions\\\"。 AVChannel 是一个枚举类型,用于表示音频数据的各个声道。在音频数据中,一个“声道”是一个独立的音频信号,它可以被独立处理和播放。例如

    2024年02月11日
    浏览(29)
  • C语言学习笔记:枚举(enum)

    ✨博文作者:烟雨孤舟 💖 喜欢的可以 点赞 收藏 关注哦~~ ✍️ 作者简介: 一个热爱大数据的学习者 ✍️ 笔记简介:作为大数据爱好者,以下是个人总结的学习笔记,如有错误,请多多指教! 目录 简介 枚举定义 枚举变量的定义 枚举的应用 枚举enum是英文enumerate的缩写,列

    2024年02月09日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包