Angular中如何基于其他类创建对象数组？报错B[data.length]不是构造器如何解决

错误原因 #

• TypeScript/JavaScript 不存在 new 类名[数组长度] 这种初始化类实例数组的语法，你编写的 new B[data.length] 会被引擎解析为尝试调用类B上以data.length的值为索引的属性作为构造函数，自然会抛出对应报错。
• 即使语法修复后，仅创建指定长度的空数组没有实际填充B类实例，后续访问数组元素的属性时也会出现空值报错。

修复方案 #

将类A的代码调整为如下实现即可：

export class A {
  // 初始化空数组避免后续空值异常
  mygroupB : B[] = [];

  setData(data:any){
      // 提前拦截data为空/长度为0的情况
      if(!data?.length) return;

      // 实现1：固定长度数组+循环填充实例
      this.mygroupB = new Array(data.length);
      for(let i = 0; i < data.length; i++){
          this.mygroupB[i] = new B();
          // 若需要同步data的属性值到B实例，可在此处添加赋值逻辑，示例：
          // this.mygroupB[i].id = data[i].id;
          // this.mygroupB[i].Name = data[i].name;
      }

      // 实现2：更简洁的map写法（适合需要同步源数据属性的场景）
      // this.mygroupB = data.map(item => {
      //   const instanceB = new B();
      //   instanceB.id = item.id;
      //   instanceB.Name = item.name;
      //   return instanceB;
      // })
  }
}

优化建议 #

• 若B类仅用于类型标注、不需要定义成员方法，更推荐用接口替代类，无需手动创建实例，直接做类型断言即可：

// B的定义改为接口
export interface B {
    id: string;
    Name: string;
}
// setData中可直接赋值
this.mygroupB = data as B[];

• TypeScript类型标注中优先使用小写的基础类型string，大写String是JS字符串包装对象类型，不符合常规标注规范。

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