TypeScript映射API数据时如何忽略大小写适配驼峰命名规范？

TypeScript的接口仅在编译阶段做类型校验，运行时不存在实体，所以直接将API返回的大驼峰对象赋值给小驼峰接口类型变量时，因属性名不匹配会导致映射失效。以下是几种可行的解决方法：

1. 手动字段映射（适合字段少的场景） #

在订阅回调里直接转换每个字段名称，简单直观：

employeeResults: Employees[] = [];

this.employeeService.getEmployeeResults().subscribe((apiEmployees: any[]) => {
  this.employeeResults = apiEmployees.map(emp => ({
    name: emp.Name,
    address: emp.Address
    // 其他字段按相同逻辑转换
  }));
});

2. 使用class-transformer库（适合字段多或复杂场景） #

借助class-transformer库可以更优雅地处理字段映射，步骤如下：

• 先安装依赖：

  npm install class-transformer
  

• 将原interface改为class（装饰器需要类支持），通过装饰器指定API返回的字段名：

  import { Expose } from 'class-transformer';
  
  export class Employee {
    @Expose({ name: 'Name' })
    name: string;
  
    @Expose({ name: 'Address' })
    address: string;
  }
  

• 在订阅时用plainToInstance完成转换：

  import { plainToInstance } from 'class-transformer';
  
  employeeResults: Employee[] = [];
  
  this.employeeService.getEmployeeResults().subscribe((apiEmployees: any[]) => {
    this.employeeResults = plainToInstance(Employee, apiEmployees);
  });
  

3. 通用大小写转换函数（无需第三方库） #

如果不想引入外部依赖，可以写一个通用递归函数，将对象的大驼峰键转为小驼峰：

// 通用转换函数
function convertToCamelCase(obj: any): any {
  if (typeof obj !== 'object' || obj === null) return obj;
  if (Array.isArray(obj)) return obj.map(item => convertToCamelCase(item));
  
  return Object.keys(obj).reduce((result, key) => {
    const camelKey = key.charAt(0).toLowerCase() + key.slice(1);
    result[camelKey] = convertToCamelCase(obj[key]);
    return result;
  }, {} as any);
}

使用方式：

employeeResults: Employees[] = [];

this.employeeService.getEmployeeResults().subscribe((apiEmployees: any[]) => {
  this.employeeResults = convertToCamelCase(apiEmployees) as Employees[];
});

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