Angular 11升级至12后CustomFormArray继承FormArray出现类型错误

问题现象 #

• 升级后继承自FormArray的CustomFormArray类出现三类类型兼容错误：
  1. controls属性与基类FormArray同名属性不兼容
  2. parent属性与基类AbstractControl、FormArray同名属性不兼容
  3. 重写的push方法与基类方法类型不兼容
• 该类在Angular 11中可正常运行，将push方法重命名为pushNew后错误消失

问题原因 #

1. TypeScript版本升级带来的严格校验 #

Angular 12将依赖的TypeScript版本从4.0.x升级到4.2.x，新版本对类继承中的属性、方法重写规则做了显著收紧，此前Angular 11允许的“宽松”类型兼容场景，在新版本中会被判定为类型错误。

2. 属性重写的类型冲突（controls/parent） #

• 基类FormArray的controls属性类型为AbstractControl[]，若自定义类中给controls指定了更具体的子类类型（比如自定义表单控件子类数组），TypeScript 4.0允许这种协变类型，但TypeScript 4.2对类属性重写的类型匹配要求更严格，不允许子类属性类型比基类更“窄”，因此触发不兼容错误。
• 同理，基类AbstractControl的parent属性类型为AbstractControl | null，若自定义类给parent指定了更具体的类型，也会因违反严格类型校验规则报错。

3. 方法重写的参数类型冲突（push方法） #

基类FormArray的push方法签名为：

push(control: AbstractControl): void

若自定义类的push方法参数是更具体的类型（比如自定义表单控件子类），这违反了TypeScript方法重写的逆变规则——子类方法的参数类型必须是基类参数类型的超类型（即不能比基类更具体）。当重命名为pushNew时，该方法不再是重写基类方法，而是新增方法，因此不会触发重写的类型校验，错误自然消失。

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