Vue+TypeScript 枚举（Enum）的使用规范

在 TypeScript 中，枚举（Enum）的命名应遵循以下规范，这些规范结合了 TypeScript 官方建议和行业最佳实践：

枚举命名规范（TypeScript/Vue 项目）

  1. 基本命名规则：

    • 使用 PascalCase（大驼峰式） 命名枚举类型

    • 枚举成员使用 UPPER_SNAKE_CASE（全大写+下划线）

    • 避免使用复数形式（枚举表示一组相关常量，不是集合）

typescript

复制

下载

// ✅ 正确示例
export enum UserStatus {ACTIVE = "ACTIVE",INACTIVE = "INACTIVE",PENDING_VERIFICATION = "PENDING_VERIFICATION"
}export enum HttpStatusCode {OK = 200,BAD_REQUEST = 400,NOT_FOUND = 404
}

  1. 语义化命名原则：

    • 使用名词+状态/类型的组合

    • 包含明确的上下文信息

    • 避免通用名称（如 Status, Type）

typescript

复制

下载

// ✅ 推荐（包含上下文）
export enum OrderPaymentStatus {UNPAID = "UNPAID",PARTIALLY_PAID = "PARTIALLY_PAID",PAID = "PAID",REFUNDED = "REFUNDED"
}// ❌ 避免（过于通用）
export enum Status {ACTIVE = 1,DISABLED = 0
}

  1. 项目中的最佳实践：

    • 统一前缀（可选）：对相关枚举使用相同前缀

    • 文件组织：将枚举放在 /src/enums/ 目录

    • 导出规范：使用命名导出（非默认导出）

typescript

复制

下载

// /src/enums/user.enum.ts
export enum UserRole {ADMIN = "ADMIN",EDITOR = "EDITOR",VIEWER = "VIEWER"
}export enum UserAccountType {STANDARD = "STANDARD",PREMIUM = "PREMIUM",ENTERPRISE = "ENTERPRISE"
}

  1. Vue 组件中的使用规范：

    • 在 <script setup> 中直接导入

    • 模板中使用带命名空间的枚举值

vue

复制

下载

<script setup lang="ts">
import { UserRole } from '@/enums/user.enum'const currentRole = UserRole.ADMIN
</script><template><div v-if="currentRole === UserRole.ADMIN"><!-- 管理员内容 --></div>
</template>

  1. 字符串 vs 数字枚举：

    • 优先使用 字符串枚举（更好的可读性和调试体验）

    • 数字枚举仅用于性能关键场景或位运算

typescript

复制

下载

// ✅ 字符串枚举（推荐）
export enum Direction {UP = "UP",DOWN = "DOWN",LEFT = "LEFT",RIGHT = "RIGHT"
}// ⚠️ 数字枚举（特定场景使用）
export enum FilePermission {READ = 1,       // 0001WRITE = 2,      // 0010EXECUTE = 4     // 0100
}

  1. 常量枚举注意事项：

    • 使用 const enum 仅适用于性能敏感场景

    • 会完全移除运行时代码，影响调试

typescript

复制

下载

// ❌ 常规项目慎用（无法在运行时访问）
const enum SecretCodes {KEY1 = 0xABC,KEY2 = 0xDEF
}// ✅ 普通枚举更安全
export enum ApiKeys {CLIENT_ID = "AK_123456",SECRET = "SK_789012"
}

命名禁忌

  1. 避免的行为：

    typescript

    复制

    下载

    // ❌ 混合大小写
enum badNaming {mixedCase = 1  // 避免
}// ❌ 单数形式表示集合
enum Color {RED, GREEN, BLUE  // 应命名为 Colors?
}// ❌ 动词命名
enum ProcessData {  // 枚举应是状态描述START, STOP       // 而非动作
}

  2. 不要重复前缀：

    typescript

    复制

    下载

    // ❌ 冗余前缀
enum UserUserRole {  // User 重复USER_ADMIN,USER_EDITOR
}// ✅ 简洁命名
enum UserRole {ADMIN,EDITOR
}

项目一致性建议

  1. 在项目中建立 enums 目录集中管理

  2. 添加 ESLint 规则强制枚举命名规范：

    json

    复制

    下载

    // .eslintrc.json
{"rules": {"@typescript-eslint/naming-convention": ["error",{"selector": "enum","format": ["PascalCase"],"prefix": ["Enum"] // 可选前缀},{"selector": "enumMember","format": ["UPPER_CASE"]}]}
}

遵循这些规范能显著提升代码可读性和维护性，尤其在团队协作的 Vue+TypeScript 项目中。

在 Vue 3 + TypeScript 项目中，enums 目录的常规结构通常遵循模块化和可维护性原则。以下是典型的组织结构和最佳实践：

标准目录结构示例

text

复制

下载

src/
├── enums/                   # 枚举根目录
│   ├── system/              # 系统级枚举
│   │   ├── http.enum.ts     # HTTP 状态码枚举
│   │   ├── error-codes.enum.ts
│   │   └── index.ts         # 统一导出
│   │
│   ├── business/            # 业务相关枚举
│   │   ├── order-status.enum.ts
│   │   ├── payment-method.enum.ts
│   │   └── index.ts
│   │
│   ├── user/                # 用户相关枚举
│   │   ├── user-role.enum.ts
│   │   ├── user-status.enum.ts
│   │   └── index.ts
│   │
│   ├── ui/                  # UI/组件相关枚举
│   │   ├── button-variant.enum.ts
│   │   ├── notification-type.enum.ts
│   │   └── index.ts
│   │
│   ├── shared/              # 跨模块通用枚举
│   │   ├── date-formats.enum.ts
│   │   ├── country-codes.enum.ts
│   │   └── index.ts
│   │
│   └── index.ts             # 总入口文件（可选）

关键实践说明

  1. 分类组织

    • 按功能域分组：系统、业务、用户、UI 等

    • 按模块分组：适合大型项目（如 auth/, order/, product/）

    • 通用共享枚举：放在 shared/ 目录

  2. 文件命名规范

    • 使用 *.enum.ts 后缀明确文件类型

    • 短横线命名：order-status.enum.ts

    • 枚举名与文件名一致（PascalCase）：

      typescript

      复制

      下载

      // order-status.enum.ts
export enum OrderStatus {PENDING = "PENDING",PROCESSING = "PROCESSING",SHIPPED = "SHIPPED"
}

  3. 索引文件（index.ts）
    每个子目录使用 index.ts 统一导出：

    typescript

    复制

    下载

    // system/index.ts
export * from './http.enum';
export * from './error-codes.enum';

  4. 总入口文件（可选）

    typescript

    复制

    下载

    // enums/index.ts
export * as SystemEnums from './system';
export * as BusinessEnums from './business';
export * as UserEnums from './user';

使用场景示例

组件中使用

vue

复制

下载

<script setup lang="ts">
// 按需导入（推荐）
import { OrderStatus } from '@/enums/business/order-status.enum';// 通过索引文件导入
import { UserRole } from '@/enums/user';
</script>
统一导入方式

typescript

复制

下载

// 通过总入口导入（适合频繁使用的枚举）
import { SystemEnums, UserEnums } from '@/enums';console.log(SystemEnums.HttpStatus.OK); // 200
console.log(UserEnums.UserRole.ADMIN);  // "ADMIN"

高级组织结构

方案 1：按业务模块划分（推荐）

text

复制

下载

enums/
├── order/
│   ├── status.enum.ts
│   ├── payment-type.enum.ts
│   └── index.ts
├── product/
│   ├── category.enum.ts
│   ├── availability.enum.ts
│   └── index.ts
└── auth/├── permission.enum.ts└── index.ts
方案 2：按枚举类型划分

text

复制

下载

enums/
├── numeric/
│   ├── http-status.enum.ts
│   └── error-codes.enum.ts
├── string/
│   ├── user-roles.enum.ts
│   └── order-status.enum.ts
└── const/├── ui-variants.enum.ts└── icon-types.enum.ts

最佳实践建议

  1. 单一职责原则

    • 每个文件只包含 1 个主要枚举（相关辅助枚举可共存）

    • 避免创建包含多个无关枚举的 "global.enum.ts"

  2. 树摇优化

    typescript

    复制

    下载

    // 避免默认导出（影响 tree-shaking）
// ❌ 不推荐
export default enum Status { ... }// ✅ 推荐使用命名导出
export enum OrderStatus { ... }

  3. 常量枚举处理
    对于 const enum，创建单独目录或添加注释：

    typescript

    复制

    下载

    // system/const-enums/
// 或添加特殊后缀
export const enum CacheKeys {USER_PROFILE = "user_profile",APP_CONFIG = "app_config"
}

  4. 自动生成枚举
    如果使用 OpenAPI 等工具生成：

    text

    复制

    下载

    enums/
├── generated/  # 自动生成的枚举
│   ├── api-models.enum.ts
│   └── ...
└── manual/     # 手动维护的枚举├── ui.enum.ts└── ...

典型文件示例

用户角色枚举 (enums/user/user-role.enum.ts)

typescript

复制

下载

export enum UserRole {/** 系统管理员 */ADMIN = "ADMIN",/** 内容编辑者 */EDITOR = "EDITOR",/** 普通查看用户 */VIEWER = "VIEWER",/** 访客（未登录用户） */GUEST = "GUEST"
}// 类型导出（方便同时作为类型使用）
export type UserRoleType = `${UserRole}`;

HTTP 状态枚举 (enums/system/http.enum.ts)

typescript

复制

下载

export enum HttpStatus {OK = 200,CREATED = 201,BAD_REQUEST = 400,UNAUTHORIZED = 401,FORBIDDEN = 403,NOT_FOUND = 404,INTERNAL_SERVER_ERROR = 500
}// 状态码描述映射
export const HttpStatusMessage: Record<HttpStatus, string> = {[HttpStatus.OK]: "请求成功",[HttpStatus.CREATED]: "资源创建成功",// ...其他描述
};

目录结构选择建议

项目规模推荐结构特点
小型项目平铺结构 (enums/*.enum.ts)简单直接，无需嵌套
中型项目功能域分组平衡查找效率和组织结构
大型项目业务模块分组与功能模块对齐，便于跨团队协作
对接后端API混合结构（生成+手动）分离自动生成和自定义枚举

这种组织方式确保：

  1. 快速定位枚举定义

  2. 避免命名冲突

  3. 支持按需加载

  4. 保持类型系统完整性

  5. 便于维护和扩展

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/87350.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/87350.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

一个完整的LSTM风光发电预测与并网优化方案，包含数据处理、模型构建、训练优化、预测应用及系统集成实现细节

一个完整的LSTM风光发电预测与并网优化方案，包含数据处理、模型构建、训练优化、预测应用及系统集成实现细节

以下是一个完整的LSTM风光发电预测与并网优化方案，包含数据处理、模型构建、训练优化、预测应用及系统集成实现细节： 风光发电功率预测与并网优化系统 基于LSTM的时间序列预测与储能协同控制 第一部分：系统架构设计（1200字） 1.1 整体技术路线 #mermaid-svg-U5pxzefmzZ4s…
阅读更多...
如何在 MX Linux 上安装 Mint 的 Cinnamon 桌面 UI

如何在 MX Linux 上安装 Mint 的 Cinnamon 桌面 UI

如何在 MX Linux 上安装 Mint 的 Cinnamon 桌面 UI 你是否想在 MX Linux 上安装流行的 Linux Mint Cinnamon 图形用户界面？那么这里有一个教程…… Cinnamon 是一个类似 Windows 7 的界面，它默认安装在 Linux Mint 操作系统中。它使 Mint 非常易于理解和使用，这也是 Mint …
阅读更多...
OpenStack 入门

OpenStack 入门

目录 简介 一、云计算与 OpenStack 基础概念 1.1 云计算概述 1.2 OpenStack 简介 二、OpenStack 单机环境部署 2.1 环境准备 2.2 部署前准备工作 2.3 在线部署 OpenStack&#xff08;Train 版本&#xff09; 三、通过 Dashboard 部署 OpenStack 的功能 3.1 登录 Dash…
阅读更多...
【Git】关于项目开发分支的使用规范

【Git】关于项目开发分支的使用规范

背景 在项目开发过程中&#xff0c;往往一个优秀的产品都会出现不断的版本迭代&#xff0c;我时常在项目发布后对于如何结合后续更新的业务场景在分支上的应用没有一个很好的办法&#xff0c;一直也比较苦恼。目前项目的迭代场景如下&#xff0c;一个A项目&#xff0c;经过需求…
阅读更多...
msquic的windows版本编译

msquic的windows版本编译

首先确保安装cmake和powershell&#xff08;需要6以上&#xff0c;本人升级到了7.5&#xff09;&#xff0c;vs&#xff08;本人用的vs2022&#xff09; powershell&#xff0c;默认是5&#xff0c;会编译不成功&#xff0c;所以附带一个升级的流程 $PSVersionTable.PSVersion …
阅读更多...
批量文件重命名工具 OncePower ，永久免费！

批量文件重命名工具 OncePower ，永久免费！

软件介绍 适用于Windows OncePower是一款Windows批量重命名工具&#xff0c;支持基本及高级匹配重命名&#xff0c;无需复杂正则。特色包括匹配修改、长度截取、日期命名、前缀后缀修改及TXT文件导入。支持保留特定内容、批量移动文件和删除空文件夹。可保存设置&#xff0c;…
阅读更多...
Python入门Day6.1：异常处理

Python入门Day6.1：异常处理

一、什么是异常&#xff08;Exception&#xff09;&#xff1f; 异常是指程序运行过程中出现的错误情况。比如&#xff1a; 打开一个不存在的文件0作为除数列表索引越界类型转换失败 二、基本结构&#xff1a;try...except try:# 可能出错的代码 except 错误类型:# 出错时执…
阅读更多...
C++中的标准模板(STL)

C++中的标准模板(STL)

C中的核心标准模板包含&#xff1a;容器、迭代器、算法、函数对象、适配器。 1.容器 容器提供了各种数据结构&#xff0c;包括向量(vector)、链表(list)、队列(queue)、栈(stack)、集合(set)、映射(map)等&#xff0c;可以根据实际需求选择合适的容器。 容器分为三大类&…
阅读更多...
excel 待办日历软件（需要宏）特别推荐

excel 待办日历软件（需要宏）特别推荐

Excel待办日历软件是一款基于Excel表格的日程管理工具&#xff0c;能够帮助用户更高效地管理待办事项和日程安排。用户可以在软件中创建不同的任务列表&#xff0c;以便更好地进行管理和跟踪。软件还提供了日历视图&#xff0c;用户可以直观地查看和安排每日的任务&#xff0c;…
阅读更多...
激活函数-sigmoid、tanh、relu、softmax对比

激活函数-sigmoid、tanh、relu、softmax对比

激活函数是神经网络的核心组件&#xff0c;用于引入非线性特性&#xff0c;使网络能够学习复杂模式。以下从定义、作用、分类及应用场景进行详细解析&#xff1a; &#x1f50d; ​​一、定义​​ 激活函数&#xff08;Activation Function&#xff09;是作用于神经元输出的​…
阅读更多...
三步走实现嵌入式硬件与软件开发

三步走实现嵌入式硬件与软件开发

目录 ✅ 一、嵌入式硬件与软件的边界（为你后面每阶段安排任务打基础） ✅ 二、三阶段开发策略规划（以你的三步走为主线） 📍阶段1：确定能做 → 外包技术顾问协助选型 + 需求拆解 + 采购建议 适用角色 关键目标 如何管理？ 工具推荐 📍阶段2：会做一些 → 小范围…
阅读更多...
ubuntu运行cursor

ubuntu运行cursor

一.CURSOR官网下载AppImage文件 https://www.cursor.com/en/download 二、解压 AppImage 绕过挂载机制 解决&#xff1a;默认使用Cursor.AppImage 会自动挂载临时目录在/tmp目录下&#xff0c;出现没有权限挂载的报错问题 若挂载点仍不可写&#xff0c;直接解压 AppImage 运…
阅读更多...
PTA天梯赛L1 071-080题目解析

PTA天梯赛L1 071-080题目解析

目录 1.L1-071 前世档案 2.L1-072 刮刮彩票 3.L1-073 人与神 4.L1-074 两小时学完C语言 5.L1-075 强迫症 6.L1-076 降价提醒机器人 7.L1-077 大笨钟的心情 8.L1-078 吉老师的回归 9.L1-079 天梯赛的善良 10.L1-080 乘法口诀数列 1.L1-071 前世档案 解析&#xff1a;…
阅读更多...
git常用操作 --- idea编译器 --- 公司实战版

git常用操作 --- idea编译器 --- 公司实战版

前言 虽然git的命令方式很灵活,但是还是不够人性化,不够方便。 如果对git操作不熟练特别容易犯迷,可能敲一会命令就不知道当前在干什么了,下一步要干什么。 下面,我将演示在Java开发中使用最常用最经典的idea编译器来进行git操作,非常人性化和方便。 如果没有安装git和初始…
阅读更多...
window显示驱动开发—流输出阶段

window显示驱动开发—流输出阶段

流输出 (SO) 阶段可以在这些顶点到达光栅器之前将顶点流式传输到内存。 流输出的运行方式类似于管道中的点击。 即使数据继续向下流向光栅器&#xff0c;也可以打开此点击。 通过流输出发送的数据连接到缓冲区。 这些缓冲区可以在后续传递上作为管道输入进行循环。 流输出的一…
阅读更多...
备份docker desktop中的opengauss数据库

备份docker desktop中的opengauss数据库

文章目录 备份docker desktop中的opengauss数据库一、前提条件二、备份步骤三、注意事项四、自动化备份&#xff08;可选&#xff09;五、验证备份 备份docker desktop中的opengauss数据库 ​ 以下是在 Docker Desktop 中备份 OpenGauss 数据库&#xff08;以你的环境为例&…
阅读更多...
实时中值滤波 + 低通滤波 示例程序（STM32环境）

实时中值滤波 + 低通滤波 示例程序（STM32环境）

一、功能概述 本示例实现两个滤波器&#xff1a; 中值滤波器&#xff08;Median Filter&#xff09;&#xff1a;对短期异常值&#xff08;如尖峰噪声&#xff09;有良好的抑制能力&#xff1b;低通滤波器&#xff08;Low-Pass Filter&#xff09;&#xff1a;对数据进行平滑…
阅读更多...
AtCoder Beginner Contest 409 题解

AtCoder Beginner Contest 409 题解

本文为AtCoder Beginner Contest 409 的详细题解 目录 题目A: 题目大意: 解题思路: 代码(C): 题目B: 题目大意: 解题思路: 代码(C): 题目C: 题目大意: 解题思路: 代码(C): 题目D: 题目大意: 解题思路: 代码(C): 题目E: 题目大意: 解题思路: 代码(C): 题目A…
阅读更多...
Spring @Environment 典型用法

Spring @Environment 典型用法

简单说&#xff1a;Spring 里没有直接叫 Environment 的注解&#xff0c;更准确说常用的是 Autowired 注入 Environment 对象&#xff0c;或者结合 Value 配合 Environment 读取配置 。 支持从以下来源读取&#xff1a; 1、application.properties / .yaml 2、JVM 参数&#xf…
阅读更多...
【集合与结构体】5.2（课本题）总结代码

【集合与结构体】5.2（课本题）总结代码

ds老师产物&#xff0c;纯为期末复习&#xff0c;自用。 题目1 编写程序&#xff0c;将一个整型变量右移 4 位&#xff0c;并以二进制数形式输出该整数在移位前和移位后的数值。 //观察系统填补空缺的数位情况 代码解答 #include <iostream>//编写程序&#xff0c;将一个…
阅读更多...
最新文章

Copyright @ 2022~2023