Angular表单控件中使用Enum类型的类型匹配报错问题

问题代码 #

export enum Frequency {
  DAILY = 'DAILY',
  WEEKLY = 'WEEKLY',
  MONTHLY = 'MONTHLY',
  QUARTERLY = 'QUARTERLY',
  HALF_YEARLY = 'HALF_YEARLY',
  YEARLY = 'YEARLY',
}

export type MyForm = FormGroup<{
  frequency: FormControl<Frequency>,
}>

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;

  public form: MyForm = new FormGroup({
    frequency: new FormControl(Frequency.DAILY),
  })
}

报错信息 #

Type 'FormGroup<{ frequency: FormControl<Frequency.DAILY>; }>' is not assignable to type 'MyForm'.
Type 'FormControl<Frequency>' is not assignable to type 'FormControl<Frequency.DAILY>'.
Type 'Frequency' is not assignable to type 'Frequency.DAILY'.

问题原因 #

TypeScript会根据你传入的初始值Frequency.DAILY，自动把FormControl的类型推断为FormControl<Frequency.DAILY>，但你的MyForm类型要求的是接受整个Frequency枚举类型的FormControl<Frequency>，两者类型范围不一致，导致类型不兼容。

解决方法 #

方法1：给FormControl显式指定泛型类型

直接在创建FormControl时，通过泛型参数明确指定它的类型为Frequency，让TypeScript知道这个控件可以接受枚举中所有值：

public form: MyForm = new FormGroup({
  frequency: new FormControl<Frequency>(Frequency.DAILY),
})

方法2：使用类型断言拓宽初始值类型

通过类型断言，告诉TypeScript初始值的类型是整个Frequency枚举，而不仅仅是Frequency.DAILY：

public form: MyForm = new FormGroup({
  frequency: new FormControl(Frequency.DAILY as Frequency),
})

两种方法都能解决类型不匹配的问题，推荐第一种，因为显式指定泛型类型更清晰，也符合TypeScript的类型安全原则。

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