如何将JSON枚举值映射为TypeScript只读静态字段？

问题背景 #

我用TypeScript类实现了伪枚举，示例代码如下：

export class Status {
  static readonly DONE = new Status('DONE', 'p-tag-green');
  static readonly PENDING = new Status('PENDING', 'p-tag-yellow');

  private constructor(
    private _value: string,
    private _class: string
  ) { }
}

这个伪枚举被用于Reminder接口：

export interface Reminder {
  id: string;
  status: Status;
}

通过HttpClient发起请求后，返回的JSON结构为{"id": 5, "status": "DONE"}，解析后的Reminder对象中status字段是字符串值而非Status实例，导致无法访问该类的属性。

目前可以通过手动映射响应获取实例：

return this.httpClient.get(`api/v1/reminders/${id}`).pipe(
  map((data: any) => ({
    ...data,
    status: Status[data['status'] as keyof typeof Status]
  }))
);

但这类场景较多，希望实现通用方案自动完成映射。此前尝试过装饰器（需将接口改为类，改动量太大）和HttpClient拦截器（无法直接获取目标接口/类型），均未成功。

可行的通用解决方案 #

1. 基于全局类型映射配置的泛型转换器 #

通过维护全局的接口-字段映射规则，配合泛型函数自动完成响应转换，无需修改现有接口。

首先定义映射配置：

// 全局存储各接口的伪枚举字段映射规则
const typeMappings = {
  Reminder: {
    status: Status
  },
  // 可添加其他接口的映射规则，如：
  // Order: { status: OrderStatus }
} as const;

// 通用响应映射函数
function mapResponse<T extends keyof typeof typeMappings>(data: any, type: T) {
  const fieldMappings = typeMappings[type];
  const result = { ...data };
  
  for (const [field, enumClass] of Object.entries(fieldMappings)) {
    if (result[field]) {
      result[field] = enumClass[result[field] as keyof typeof enumClass];
    }
  }
  return result as any;
}

然后封装HttpClient请求方法，调用通用映射函数：

// 封装后的请求方法，自动应用映射
getReminder(id: string): Observable<Reminder> {
  return this.httpClient.get(`api/v1/reminders/${id}`).pipe(
    map(data => mapResponse(data, 'Reminder') as Reminder)
  );
}

该方案只需维护全局映射配置，即可批量处理同类请求，适合场景较多的情况。

2. 带类型标记的HttpClient封装方案 #

给请求添加自定义标记，在封装层根据标记自动应用映射，替代拦截器方案（避免拦截器无法获取类型的问题）。

先扩展请求选项：

// 自定义请求选项，携带响应类型映射标记
interface TypedRequestOptions {
  responseTypeMapping?: keyof typeof typeMappings;
}

// 封装HttpClient的get方法
typedGet<T>(url: string, options?: TypedRequestOptions): Observable<T> {
  return this.httpClient.get(url).pipe(
    map(data => {
      if (options?.responseTypeMapping) {
        return mapResponse(data, options.responseTypeMapping) as T;
      }
      return data as T;
    })
  );
}

调用时只需指定映射标记：

this.typedGet<Reminder>(`api/v1/reminders/${id}`, { responseTypeMapping: 'Reminder' }).subscribe(...);

此方案将映射逻辑集中到封装层，无需每个请求单独编写map操作。

3. 伪枚举类扩展静态方法的轻量方案 #

给每个伪枚举类添加fromValue静态方法，简化单字段映射逻辑，侵入性低。

修改伪枚举类：

export class Status {
  static readonly DONE = new Status('DONE', 'p-tag-green');
  static readonly PENDING = new Status('PENDING', 'p-tag-yellow');

  private constructor(
    private _value: string,
    private _class: string
  ) { }

  // 添加从字符串值获取实例的静态方法
  static fromValue(value: string): Status | undefined {
    return this[value as keyof typeof Status];
  }
}

然后创建通用字段映射函数：

// 通用枚举字段映射函数
function mapEnumField<T>(value: string, enumClass: { fromValue: (val: string) => T }): T | undefined {
  return enumClass.fromValue(value);
}

请求中使用时更简洁：

return this.httpClient.get(`api/v1/reminders/${id}`).pipe(
  map((data: any) => ({
    ...data,
    status: mapEnumField(data.status, Status)
  } as Reminder))
);

该方案改动最小，适合场景数量中等的情况。

方案选择建议 #

• 若伪枚举映射场景极多，优先选择方案1或2，集中维护映射规则，大幅减少重复代码；
• 若场景数量不多，方案3更轻量，无需全局配置，仅需给伪枚举类添加一个静态方法即可。

内容的提问来源于stack exchange，提问作者LIvanov