Angular TypeScript中对象与数组未初始化的行为差异疑问

这个差异的核心原因在于未初始化类属性的默认值，以及你对两种属性的操作逻辑，咱们一步步拆解清楚：

1. 先看image属性的报错逻辑 #

你的Article类里声明了public image: Image;，但既没给它设置默认值，也没在构造函数里初始化（你注释掉了this.article.image = new Image();）。在JavaScript/TypeScript中，未初始化的引用类型属性默认值是undefined。

当你尝试执行this.article.image.fileName = 'xxx'时，本质是在给undefined的子属性赋值——undefined是一个原始值，根本没有fileName这个属性，所以必然抛出TypeError: Cannot set property '..' of undefined的错误。

2. 再看images属性的迷惑点 #

按照你给出的Article类代码，public images: Image[];同样没有显式初始化，理论上它的默认值也应该是undefined，调用undefined.push()也会报和上面类似的错误。但你说实际调用push没有报错，这说明你的代码里**images其实已经被隐式或显式初始化为空数组了**，大概率是这几个原因：

• 可能你在Article类里给images加了默认值（比如public images: Image[] = [];），只是问题描述里没写出来；
• 可能在调用push之前，其他业务逻辑已经给this.article.images赋值了一个空数组；
• 如果你是在Angular这类框架中使用这个类，某些装饰器结合特定场景可能会自动帮你初始化数组（不过这种情况很少见，一般还是需要手动设置默认值）。

如果严格按照你给出的代码逻辑，images未初始化时调用push肯定会报错——这和image的错误本质完全一致，都是访问undefined的方法/属性导致的。

正确的处理方式 #

为了避免这类问题，建议始终显式初始化引用类型的类属性：

// 方式1：在类定义时设置默认值
export class Article { 
  public image: Image = new Image(); 
  public images: Image[] = []; 
}

// 方式2：在构造函数中初始化
constructor() { 
  this.article = new Article(); 
  this.article.image = new Image();
  this.article.images = []; // 如果类里没设默认值，这里必须初始化数组
}

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