TypeScript中为FormField对象动态赋值触发类型错误是什么原因？

• TypeScript 限定仅能使用目标类型已声明的属性名作为索引访问对象属性。代码中saveFormField函数的key参数为宽泛的string类型，TypeScript 无法确认该参数值一定是FormField类型声明的合法属性，因此触发索引类型不匹配的编译错误。
• 额外的类型隐患：value参数为any类型，即便传入的key是合法属性，TypeScript 也无法校验传入值与属性的类型是否匹配。

方案1：限制参数类型（最推荐，完整保留类型校验能力） #

通过泛型约束让key只能是FormField的合法属性，同时自动匹配对应属性的value类型：

// 提取FormField所有合法属性的联合类型
type FormFieldKey = keyof FormField;

// 泛型约束入参类型
const saveFormField = <K extends FormFieldKey>(key: K, value: FormField[K]) => {
    let formField: FormField = {
      name: reloadProps?.formField?.name ?? "",
      type: reloadProps?.formField?.type ?? "",
      mandatory: reloadProps?.formField?.mandatory ?? false,
      regex: reloadProps?.formField?.regex ?? "",
      selectItemOtherArbitraryValueEnable:
        reloadProps?.formField?.selectItemOtherArbitraryValueEnable,
    };
    formField[key] = value;
    // 原有后续逻辑
};

修改后调用函数时，TypeScript 会自动校验入参的合法性：仅能传入FormField已声明的属性名，且传入值的类型必须与对应属性的类型一致。

方案2：类型断言绕过校验（适合可确认入参合法的场景，快速解决编译问题） #

如果业务逻辑可以保证传入的key一定是FormField的合法属性、value类型匹配，可以用类型断言跳过校验：

// 仅断言key类型
formField[key as keyof FormField] = value;
// 也可以直接断言整个对象为any，完全跳过校验（不推荐）
(formField as any)[key] = value;

注意：该方案会丢失类型校验能力，存在类型安全隐患，仅建议临时使用。

方案3：给类型增加索引签名（适合需要大量动态赋值的场景） #

如果业务场景确实需要频繁给该类型对象动态赋值，可以直接在类型定义中增加字符串索引签名，放开索引限制：

export type FormField = {
  // 增加字符串索引签名
  [key: string]: any;
  name: string;
  type: string;
  mandatory: boolean;
  options?: FormFieldOptionsType;
  visibleIfIndIsVisible?: number;
  ind?: number;
  value?: string;
  dateCreatedAt?: string;
  selectItemOtherArbitraryValueEnable?: boolean;
  regex?: string;
  defaultFormFieldOptionId?: string;
};

该方案会放宽整个类型的校验规则，TypeScript 后续无法再对FormField的属性做严格的类型校验，仅建议确实需要动态属性的场景使用。

内容的提问来源于stack exchange，提问作者János