TypeScript枚举与Java枚举JSON互转及显示存储分离方案咨询

一、针对现有字符串枚举的序列化/反序列化处理 #

TypeScript字符串枚举默认会序列化其值（如Language.it会被序列化为"Italian"），但我们需要传递的是键（"it"）。可以通过手动转换实现需求：

1. 序列化（前端→后端）：将枚举值转为键 #

先实现通用工具函数，根据枚举值反向查找对应的键：

// 工具函数：根据枚举值获取对应的键
function getEnumKey<T extends Record<string, string>>(enumObj: T, value: T[keyof T]): keyof T | undefined {
  return Object.keys(enumObj).find(key => enumObj[key as keyof T] === value) as keyof T | undefined;
}

提交请求前，将Request中的枚举字段转换为键：

// 示例：提交请求时转换字段
const rawRequest = { ...this.request };
// 将language字段从枚举值转为键，默认值设为'de'
rawRequest.language = getEnumKey(Language, this.request.language) || 'de';
// 发送请求
this.http.post('/api/requests', rawRequest).subscribe(...);

2. 反序列化（后端→前端）：将键转为枚举值 #

实现工具函数，根据键获取对应的枚举值：

// 工具函数：根据枚举键获取对应的值
function getEnumValue<T extends Record<string, string>>(enumObj: T, key: keyof T): T[keyof T] | undefined {
  return enumObj[key];
}

接收后端响应时，将返回的键转换为枚举值：

// 示例：接收响应时转换字段
this.http.get<Request>('/api/requests/1').subscribe(rawResponse => {
  // 将language字段从键转为枚举值，默认值设为Language.de
  rawResponse.language = getEnumValue(Language, rawResponse.language as keyof typeof Language) || Language.de;
  this.request = rawResponse;
});

3. 批量转换优化 #

如果存在大量枚举字段，可封装通用转换工具类减少重复代码：

class EnumConverter {
  // 序列化：将对象中的枚举字段转为键
  static serialize<T>(obj: T, enumFields: Record<keyof T, Record<string, string>>): T {
    const result = { ...obj };
    for (const field in enumFields) {
      if (enumFields.hasOwnProperty(field)) {
        const enumObj = enumFields[field];
        result[field] = getEnumKey(enumObj, obj[field] as string) as any;
      }
    }
    return result;
  }

  // 反序列化：将对象中的键转为枚举值
  static deserialize<T>(obj: T, enumFields: Record<keyof T, Record<string, string>>): T {
    const result = { ...obj };
    for (const field in enumFields) {
      if (enumFields.hasOwnProperty(field)) {
        const enumObj = enumFields[field];
        result[field] = getEnumValue(enumObj, obj[field] as keyof typeof enumObj) as any;
      }
    }
    return result;
  }
}

// 使用示例
const requestEnumMap = { language: Language };
// 序列化请求数据
const serializedRequest = EnumConverter.serialize(this.request, requestEnumMap);
// 反序列化响应数据
this.http.get<Request>('/api/requests/1').subscribe(raw => {
  this.request = EnumConverter.deserialize(raw, requestEnumMap);
});

二、更通用的显示值与存储值分离方案 #

上述方法是基于现有枚举结构的补救措施，更合理的方案是将存储用的键和显示用的文本彻底分离，避免依赖TypeScript枚举的键值映射：

方案1：使用常量对象+类型别名（推荐） #

直接定义存储键与显示值的映射，用类型别名保证类型安全：

// 定义存储键与显示值的映射
export const LanguageMap = {
  de: 'German',
  fr: 'French',
  it: 'Italian',
  en: 'English'
} as const;

// 自动推导存储键的类型：'de' | 'fr' | 'it' | 'en'
export type LanguageKey = keyof typeof LanguageMap;

// Request类中直接使用存储键类型
export class Request {
  language: LanguageKey = 'de';
  // 其他字段...
}

• 序列化：直接提交Request对象即可，language字段本身就是后端需要的键（如"it"），无需转换。
• 显示：通过LanguageMap[request.language]获取对应的显示文本，比如生成下拉框选项：

  // 生成下拉框选项
  const languageOptions = Object.entries(LanguageMap).map(([key, label]) => ({
    value: key,
    label: label
  }));
  

这种方案的优势：

• 完全匹配后端Java枚举定义，避免序列化冲突
• 类型安全，TypeScript会自动校验language字段只能是合法的键
• 显示与存储逻辑分离，维护更清晰

方案2：使用自定义枚举类封装逻辑 #

如果需要为枚举值添加更多业务属性（如排序权重、图标等），可以用自定义类封装：

export class Language {
  private constructor(
    public readonly key: string,
    public readonly displayName: string,
    // 可扩展更多属性，如排序值、图标路径等
    public readonly sortOrder: number
  ) {}

  // 定义枚举实例
  static readonly DE = new Language('de', 'German', 1);
  static readonly FR = new Language('fr', 'French', 2);
  static readonly IT = new Language('it', 'Italian', 3);
  static readonly EN = new Language('en', 'English', 4);

  // 所有实例集合
  static readonly ALL = [Language.DE, Language.FR, Language.IT, Language.EN];

  // 根据键查找实例
  static fromKey(key: string): Language | undefined {
    return Language.ALL.find(lang => lang.key === key);
  }

  // 序列化时自动返回键（覆盖toJSON方法）
  toJSON(): string {
    return this.key;
  }
}

• 序列化：因为Language类重写了toJSON方法，提交Request对象时会自动将language字段序列化为键（如"it"）。
• 反序列化：后端返回键后，通过Language.fromKey转换为实例：

  this.http.get<{ language: string }>('/api/requests/1').subscribe(raw => {
    const request = new Request();
    request.language = Language.fromKey(raw.language) || Language.DE;
    this.request = request;
  });
  

这种方案适合复杂业务场景，封装性更强，便于扩展枚举的功能。

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