能否基于模型创建动态TypeScript类型？Angular 14表单类型自动生成

问题描述 #

我有如下的AddressModel接口：

interface AddressModel {
  street: string | null;
  streetNumber: string | null;
  postalCode: string | null;
  city: string | null;
  country: string | null;
  latitude: number | null;
  longitude: number | null;
}

Angular 14发布后，我希望基于该接口自动生成一个带类型的FormGroup类型，最终目标类型如下：

interface AddressFormGroup {
  street: FormControl<string | null>;
  streetNumber: FormControl<string | null>;
  postalCode: FormControl<string | null>;
  city: FormControl<string | null>;
  country: FormControl<string | null>;
  latitude: FormControl<number | null>;
  longitude: FormControl<number | null>;
}

我知道可以手动创建这个类型，但想了解TypeScript是否有自动化实现的特性？

解决方案 #

当然可以，TypeScript的**映射类型（Mapped Types）**就是专门用来实现这种自动转换类型的特性，它能遍历原类型的所有属性并对每个属性的类型进行转换。

具体实现 #

1. 定义一个泛型映射类型，将原接口的每个属性类型包裹为FormControl<T>：

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

type FormGroupFromModel<T> = {
  [K in keyof T]: FormControl<T[K]>;
};

这里的[K in keyof T]会遍历T的所有属性名，T[K]取到对应属性的原始类型，再将其作为FormControl的泛型参数，完成类型转换。

2. 直接使用该泛型类型生成目标表单组类型：

type AddressFormGroup = FormGroupFromModel<AddressModel>;

这样生成的AddressFormGroup与你手动定义的类型完全一致。后续如果AddressModel的属性发生修改，AddressFormGroup会自动同步更新，无需手动维护，大幅减少重复代码的编写。

适配Angular 14的说明 #

Angular 14对表单类型系统做了针对性增强，支持直接为FormControl、FormGroup传入泛型参数，这让TypeScript映射类型的能力能完美适配Angular表单的类型需求，确保表单控件的值类型与原数据模型严格对应，避免类型不匹配的问题。

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