使用TypeScript强制React组件包含指定属性的类型校验异常问题问询

我能理解你遇到的困惑——同样的约束逻辑对类组件生效，对函数组件却不生效，这确实很让人头疼。让我们一步步拆解问题，找到正确的解决方案。

问题根源 #

你原来的泛型约束写法存在循环依赖：

I extends React.ComponentType<{ onChange: ... } & React.ComponentProps<I>>

对于类组件（React.ComponentClass），它的props类型是逆变的，TypeScript会严格校验交叉后的props是否被满足；但对于函数组件（React.FunctionComponent），它的props类型是协变的，这种循环交叉的约束会被TypeScript“宽松处理”，导致原本应该触发的错误被忽略。

正确解决方案：拆分泛型约束 #

我们需要换一种思路：先明确组件的props类型必须包含指定的onChange，同时允许额外属性，再约束组件本身接受这个props类型。具体来说，拆分两个泛型参数：

• P：组件的props类型，强制要求包含指定的onChange
• I：接受P作为props的组件类型

修改后的组件定义如下：

import React from 'react';

function Component<
  // 第一步：强制props类型必须包含指定的onChange，同时允许其他任意属性
  P extends { onChange: (event: React.ChangeEvent<any>) => void },
  // 第二步：约束组件必须能接受上述props类型
  I extends React.ComponentType<P>
>(
  props: { component?: I; } & Omit<P, "onChange">
) {
  const { component: Component, ...rest } = props;
  const handleChange = (event: React.ChangeEvent<any>) => {
    // 处理逻辑
    console.log('changed', event);
  };
  return (
    <div>
      {Component ? (
        <Component {...rest as Omit<P, "onChange">} onChange={handleChange} />
      ) : (
        <input onChange={handleChange} />
      )}
    </div>
  );
}

验证效果 #

现在再测试你的业务代码：

class ComponentClass extends React.Component<{ color: "blue" | "yellow"; onChange: (event: React.ChangeEvent<any>) => void }> {
  render() {
    return <input style={{color: this.props.color}} onChange={this.props.onChange} />;
  }
}

// ❌ 这里会抛出类型错误：props类型缺少onChange
function ComponentFunction(props: { color: "blue" | "yellow" }) {
  return <input style={{color: props.color}} />;
}

function App() {
  return (
    <>
      {/* ✅ 正常通过：ComponentClass的props包含onChange */}
      <Component component={ComponentClass} color="blue" />
      {/* ❌ 抛出错误：ComponentFunction的props缺少onChange，符合预期 */}
      <Component component={ComponentFunction} color="blue" />
    </>
  );
}

这样不管是类组件还是函数组件，只要props类型不包含指定的onChange，TypeScript就会抛出清晰的错误，同时完全允许组件拥有其他额外属性。

补充说明 #

如果你不想在组件的props里手动写onChange（因为最终是由Component父组件注入的），可以让组件的props类型是{ onChange: ... }和自定义props的交叉，比如：

// 函数组件写法
type ComponentFunctionProps = { color: "blue" | "yellow" } & { onChange: (event: React.ChangeEvent<any>) => void };
function ComponentFunction(props: ComponentFunctionProps) {
  return <input style={{color: props.color}} onChange={props.onChange} />;
}

这样既满足了类型约束，又清晰定义了组件的完整props结构。

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