React组件可选泛型实现 解决name校验与props透传any问题

完整修正代码 #

import React from 'react';

interface MyForm {
  age: number;
  email: string;
  name: string;
}

// 改造为泛型工厂函数，拆分泛型推断逻辑
function createForm<T>() {
  return function Form<
    ComponentProps extends {
      name: string;
      onChange: (event: React.ChangeEvent) => void;
    }
  >(
    props: {
      component: React.ComponentType<ComponentProps>;
      name: keyof T;
    } & Omit<ComponentProps, "name" | "onChange">
  ) {
    const { component: Component, name, ...rest } = props;

    const handleChange = (event: React.ChangeEvent) => {
      // 业务逻辑实现
    };

    // 合并属性后断言为组件需要的完整Props类型，无需any断言
    return <Component {...({...rest, name, onChange: handleChange} as ComponentProps)} />;
  }
}

function Component(props: {
  name: string;
  onChange: (event: React.ChangeEvent) => void;
  color: "blue" | "yellow";
}) {
  const { color, name, onChange } = props;
  return <input name={name} onChange={onChange} style={{color}} />;
}

function App() {
  // 仅需传入一次表单泛型，生成绑定字段类型的Form实例
  const MyForm = createForm<MyForm>();
  return (
    <>
      {/* 此处name传非MyForm字段会直接触发TS报错 */}
      {/* <MyForm color="blue" component={Component} name="something" /> */}
      
      {/* 无需手动声明第二个泛型，color属性自动校验，name也会自动校验 */}
      <MyForm color="yellow" component={Component} name="name" />
      
      {/* 正常生效，name自动识别为合法的MyForm字段 */}
      <MyForm color="blue" component={Component} name="email" />
    </>
  );
}

问题解决说明 #

问题1：仅传入表单泛型即可实现name字段校验 #

• 核心原因：TypeScript目前不支持同一个泛型列表中「部分手动指定、部分自动推断」，因此通过柯里化拆分泛型逻辑：
  • 第一层工厂函数仅接收表单字段泛型T，返回绑定了字段类型的Form组件
  • 返回的Form组件会自动推断传入的component的Props类型，无需开发者手动声明第二个泛型
• 使用时仅需初始化一次绑定表单类型的Form实例，后续所有调用都会自动校验name字段，同时自动识别组件自定义属性（如示例的color）做类型校验。

问题2：移除any类型断言 #

• 原报错原因：TypeScript无法自动识别rest + 显式传入的name/onChange刚好匹配目标组件的完整Props要求，因此会触发类型错误
• 解决方案：将合并后的所有属性整体断言为ComponentProps，该断言逻辑完全安全，避免了any类型的使用。

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