Angular类型化表单：如何正确为动态字段添加类型并创建？

我创建了如下FormGroup：

this.formBuilder.group<{
    id: number;
    nameDe?: FormControl<string>;
    nameFr?: FormControl<string>;
    nameIt?: FormControl<string>;
}>({
    id: value?.id || null
});

重点关注nameXY字段，这些字段会根据条件动态添加：

languages.forEach((lang) => { // languages可以是['De', 'Fr']或['Fr', 'It']
    const nameIdentifier = 'name' + lang;
    formGroup.addControl(nameIdentifier, new FormControl<string>(value?.[nameIdentifier] || '', Validators.required));
});

此时出现错误：

Argument of type 'string' is not assignable to parameter of type ...

原因是nameIdentifier仅为string类型，而非'nameDe' | 'nameFr'| 'nameIt'。我尝试显式定义nameIdentifier的类型：

const nameIdentifier: 'nameDe' | 'nameFr' | 'nameIt' = 'name' + lang;

但又出现错误：

Type 'string' is not assignable to type "nameDe" | "nameFr" | "nameIt".ts(2322)

需要无需大量显式类型定义的简洁解决方案。

方法1：类型断言（最简实现） #

直接对拼接后的字符串做类型断言，明确告诉TypeScript它属于目标联合类型：

languages.forEach((lang) => {
    const nameIdentifier = `name${lang}` as 'nameDe' | 'nameFr' | 'nameIt';
    formGroup.addControl(nameIdentifier, new FormControl<string>(value?.[nameIdentifier] || '', Validators.required));
});

方法2：约束语言数组的字面量类型 #

先给languages指定严格的字面量类型，让TypeScript自动推导nameIdentifier的合法类型：

// 定义语言后缀的字面量类型
type LangSuffix = 'De' | 'Fr' | 'It';
// 约束languages只能是该类型的数组
const languages: LangSuffix[] = ['De', 'Fr']; // 支持任意合法组合

languages.forEach((lang) => {
    // TS会自动识别`name${lang}`为合法的联合类型成员
    const nameIdentifier = `name${lang}` as const;
    formGroup.addControl(nameIdentifier, new FormControl<string>(value?.[nameIdentifier] || '', Validators.required));
});

方法3：模板字面量类型复用 #

用模板字面量类型自动生成控件键名的联合类型，避免重复编写nameXX：

// 定义语言后缀类型
type LangSuffix = 'De' | 'Fr' | 'It';
// 自动生成控件键名的联合类型
type NameControlKey = `name${LangSuffix}`;

// 复用类型定义FormGroup结构
type MyFormType = {
    id: number;
} & { [K in NameControlKey]?: FormControl<string> };

// 创建FormGroup时使用复用的类型
this.formBuilder.group<MyFormType>({
    id: value?.id || null
});

// 动态添加控件
const languages: LangSuffix[] = ['De', 'Fr'];
languages.forEach((lang) => {
    const nameIdentifier = `name${lang}` as NameControlKey;
    formGroup.addControl(nameIdentifier, new FormControl<string>(value?.[nameIdentifier] || '', Validators.required));
});

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