TypeScript转译JavaScript后super关键字失效，访问父类属性触发TypeError: (intermediate value).mandatoryProps is not iterable错误

这个错误的核心原因是你在子类里错误地通过super.mandatoryProps访问父类的实例属性，转译后的JavaScript中，super在这里指向的是父类的原型，而非父类的实例——但父类的mandatoryProps是挂载在实例（this）上的属性，并非原型属性，所以super.mandatoryProps返回undefined，扩展运算符...自然会抛出“不可迭代”的错误。

问题根源拆解 #

看转译后的代码细节：

• 父类VMEvent的mandatoryProps是在构造函数里赋值给this的：this.mandatoryProps = [EVENT_IDENTITY_KEY]，属于实例属性，只存在于每个实例对象上。
• 子类VMSchemaRegistryEvent的构造函数里，调用super()后立刻执行this.mandatoryProps = [...super.mandatoryProps, ...]——这里的super.mandatoryProps是去父类的原型上查找该属性，而原型上根本没有定义，所以拿到的是undefined。

但实际上，当你调用super()后，父类的构造函数已经执行完毕，子类实例的this上已经继承了父类的mandatoryProps属性，直接访问this.mandatoryProps就能拿到正确的数组。

解决方案 #

修改你的TypeScript代码，将子类中mandatoryProps的初始化代码里的super.mandatoryProps替换为this.mandatoryProps：

修改后的TypeScript子类代码

export abstract class VMSchemaRegistryEvent extends VMEvent { 
  // ... 其他代码保持不变 ...

  // 把 super.mandatoryProps 改成 this.mandatoryProps
  mandatoryProps: VMEventPropertyKeys[] = [...this.mandatoryProps, VMEventPropertyKeys.SCHEMA_REGISTRY_EVENT_SUBJECT_KEY] 
} 

转译后的JavaScript会变成：

class VMSchemaRegistryEvent extends vmBaseEvent_1.VMEvent { 
  constructor(schemaRegistryEventSubject) { 
    super(new vmBaseEvent_1.VMEventIdentity(vmEventsSpecBuilder_1.vmEventsSpecBuilder.buildSchemaRegistryEventName(schemaRegistryEventSubject), vmEventCommonTypes_1.SCHEMA_REGISTRY_NAMESPACE_CONST)); 
    // 现在访问的是实例上的 mandatoryProps，已由父类构造函数初始化完成
    this.mandatoryProps = [...this.mandatoryProps, vmEventPropertyKeys_1.VMEventPropertyKeys.SCHEMA_REGISTRY_EVENT_SUBJECT_KEY]; 
    this.schemaRegistryEventSubject = schemaRegistryEventSubject; 
  } 
  // ... 其他代码保持不变 ...
} 

这样修改后，this.mandatoryProps就是父类构造函数初始化好的数组，扩展运算符可以正常工作，不会再抛出错误。

额外说明 #

为什么TypeScript允许你写super.mandatoryProps？
TypeScript的类型系统会把super.mandatoryProps解析为父类实例的属性，但转译到JavaScript时，它会被编译为访问父类原型的属性——这是TypeScript在处理类实例属性继承时的一个小陷阱，记住：对于父类的实例属性，在子类中通过this访问而不是super，super更适合访问父类的原型方法或者静态属性。

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