TypeScript升级至4.8.4后泛型Props类型不兼容问题求助

为什么TypeScript 4.8会报错？ #

TypeScript 4.8对JSX元素的属性类型检查做了更严格的约束。当你在JSX中渲染组件时，TypeScript会自动将JSX.IntrinsicAttributes（React内置的通用属性，比如key、ref）与组件的props类型做合并。在4.7.4及更早版本中，这个合并逻辑的类型检查比较宽松，即使泛型Props没有明确兼容IntrinsicAttributes，也不会报错；但4.8.4修复了这个类型漏洞，强制要求组件的props类型必须能兼容IntrinsicAttributes，否则会抛出类型不匹配的错误。

你提到查看React源码没发现强制要求，这是因为FunctionComponent的定义本身并没有限制泛型参数必须继承IntrinsicAttributes——这个约束来自TypeScript的JSX类型检查逻辑，而非React库的类型定义。

正确的处理方式 #

方法1：给泛型参数添加extends约束（推荐） #

按照错误提示，给泛型Props加上extends JSX.IntrinsicAttributes的约束，确保它至少兼容React的内置属性：

import { FunctionComponent } from 'react';

export const withSomething = function <Props extends JSX.IntrinsicAttributes>(
  Component: FunctionComponent<Props>
): FunctionComponent<Props> {
  const WithSomething = function (props: Props) {
    return <Component {...props} />;
  };

  return WithSomething;
};

这个方案最直接，也符合TypeScript 4.8之后的类型检查规范，能避免后续版本的类似问题。

方法2：让组件props自动推导类型 #

如果你不想显式添加约束，可以让WithSomething的props类型自动继承原始组件的props类型，比如：

import { FunctionComponent } from 'react';

export const withSomething = function <Props>(
  Component: FunctionComponent<Props>
): FunctionComponent<Props> {
  const WithSomething: FunctionComponent<Props> = (props) => {
    return <Component {...props} />;
  };

  return WithSomething;
};

这里通过显式声明WithSomething的类型为FunctionComponent<Props>，让TypeScript自动处理IntrinsicAttributes的合并，也能绕过错误。不过本质上和方法1的效果一致，只是写法不同。

补充说明 #

这个变化是TypeScript团队为了提升JSX类型安全性做出的调整，目的是确保所有组件的props都能正确处理React的内置属性，避免出现比如key类型不合法、ref无法正确传递等潜在问题。虽然看起来是额外的约束，但能让代码的类型更严谨，减少运行时的隐藏bug。

内容的提问来源于stack exchange，提问作者L.J.