为Formik表单字段自定义组件添加TypeScript类型时报错求助

问题根源 #

原代码中泛型T无类型约束，导致T[keyof T]可能是任意类型（比如boolean、对象等），而原生input的value仅接受string | number | readonly string[] | undefined类型，因此TypeScript抛出类型不匹配错误。同时inputName被定义为普通string，无法和泛型T的键关联，存在类型不安全隐患。

解决方案 #

通过两步修改解决问题：

1. 定义input值允许的类型，约束泛型T的所有属性都属于该类型
2. 让组件props的字段名与泛型T的键绑定，避免类型断言并提升类型安全性

修改后的代码 #

首先定义通用的input值类型：

type InputValue = string | number | readonly string[] | undefined;

然后重构FormField组件：

interface FormFieldProps<T> {
  name: keyof T;
  type: string;
}

export default function FormField<T extends Record<string, InputValue>>({ name, type }: FormFieldProps<T>) {
  const { values } = useFormikContext<T>();

  return (
    <input
      type={type}
      value={values[name]}
      name={name as string} // 将keyof T转为string，符合input的name属性要求
    />
  );
}

代码说明 #

• T extends Record<string, InputValue>：确保泛型T的每个属性值都符合input的value类型要求，从根源上避免类型不匹配
• name: keyof T：强制传入的字段名必须是T的有效键，避免传入不存在的字段名，提升类型安全性
• name as string：因为keyof T可能包含symbol类型，但表单字段名通常是字符串，因此做类型转换

扩展处理（可选） #

如果表单中存在null类型的字段值，可以扩展InputValue类型：

type InputValue = string | number | readonly string[] | undefined | null;

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