在 Angular 中派生类型化 FormGroup 的值的类型

Question

使用 Angular 中新的类型化表单控件，我们可以做到这一点：

interface MyFormGroup {
    id: FormControl<number | null>;
    name: FormControl<string | null>;
    email: FormControl<string | null>;
}

它为以下

FormControl

中的每个

FormGroup

定义了一个类型：

myFormGroup = new FormGroup<MyFormGroup>({
    id: new FormControl(42),
    name: new FormControl('Arthur'),
    email: new FormControl('[email protected]')
});

这个

FormGroup

的值的类型是：

Partial<{
    id: number | null;
    name: string | null;
    email: string | null;
}>

如果我想在函数中使用

FormGroup

的值，是否有获取该值类型的快捷方式，或者必须单独定义，例如

interface MyFormGroupValue {
    id: number | null;
    name: string | null;
    email: string | null;
}

myFunction(myFormGroupValue: MyFormGroupValue){
    console.log(myFormGroupValue);
}

换句话说，是否可以从

MyFormGroupValue

导出类型

MyFormGroup

？

Answer 1

使用 映射类型 和

infer

关键字就可以解决问题。

type ExtractFormControl<T> = {
    [K in keyof T]: T[K] extends FormControl<infer U> ? U : T[K]
}

type MyFormGroupValue = ExtractFormControl<MyFormGroup>
// type MyFormGroupValue = {
//     id: number | null;
//     name: string | null;
//     email: string | null;
// }

游乐场

Answer 2

跟进 @Tobias S 的出色答案。如果您有

FormGroup

或

FormArray

以及嵌套控件，您可能需要使用递归来遍历完整结构的东西，例如：

export type ExtractFormControl<T> = {
  [K in keyof T]
  : T[K] extends FormControl<infer U>
  ? U
  : T[K] extends FormArray<FormControl<infer U>>
  ? Array<U>
  : T[K] extends FormArray<FormGroup<infer U>>
  ? Array<Partial<ExtractFormControl<U>>>
  : T[K] extends FormGroup<infer U>
  ? Partial<ExtractFormControl<U>>
  : T[K]
}

Answer 3

扩展 Matt Saunders 的答案，如果您的表单中有可选属性，这将有所帮助，例如：

// Interface with optional form controls
interface MyFormGroup {
    id?: FormControl<number | null>;
    name?: FormControl<string | null>;
    email?: FormControl<string | null>;
}

更新了

ExtractFormControl

以处理可选属性：

export type ExtractFormControl<T> = {
  [K in keyof T]
  : T[K] extends FormControl<infer U>
  ? U
  : T[K] extends (FormControl<infer U> | undefined)
  ? (U | undefined)
  : T[K] extends FormArray<FormControl<infer U>>
  ? Array<U>
  : T[K] extends (FormArray<FormControl<infer U>> | undefined)
  ? (Array<U> | undefined)
  : T[K] extends FormArray<FormGroup<infer U>>
  ? Array<Partial<ExtractFormControl<U>>>
  : T[K] extends (FormArray<FormGroup<infer U>> | undefined)
  ? (Array<Partial<ExtractFormControl<U>>> | undefined)
  : T[K] extends FormGroup<infer U>
  ? Partial<ExtractFormControl<U>>
  : T[K] extends (FormGroup<infer U> | undefined)
  ? (Partial<ExtractFormControl<U>> | undefined)
  : T[K]
}