TypeScript参数推断报错逻辑反向？React高阶组件类型问题

问题重现 #

你在React中编写高阶组件（HOC）时，希望仅接收props包含content字段的组件，但传入不兼容组件（仅含other字段）时，TypeScript的报错信息看起来逻辑反向：提示RequiredProps缺少other字段，而非传入的组件缺少content字段。

合法示例代码（运行正常）：

type RequiredProps = {
  content: string;
};
type ComponentType<T> = (props: T) => string;
    
function withDiv<T extends RequiredProps>(Component: ComponentType<T>) {
  const result = (props: T) => `
    <div>
      ${Component(props)}
    </div>
  `;
  return result;
}

function TestComponent(props: { content: string }) {
  return `<p>${props.content}</p>`;
}
    
const TestComponentWithDiv = withDiv(TestComponent);

不兼容组件的报错场景：

export function BadComponent(props: { other: string }) {
  return `<p>${props.other}</p>`;
}
export const BadComponentWithDiv = withDiv(BadComponent);

报错信息：

Argument of type '(props: { other: string; }) => string' is not assignable to parameter of type 'ComponentType<RequiredProps>'.
  Types of parameters 'props' and 'props' are incompatible.
    Property 'other' is missing in type 'RequiredProps' but required in type '{ other: string; }'.ts(2345)

原因分析 #

这个“反向”报错的核心是TypeScript的函数参数逆变特性，加上泛型推断的 fallback 逻辑：

1. 泛型推断失败：当你传入BadComponent时，TypeScript首先尝试推断泛型T为{ other: string }，但这个类型并不满足T extends RequiredProps（缺少content字段），因此推断失败。
2. ** fallback 到直接类型匹配**：TypeScript会退而求其次，尝试将withDiv的参数类型匹配为ComponentType<RequiredProps>（即(props: RequiredProps) => string），检查BadComponent是否能赋值给这个类型。
3. 函数参数逆变的兼容性检查：函数类型的兼容性遵循逆变规则：若要将函数F赋值给函数类型G，G的参数类型必须是F参数类型的子类型（即F能接收G的参数）。这里，BadComponent要求参数必须有other字段，但RequiredProps没有这个字段，因此TypeScript认为RequiredProps无法满足BadComponent的参数要求，从而报错提示RequiredProps缺少other。

简单来说，TypeScript的报错是站在“赋值是否可行”的角度描述问题，而非直接指出传入组件不符合你的约束要求。

解决方法 #

要让报错信息符合预期（直接提示组件缺少content字段），需要调整泛型约束，强制要求传入的组件必须能接收包含RequiredProps的props：

type RequiredProps = {
  content: string;
};
type ComponentType<T> = (props: T) => string;

// 修改泛型约束，明确组件需接收包含RequiredProps的props
function withDiv<T>(Component: ComponentType<T & RequiredProps>) {
  const result = (props: T & RequiredProps) => `
    <div>
      ${Component(props)}
    </div>
  `;
  return result;
}

此时再传入BadComponent，TypeScript会直接报错：

Argument of type '(props: { other: string; }) => string' is not assignable to parameter of type 'ComponentType<{ other: string; } & RequiredProps>'.
  Types of parameters 'props' and 'props' are incompatible.
    Property 'content' is missing in type '{ other: string; }' but required in type '{ other: string; } & RequiredProps'.ts(2345)

这个报错清晰指出BadComponent的props缺少必填的content字段，符合你的预期。

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