如何在TypeScript中将后端数据转换为前端UserCarType接口？

问题背景 #

后端返回的数据结构：

interface BackendCar {
  id: number;
  user_id: number;
  car_brand: string;
  car_model: string;
  vin: string;
  equipment: string;
  reg_number: string;
  car_mileage: number;
  car_year: string;
}

前端定义的业务接口：

interface UserCarType {
  id: number;
  user_id: number;
  brand: string;
  model: string;
  vin: string;
  restyling: string;
  govtNumber: string;
  mileage: number;
  year: string;
}

二者字段含义完全匹配，但属性命名不一致。使用as UserCarType类型断言仅能做类型层面的声明，无法实际修改属性名；手动逐个字段映射虽然可行，但不够高效，以下是几种更规范的TypeScript实现方案：

1. 编写专属映射函数（直观可控） #

直接编写一个纯函数完成属性映射，TypeScript会自动推导返回类型，也可以手动标注确保类型安全：

const convertBackendCar = (backendCar: BackendCar): UserCarType => ({
  id: backendCar.id,
  user_id: backendCar.user_id,
  brand: backendCar.car_brand,
  model: backendCar.car_model,
  vin: backendCar.vin,
  restyling: backendCar.equipment,
  govtNumber: backendCar.reg_number,
  mileage: backendCar.car_mileage,
  year: backendCar.car_year,
});

// 使用示例
const backendData = await fetch('/api/car').then(res => res.json());
const userCar = convertBackendCar(backendData);

这种方式逻辑清晰，类型检查严格，后续字段变更时只需修改函数内部，维护成本低。

2. 配置表+通用转换函数（高复用性） #

如果存在多个类似的属性名映射需求，可以抽离字段映射配置，编写通用转换函数实现复用：

// 定义字段映射关系：前端属性名 → 后端属性名
const carFieldMapping: Record<keyof UserCarType, keyof BackendCar> = {
  id: 'id',
  user_id: 'user_id',
  brand: 'car_brand',
  model: 'car_model',
  vin: 'vin',
  restyling: 'equipment',
  govtNumber: 'reg_number',
  mileage: 'car_mileage',
  year: 'car_year',
};

// 通用对象转换函数
const mapFields = <Target, Source>(source: Source, mapping: Record<keyof Target, keyof Source>): Target => {
  const result = {} as Target;
  Object.entries(mapping).forEach(([targetKey, sourceKey]) => {
    result[targetKey as keyof Target] = source[sourceKey as keyof Source] as unknown as Target[keyof Target];
  });
  return result;
};

// 使用示例
const userCar = mapFields(backendData, carFieldMapping);

新增或修改字段时，只需更新映射配置表即可，无需修改转换函数，适合大规模的映射场景。

3. 类转换器（复杂场景适配） #

如果需要在映射过程中加入额外的业务逻辑（比如数据格式处理、类型转换），可以使用类结合装饰器的方式，例如借助class-transformer库：

import { Expose, plainToInstance } from 'class-transformer';

class UserCar implements UserCarType {
  id: number;
  user_id: number;

  // 指定后端对应的属性名
  @Expose({ name: 'car_brand' })
  brand: string;

  @Expose({ name: 'car_model' })
  model: string;

  vin: string;

  @Expose({ name: 'equipment' })
  restyling: string;

  @Expose({ name: 'reg_number' })
  govtNumber: string;

  @Expose({ name: 'car_mileage' })
  mileage: number;

  @Expose({ name: 'car_year' })
  year: string;
}

// 使用示例
const userCar = plainToInstance(UserCar, backendData);

这种方式支持更复杂的转换逻辑，比如对日期字符串、数值格式的处理，但需要引入第三方依赖。

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