TypeScript类型不兼容：带类型FormGroup无法赋值给FormGroup<any>

可行解决方案 #

方案1：模板中使用$any()强制类型转换 #

在绑定组件输入时，用Angular模板的$any()工具绕过类型检查：

<app-error-handler [form]="$any(filterForm)"></app-error-handler>

方案2：修改错误组件的输入类型为AbstractControl #

由于你的组件只用到表单的全局invalid状态和可遍历的controls，而FormGroup本身是AbstractControl的子类，可以直接将输入类型改为更宽泛的AbstractControl：

@Input({ required: true }) form!: AbstractControl;

这样所有类型的FormGroup都能正常赋值，若需要明确操作controls，可在组件内做类型断言：(form as FormGroup).controls。

方案3：定义通用FormGroup类型 #

如果希望保留FormGroup的类型提示，可定义一个通用类型别名，让输入接受任意键为字符串、值为AbstractControl的FormGroup：

type GenericFormGroup = FormGroup<Record<string, AbstractControl>>;

@Input({ required: true }) form!: GenericFormGroup;

错误原因解释 #

TypeScript对包含private属性的类型兼容性有严格要求：只有当两个类型的private属性来自同一个类声明时，才会被认为兼容。你的带类型FormControl<string>和AbstractControl<any, any>的_parent属性是各自类的私有成员，导致FormGroup<{...}>与FormGroup<any>的controls属性类型不匹配，最终触发赋值错误。

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