在 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. 便于維護和擴展