TypeScript中如何限制FormGroup的值类型？自定义接口无效原因

为什么原有代码无效？ #

你通过接口扩展FormGroup并重写value属性的方式不生效，核心原因有两点：

1. TypeScript里，接口重写类的属性仅做类型标注，不会改变原类（Angular的FormGroup）的类型检查逻辑。this.fb.group()返回的是原生FormGroup实例，它的value类型是Angular内置的动态类型，不会因为你定义的InfoFormGroup接口就自动校验值的结构。
2. 原生FormGroup的value类型本身宽泛（Partial<T>或类似动态类型），TypeScript会判定原生FormGroup和你定义的InfoFormGroup类型兼容，因此不会触发报错，哪怕修改InfoInterface的属性也不会有提示。

另外你代码里的qian未加引号，属于语法错误，需修正为字符串字面量'qian'。

正确的实现方式 #

方式一：使用Angular 14+的FormBuilder泛型参数（推荐） #

Angular 14及以上版本为FormBuilder.group添加了泛型支持，可直接指定值的类型，创建时自动校验控件初始值和类型是否匹配：

interface InfoInterface {
  id: number;
  name: string;
  amount: number;
}

// 直接通过泛型指定值类型
const defaultInfo = this.fb.group<InfoInterface>({
  id: [1],
  name: ['qian'],
  amount: [123]
});

此时若修改InfoInterface的属性（比如把name改为number类型），TypeScript会立刻报错，提示控件初始值'qian'与number类型不匹配。

方式二：低版本Angular手动定义FormGroup类型 #

若使用Angular 14以下版本，可手动定义对应FormGroup的控件结构类型，再做类型断言：

interface InfoInterface {
  id: number;
  name: string;
  amount: number;
}

// 定义包含FormControl的FormGroup类型
type InfoFormGroup = FormGroup<{
  id: FormControl<number>;
  name: FormControl<string>;
  amount: FormControl<number>;
}>;

const defaultInfo: InfoFormGroup = this.fb.group({
  id: [1],
  name: ['qian'],
  amount: [123]
}) as InfoFormGroup;

这种方式下，若控件初始值类型不匹配，TypeScript同样会给出错误提示。

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