在 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('arthur@dent.com')
});

该值的类型FormGroup为：

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

如果我想FormGroup在函数中使用 the 的值，是否有获取该值类型的快捷方式，或者必须单独定义它，例如

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;
// }

操场