如何使用JSON对象数组构造TypeScript类的实例

错误根因 #

你遇到的类型报错核心有两点：

1. 通过ES模块导入的JSON数据，解析后是普通匿名JS对象，不是你定义的OneClass类的实例，TS的类型系统默认不会将结构相同的普通对象识别为类的实例，因此直接标注类型会不匹配。
2. 你当前定义的OneClass没有构造函数，也没有对应的实例化逻辑，无法直接从JSON对象生成类的实例。
   你用any类型可以正常运行本质是关闭了TS的类型校验，属于掩耳盗铃的处理方式，如果后续OneClass新增了类方法，运行时调用会直接报错，不推荐这么用。

正确实现步骤 #

步骤1：完善OneClass类的定义 #

补充构造函数，也可以新增静态转换方法方便从JSON对象生成实例：

export class OneClass {
  readonly name: string;

  constructor(name: string) {
    this.name = name;
  }

  // 静态方法直接从符合结构的JSON对象生成实例
  static fromJson(jsonObj: { name: string }) {
    return new OneClass(jsonObj.name);
  }
}

步骤2：标注导入JSON的类型 #

提前定义JSON结构的类型，导入时标注保证JSON结构符合预期：

// 定义JSON数据的结构类型
type OneClassRaw = {
  name: string;
};
// 导入JSON时标注类型，TS会自动校验JSON结构是否匹配
import rawSearchData from '../somepath/data.json' as OneClassRaw[];

步骤3：将普通JSON对象数组转换为OneClass实例数组 #

使用map遍历原始JSON数组，批量生成类实例：

const searchData: OneClass[] = rawSearchData.map(item => OneClass.fromJson(item));

步骤4：正常遍历使用 #

转换后的数组元素都是标准的OneClass实例，直接遍历即可：

searchData.forEach(obj => {
  // 此处obj自动推断为OneClass类型，不需要额外标注
  console.log(obj.name);
});

注意事项 #

• 你的data.json里Paris属性后面有多余的尾逗号，标准JSON语法不允许尾逗号，建议删掉避免导入报错。
• 如果JSON结构复杂，可以新增字段校验逻辑在fromJson方法里，避免非法结构的数据生成类实例。

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