React+TS使用Ant Design表单遍历数组时的TypeScript类型错误

问题场景 #

在React+TS项目中使用Ant Design开发表单时，通过遍历数组批量渲染Form.Item组件，某数组元素的rules配置触发了类型不兼容错误。

错误代码示例 #

const FormItems = [
  {
    name: 'email',
    label: 'Email',
    rules: { type: 'email', required: true }, // 此处为错误触发点
    inputType: <Input />,
  },
];

// 表单渲染逻辑
{FormItems.map((item) => (
  <Form.Item
    name={['user', item.name]}
    label={item.label}
    rules={[item.rules]} // 此处标红报错
  >
    {item.inputType}
  </Form.Item>
))}

错误信息 #

Type '{ type: string; required: boolean; }' is not assignable to type 'Rule'.
  Type '{ type: string; required: boolean; }' is not assignable to type 'ArrayRule'.
    Types of property 'type' are incompatible.
      Type 'string' is not assignable to type '"array"'.ts(2322)

原因分析 #

TypeScript无法自动推断rules中type字段的具体枚举值，将'email'识别为宽泛的string类型；而Ant Design的Rule类型要求type必须是预定义的枚举值（如'email'、'array'、'number'等），最终导致类型匹配失败。

解决方案 #

提供三种可行的修复方式：

方式一：为数组显式指定类型 #

导入Ant Design的Rule类型，为表单配置数组定义明确的类型约束：

import { Rule } from 'antd/es/form';

// 定义单个表单项的类型
interface FormItemConfig {
  name: string;
  label: string;
  rules: Rule;
  inputType: React.ReactNode;
}

// 为数组指定类型
const FormItems: FormItemConfig[] = [
  {
    name: 'email',
    label: 'Email',
    rules: { type: 'email', required: true },
    inputType: <Input />,
  },
];

方式二：使用类型断言锁定type值 #

直接给type字段添加as const断言，明确其为Rule允许的枚举值：

const FormItems = [
  {
    name: 'email',
    label: 'Email',
    rules: { type: 'email' as const, required: true },
    inputType: <Input />,
  },
];

方式三：直接使用数组格式定义规则 #

Ant Design的rules属性本身支持数组形式，可直接将单个规则包裹为数组，帮助TypeScript自动推断类型：

const FormItems = [
  {
    name: 'email',
    label: 'Email',
    rules: [{ type: 'email', required: true }],
    inputType: <Input />,
  },
];

// 渲染时直接传入规则数组
rules={item.rules}

内容的提问来源于stack exchange，提问作者Mikołaj Wittbrodt