TypeScript枚举类型应用：前后端状态码映射的最简方案

技术分享 8个月前 (07-14) 0 999+

关注

介绍

这篇文章来谈一下 TypeScript 中的枚举类型（Enum）以及一些最佳实践。事情的起因是这样的，今天看到自己之前写的一段代码，感觉不是很好，于是想优化一下，期间用到了枚举类型，遂记录一下。为了方便理解，我将原来的例子简化一下。

业务需求

业务需求是这样的：我们要实现一个Job系统，你可以将其想象为Jenkins Job类似的东西，每个Job有一个状态，状态可以是以下几种：

PENDING：等待执行
RUNNING：正在执行
SUCCESS：执行成功
FAILED：执行失败
CANCELED：执行被取消

Job的状态信息由后端返回，前端只负责展示，也不需要实时刷新。很简单的需求，对吧？我的原始代码如下：

原始代码

前端数据类型定义，首先定义一个字面量用来保存Job状态，然后定义一个Job接口来描述Job对象。

// 定义Job状态字面量 type JobStatus = 'PENDING' | 'RUNNING' | 'SUCCESS' | 'FAILED' | 'CANCELED';  // 每个Job包含id、name和status三个属性 interface Job {   id: string;   name: string;   status: JobStatus; }

后端返回数据如下，可以看到后端是用数字类型来表示状态的。

const jobData = [   { id: '1', name: 'Job 1', status: 1 }, // PENDING   { id: '2', name: 'Job 2', status: 2 }, // RUNNING   { id: '3', name: 'Job 3', status: 3 }, // SUCCESS   { id: '4', name: 'Job 4', status: 4 }, // FAILED   { id: '5', name: 'Job 5', status: 5 }, // CANCELED ];

为了将后端返回的数字类型和前端定义的Job Status对应起来，我又额外写了一个映射函数：

function mapJobStatus(status: number): JobStatus {   switch (status) {     case 1:       return 'PENDING';     case 2:       return 'RUNNING';     case 3:       return 'SUCCESS';     case 4:       return 'FAILED';     case 5:       return 'CANCELED';     default:       throw new Error(`Unknown status: ${status}`);   } }

接下来就是展示了，展示Job状态时，用户不想看到全大写的状态，而是想看到首字母大写的状态，所以我又写了一个函数来处理这个问题：

function getJobDisplayName(status: JobStatus): string {   return status.charAt(0).toUpperCase() + status.slice(1).toLowerCase(); }  /* 转换后的状态字符串如下： PENDING -> Pending RUNNING -> Running SUCCESS -> Success FAILED -> Failed CANCELED -> Canceled */

好了，下面我们停下来思考一下，以上这些代码都解决了哪些问题，为什么需要两个转换函数，有没有更好的解决方式？

问题分析

为了完成这个需求，上述代码做了以下几件事：

后端状态码到前端状态的转换（1,2,3,4,5 -> PENDING, RUNNING, SUCCESS, FAILED, CANCELED）
前端状态字面量到展示字符串的转换（PENDING, RUNNING, SUCCESS, FAILED, CANCELED -> Pending, Running, Success, Failed, Canceled）

对于第一点，可以使用枚举类型来实现，这样就不需要手动维护状态码和状态字面量之间的映射关系了。

对于第二点，原本的实现是将全大写的状态转换为首字母大写的形式，这种转换方式比较简单，但实际业务中，可能会有更复杂的需求，比如用户希望看到不同的展示字符串（例如将RUNNING显示为In progress）。因此，使用一个映射表来处理这种转换会更加灵活。

优化后的代码

我们可以使用 TypeScript 的枚举类型来简化代码。首先定义一个枚举来表示 Job 状态：

enum JobStatus {   PENDING = 1,   RUNNING = 2,   SUCCESS = 3,   FAILED = 4,   CANCELED = 5, }

这样就可以省去第一个转换函数mapJobStatus，因为枚举本身就提供了状态码到状态字面量的映射，可以直接使用这个枚举来定义 Job 接口：

interface Job {   id: string;   name: string;   status: JobStatus; // 使用枚举类型 }

接下来，重写getJobDisplayName, 这里使用typescript的Record类型来创建一个映射表（Record类型相当于一个键值对的映射，只不过键和值都是类型化的），将枚举值映射到展示字符串，与原本的实现方式相比，这种方式更加简洁易维护。

const getJobDisplayName: Record<JobStatus, string> = {   [JobStatus.PENDING]: 'Pending',   [JobStatus.RUNNING]: 'In progress',   [JobStatus.SUCCESS]: 'Success',   [JobStatus.FAILED]: 'Failed',   [JobStatus.CANCELED]: 'Canceled', };

最后是调用代码，如下：

const jobs = [   { id: '1', name: 'Job 1', status: 1 },   { id: '2', name: 'Job 2', status: 2 },   { id: '3', name: 'Job 3', status: 3 },   { id: '4', name: 'Job 4', status: 4 },   { id: '5', name: 'Job 5', status: 5 }, ];  jobs.forEach((job) => {   console.log(     `Job ID: ${job.id}, Name: ${job.name}, Status: ${       getJobDisplayName[job.status as JobStatus]     }`   ); });

使用枚举类型的好处是：