Angular中为何无法用通用控件扩展特定控件并用于类型定义？

问题场景 #

你尝试通过通用控件接口CommonControls扩展特定表单控件接口，并定义BaseFormGroup类型，但遇到TypeScript约束错误：

Type T does not satisfy the constraint { [K in keyof T]: AbstractControl<any, any>; }

原始代码：

export interface CommonControls {
  selected: FormControl<boolean>;
}

export interface FirstFormControls extends CommonControls {
  name: FormControl<string>;
  price: FormControl<string>;
}

export interface SecondFormControls extends CommonControls {
  ordering: FormControl<number>;
  type: FormControl<string>;
  description: FormControl<string>;
}

export type BaseFormGroup<T extends CommonControls> = FormGroup<T>;

网上建议添加字符串索引签名，但会允许任意控件，违背强类型设计：

export interface CommonControls {
  selected: FormControl<boolean>;
  [key: string]: AbstractControl<any, any>;
}

解决方案 #

方案1：泛型双重约束 #

修改BaseFormGroup的泛型约束，同时限制T继承CommonControls且所有属性都属于AbstractControl类型：

import { AbstractControl, FormControl, FormGroup } from '@angular/forms';

export interface CommonControls {
  selected: FormControl<boolean>;
}

export interface FirstFormControls extends CommonControls {
  name: FormControl<string>;
  price: FormControl<string>;
}

export interface SecondFormControls extends CommonControls {
  ordering: FormControl<number>;
  type: FormControl<string>;
  description: FormControl<string>;
}

// 双重约束：T继承CommonControls，且所有属性都是AbstractControl
export type BaseFormGroup<T extends CommonControls & { [K in keyof T]: AbstractControl<any, any> }> = FormGroup<T>;

方案2：类型别名+交叉类型 #

用类型别名替代接口继承，通过交叉类型组合通用控件与特定控件，同时确保整体符合FormGroup的约束：

import { AbstractControl, FormControl, FormGroup } from '@angular/forms';

// 通用控件类型
export type CommonControls = {
  selected: FormControl<boolean>;
};

// 交叉类型组合通用与特定控件
export type FirstFormControls = CommonControls & {
  name: FormControl<string>;
  price: FormControl<string>;
};

export type SecondFormControls = CommonControls & {
  ordering: FormControl<number>;
  type: FormControl<string>;
  description: FormControl<string>;
};

// 直接约束T符合FormGroup的属性要求
export type BaseFormGroup<T extends { [K in keyof T]: AbstractControl<any, any> }> = FormGroup<T>;

方案3：基接口统一约束 #

定义一个确保所有属性都是AbstractControl的基接口，让CommonControls和其他表单接口都继承它：

import { AbstractControl, FormControl, FormGroup } from '@angular/forms';

// 基接口：强制所有属性为AbstractControl
interface FormControlsBase {
  [K in keyof this]: AbstractControl<any, any>;
}

export interface CommonControls extends FormControlsBase {
  selected: FormControl<boolean>;
}

export interface FirstFormControls extends CommonControls {
  name: FormControl<string>;
  price: FormControl<string>;
}

export interface SecondFormControls extends CommonControls {
  ordering: FormControl<number>;
  type: FormControl<string>;
  description: FormControl<string>;
}

export type BaseFormGroup<T extends FormControlsBase> = FormGroup<T>;

说明 #

三种方案均能在保持强类型校验的前提下解决约束错误：

• 方案1不修改原有接口结构，通过泛型双重校验实现
• 方案2写法灵活，适合不需要接口扩展的场景
• 方案3通过基接口统一约束，适合多表单接口的大型项目

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