TypeScript中同对象日志输出为何不同？Angular SimpleChanges问题

问题原因 #

• 这是Angular输入属性类型转换导致的：如果你的组件from输入被定义为Date类型，当父组件传入null时，Angular会自动尝试将null转换为Date对象，而new Date(null)会生成Invalid Date。
• JSON.stringify()对Invalid Date的处理逻辑是将其序列化为null，所以你看到序列化后的结果里previousValue是null，但直接访问该属性时，拿到的是Angular转换后的Invalid Date对象。

解决方法 #

方法1：修改输入属性类型（推荐）

如果业务允许from输入为null，直接把类型定义为Date | null，让Angular保留原始输入值：

@Input() from: Date | null = null;

这样changes.from.previousValue就会直接是null，不需要额外处理。

方法2：手动识别无效日期

如果无法修改输入类型，可通过判断日期有效性来还原null：

const prevValue = changes.from.previousValue;
const realPrevValue = prevValue instanceof Date && isNaN(prevValue.getTime()) ? null : prevValue;
console.log(realPrevValue); // 输出null

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