JSON字段名与JS/TS接口不匹配，如何映射数据至指定对象？

我来给你几个实用的解决方案，完全不需要修改数据库字段名或者接口变量名：

方法一：手动映射（无依赖，适合简单场景） #

这是最直接的方式，把解析后的原始JSON对象手动转换成符合Invoice接口的结构：

// 假设你已经读取到JSON字符串
const rawJson = '[{"INV#": "123"}, {"INV#": "456"}]';

// 先解析成原始JS对象
const rawInvoices = JSON.parse(rawJson) as Array<{ "INV#": string }>;

class myclass {
  private inv: Invoice[];

  constructor() {
    // 手动映射为Invoice数组，同时转换类型
    this.inv = rawInvoices.map(item => ({
      invoiceNumber: parseInt(item["INV#"], 10)
    }));
  }
}

这种方式不需要额外安装依赖，逻辑清晰，适合字段较少的场景。

方法二：使用class-transformer库（适合复杂项目） #

如果你的数据结构比较复杂、字段较多，可以用class-transformer库通过装饰器实现字段映射。首先安装依赖：

npm install class-transformer --save

然后把Invoice从接口改为类（TypeScript接口编译后不存在，装饰器只能作用于类），添加装饰器指定字段别名：

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

// 将interface改为class并配置装饰器
export class Invoice {
  @Expose({ name: 'INV#' }) // 指定JSON中的原始字段名
  @Type(() => Number) // 自动将字符串类型转换为number
  invoiceNumber: number;
}

class myclass {
  private inv: Invoice[];

  constructor() {
    const rawJson = '[{"INV#": "123"}, {"INV#": "456"}]';
    const rawInvoices = JSON.parse(rawJson);
    
    // 把原始对象转换为Invoice实例数组
    this.inv = plainToInstance(Invoice, rawInvoices, {
      excludeExtraneousValues: true // 只保留被@Expose标记的属性
    });
  }
}

这种方式扩展性强，后续新增字段只需添加对应装饰器即可。

方法三：使用JSON.parse的reviver函数（无依赖，解析时直接转换） #

利用JSON.parse的第二个参数reviver函数，在解析JSON的同时完成字段映射和类型转换：

class myclass {
  private inv: Invoice[];

  constructor() {
    const rawJson = '[{"INV#": "123"}, {"INV#": "456"}]';
    
    this.inv = JSON.parse(rawJson, (key, value) => {
      // 识别包含"INV#"的对象，直接转换为Invoice结构
      if (typeof value === 'object' && value !== null && 'INV#' in value) {
        return {
          invoiceNumber: parseInt(value['INV#'], 10)
        };
      }
      return value;
    }) as Invoice[];
  }
}

这种方式把转换逻辑嵌入到JSON解析过程中，代码简洁，同样不需要额外依赖。

内容的提问来源于stack exchange，提问作者Sandro Del Valle Arocha