如何在TypeScript中结合扩展语法与泛型编写正确的React HOC

先看你提供的报错代码和错误信息：

原代码 #

import { ComponentType } from 'react';

type Props<T> = {
  value: T
}

function HOC<P extends Props<any>>(Comp: ComponentType<P>) {
  type ValueType = P extends Props<infer T> ? T : never
  type Example = Omit<P, 'value'> & { value1: ValueType }

  return function CompWithHOC(props: Example) {
    const { value1, ...rest } = props
    const compProps: P = { // 报错位置
      ...rest,
      value: value1
    }
    return <Comp {...compProps}></Comp>
  }
}

错误信息 #

Type 'Omit<Example, "value1"> & { value: ValueType; }' is not assignable to type 'P'.
'Omit<Example, "value1"> & { value: ValueType; }' is assignable to the constraint of type 'P', but 'P' could be instantiated with a different subtype of constraint 'Props'

错误原因 #

TypeScript无法确保你组装的compProps完全匹配泛型P的类型。因为P是Props<any>的子类型，可能包含额外的属性约束或更具体的类型定义——比如P可能是Props<number> & { requiredFlag: boolean }，此时TypeScript无法确认rest包含了P中除value外的所有属性，也无法保证value的类型完全符合P的具体要求，所以抛出了类型不兼容的错误。

修正方案 #

方案1：拆分泛型参数，明确类型边界 #

这种方式更安全，通过拆分泛型让TypeScript能准确推导类型：

import { ComponentType } from 'react';

type BaseProps<T> = {
  value: T;
};

// 拆分泛型：T是value的类型，ExtraProps是组件的额外属性
function HOC<T, ExtraProps extends Record<string, unknown>>(
  Comp: ComponentType<BaseProps<T> & ExtraProps>
) {
  // 定义HOC接收的props：替换value为value1，保留其他属性
  type HOCProps = ExtraProps & { value1: T };

  return function CompWithHOC(props: HOCProps) {
    const { value1, ...rest } = props;
    // 明确组装后的props类型，TypeScript可直接推导
    const compProps = {
      ...rest,
      value: value1,
    };
    return <Comp {...compProps} />;
  };
}

方案2：类型断言（简化但需自行保证安全） #

如果你的场景中能确认compProps的结构完全符合P，可以用类型断言跳过TypeScript的检查：

// 原代码修改报错行
const compProps = {
  ...rest,
  value: value1
} as P;

规范编写HOC的要点 #

• 明确泛型边界：避免使用any这类模糊类型，拆分复杂泛型参数让类型推导更准确
• 保持props传递清晰：HOC的输入输出props要明确，避免隐式的属性覆盖或丢失
• 优先类型推导，谨慎使用断言：只有在你能保证类型安全的情况下，才使用类型断言跳过检查
• 遵循React HOC设计原则：不要修改原始组件，返回新的纯组件；避免在HOC中添加不必要的副作用；给HOC返回的组件命名（比如CompWithHOC），方便调试

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