Angular2+TypeScript中对象数组初始化push报错求助

这个错误的原因很明确：你在调用push方法之前，没有初始化color数组，它的初始值是undefined，自然无法调用数组的push方法。

修复步骤 #

1. 先初始化color数组
   你可以选择两种方式完成初始化：

   • 方式一：在类属性声明时直接赋值为空数组

     export class Car{
       name: String;
       // 建议直接用Door类型替代匿名类型，和你的Door类保持类型一致
       door: Door;
       // 用Color类型替代匿名对象数组，同时初始化空数组
       color: Color[] = [];
     }
     

   • 方式二：在构造函数中先创建空数组，再执行push操作

     constructor() {
       // 先初始化color为空数组
       this.color = [];
       for (var i = 0; i < 10; i++) {
         this.color.push(new Color());
       }
       this.door = new Door();
     }
     

2. 额外优化：修正类型匹配问题
   注意到你原来的代码里，Car类中door的类型定义是{ position: String; id: Number; }，但Door类的属性是ID: Number（大写ID），这里存在类型不匹配的问题。建议把Door类的属性改成小写id，或者直接将Car中的door类型声明为Door，这样更符合TypeScript的类型规范：

   export class Door{
     position: String;
     id: Number; // 改成小写id，和Car中的类型定义一致
   }
   

错误原因解析 #

在TypeScript/JavaScript中，类的属性如果没有显式赋值初始化，默认值是undefined。当你直接调用this.color.push()时，相当于尝试在undefined上调用数组方法，这就会触发Cannot read property 'push' of undefined的错误。

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