高阶组件覆写属性时的TypeScript泛型推断问题

你遇到的问题核心是：TypeScript编译器无法自动将React.FC<Props & XType<T>>这种交集类型拆分为独立的Props和T泛型参数，导致省略显式泛型时触发编译错误。

解决方案：通过infer反向提取类型 #

我们可以调整泛型推断逻辑，先获取组件完整的props类型，再从中拆分出XType<T>的部分和剩余的业务props：

import React from 'react';

type XType<T> = { x: T };

// 从props类型中提取XType对应的T类型
type ExtractXValueType<P> = P extends XType<infer T> ? T : never;
// 从props类型中剔除XType的所有属性，得到业务props类型
type ExtractBusinessProps<P> = Omit<P, keyof XType<any>>;

function extractTypes<C extends React.FC<infer P>>(Component: C) {
  return (props: ExtractBusinessProps<P>, value: ExtractXValueType<P>) => {
    // 类型断言确保编译器识别合并后的props符合组件要求
    Component({ ...props, x: value } as P);
  };
}

// 测试代码
const CompA: React.FC<{ a: string } & XType<string>> = () => <div>HELLO</div>;
const CompB: React.FC<{ b: string } & XType<number>> = () => <div>WORLD</div>;

// 自动推断正常，无需显式指定泛型
extractTypes(CompA)({ a: 'A' }, 'X'); // 编译通过
extractTypes(CompB)({ b: 'B' }, 1);   // 编译通过

原理说明 #

1. 利用infer P从组件的React.FC类型中提取出完整的props类型P
2. 通过ExtractXValueType条件类型，从P中反向推断出XType对应的T类型
3. 通过ExtractBusinessProps用Omit剔除XType的属性，得到仅包含业务字段的props类型
4. 最后在调用组件时用类型断言as P消除编译器的类型歧义

为什么之前的尝试失败？ #

你之前直接在泛型参数中使用Omit<Props, keyof XType<T>>的方式无法生效，因为此时Props和T还未被编译器推断出来，Omit无法基于未确定的类型进行计算。而调整后的逻辑是先获取完整的props类型，再进行拆分，符合TypeScript的推断顺序。

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