Angular中如何从已类型化FormGroup推导其值的类型？

当然可以不用单独定义MyFormGroupValue这类接口，有两种快捷方式直接从MyFormGroup或其实例推导值类型：

1. 已有FormGroup实例时直接推导 #

如果已经创建了myFormGroup实例，直接通过typeof操作符获取其value属性的类型即可：

// 假设已定义myFormGroup实例
type MyFormGroupValue = typeof myFormGroup.value;

推导后的MyFormGroupValue会自动匹配你需要的Partial<{id: number | null; name: string | null; email: string | null}>类型。

2. 仅通过MyFormGroup接口推导 #

如果还没创建实例，只需要从MyFormGroup接口推导，有两种方式：

方法一：自定义映射类型 #

用TypeScript的映射类型提取每个FormControl的泛型值类型，再包裹Partial：

import { FormControl } from '@angular/forms';

type ExtractFormGroupValue<T> = Partial<{
  [Key in keyof T]: T[Key] extends FormControl<infer Value> ? Value : never;
}>;

// 生成目标类型
type MyFormGroupValue = ExtractFormGroupValue<MyFormGroup>;

方法二：复用Angular内置类型 #

Angular的FormGroup<T>已经内置了value属性的类型定义，直接取用即可：

import { FormGroup } from '@angular/forms';

type MyFormGroupValue = FormGroup<MyFormGroup>['value'];

这个类型和你手动定义的Partial<{...}>完全一致，无需重复编写。

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