如何基于配置动态推断React组件的Props类型？

现有通过JSX组件<Field>实现的方案，能根据传入的组件类型（比如TextField）自动推断对应Props的类型，示例代码如下：

export interface IFieldTypeProps<TComponent extends React.ComponentType<any>> {
  type: TComponent;
  props: React.ComponentProps<TComponent>;
}

export function Field<TComponent extends React.ComponentType<any>>({
  type: Component,
  props,
}: IFieldTypeProps<TComponent>) {
  return <Component {...props} />;
}

<Field type={TextField} props={{ required: true, label: "First Name" }} />; // 可基于type自动推断props的类型

现在希望不使用JSX，仅通过配置数组实现完全相同的Props类型推断，示例配置如下：

const fields = [
  {
    type: TextField,
    props: { required: true, label: "First Name" }, // 当前无法根据上方的type推断props类型
  }, 
];

const Form = () => {
  return (
    fields.map((field) => {
      <field.type {...field.props}/>
    })
  )
}

请问这种需求是否可行？

完全可以实现，核心是给配置数组定义带泛型的联合类型，让数组中每个元素的props类型严格绑定其type指定的组件Props类型。

步骤1：定义通用字段配置类型 #

先创建一个泛型类型，描述单个字段的结构，将组件类型和其Props类型关联：

type FieldConfig<TComponent extends React.ComponentType<any>> = {
  type: TComponent;
  props: React.ComponentProps<TComponent>;
};

步骤2：定义数组的约束类型 #

为了让数组支持多种不同组件的配置，我们可以定义一个数组类型，接受任意符合FieldConfig结构的元素：

type FieldsConfig = Array<FieldConfig<React.ComponentType<any>>>;

如果需要限制只能使用特定组件（比如仅允许TextField和Checkbox），可以更精确地指定：

// 限定允许使用的组件类型
type AllowedComponents = typeof TextField | typeof Checkbox;
type FieldsConfig = Array<FieldConfig<AllowedComponents>>;

步骤3：给配置数组绑定类型 #

给fields数组指定FieldsConfig类型后，TypeScript就能自动根据每个元素的type推断props的合法类型，错误的Props会直接报错：

const fields: FieldsConfig = [
  {
    type: TextField,
    props: { required: true, label: "First Name" }, // 自动提示TextField的合法Props
  },
  {
    type: Checkbox,
    props: { label: "Agree to terms", checked: false }, // 自动匹配Checkbox的Props
  },
];

完整示例代码 #

import React from 'react';

// 示例组件（实际项目中可替换为你自己的组件）
const TextField = ({ label, required }: { label: string; required?: boolean }) => 
  <input type="text" placeholder={label} required={required} />;
const Checkbox = ({ label, checked }: { label: string; checked?: boolean }) => 
  <label><input type="checkbox" checked={checked} />{label}</label>;

// 定义字段配置的泛型类型
type FieldConfig<TComponent extends React.ComponentType<any>> = {
  type: TComponent;
  props: React.ComponentProps<TComponent>;
};

// 定义数组的约束类型
type FieldsConfig = Array<FieldConfig<React.ComponentType<any>>>;

// 配置数组，自动推断Props类型
const fields: FieldsConfig = [
  {
    type: TextField,
    props: { required: true, label: "First Name" },
  },
  {
    type: Checkbox,
    props: { label: "Agree to terms", checked: false },
  },
];

// 渲染表单
const Form = () => {
  return (
    <div>
      {fields.map((field, index) => (
        <field.type key={index} {...field.props} />
      ))}
    </div>
  );
};

关键原理 #

• React.ComponentProps<T>是TypeScript内置工具类型，用于提取组件T的Props类型
• 泛型FieldConfig<TComponent>将type和props的类型强制绑定，确保两者匹配
• 数组使用Array<FieldConfig<...>>后，每个元素会被单独做类型推断，实现type与props的关联校验

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