如何为Angular表单getRawValue返回值指定类型？

方法1：定义表单数据接口并为FormGroup指定泛型 #

先定义对应表单结构的TypeScript接口，明确每个字段的类型：

interface TaskFormData {
  description: string | undefined;
  expectedStart: Date | undefined;
  expectedEnd: Date | undefined;
  priority: string | undefined;
}

接着在声明form变量时，给FormGroup指定该泛型：

form: FormGroup<TaskFormData>;

constructor() {
  this.form = new FormGroup({
    description: new FormControl<string|undefined>({ value: undefined, disabled: false }),
    expectedStart: new FormControl<Date|undefined>({ value: undefined, disabled: false }),
    expectedEnd: new FormControl<Date|undefined>({ value: undefined, disabled: false }),
    priority: new FormControl<string|undefined>({ value: undefined, disabled: false })
  })
}

此时调用this.form.getRawValue()时，返回值会自动匹配TaskFormData类型，解构后的变量也会拥有正确的类型，无需额外手动指定：

const {
  description,
  expectedStart,
  expectedEnd,
  priority,
} = this.form.getRawValue();
// description类型为string|undefined，expectedStart为Date|undefined，以此类推

方法2：手动为解构后的变量指定类型 #

若不想给FormGroup添加泛型，也可直接在解构时手动标注类型：

const {
  description,
  expectedStart,
  expectedEnd,
  priority,
}: {
  description: string | undefined;
  expectedStart: Date | undefined;
  expectedEnd: Date | undefined;
  priority: string | undefined;
} = this.form.getRawValue();

这种方式代码冗余度较高，维护性不如第一种方法，推荐优先使用定义接口加泛型的方案。

内容的提问来源于stack exchange，提问作者Karel Čančara