升级Antd至5.5后React TypeScript项目Icon组件报rev属性缺失错误

问题描述 #

将React TypeScript项目中的antd从5.1版本升级至5.5版本后，所有使用Icon组件（如ReloadOutlined）的地方出现编译错误：

Property 'rev' is missing in type '{}' but required in type 'Pick<AntdIconProps, "value" | "onChange" | "color" | "content" | "height" | "rotate" | "translate" | "width" | "start" | "hidden" | "cite" | "data" | "form" | 
"label" | ... 349 more ... | "twoToneColor">'.
    25 |   return (
    26 |     <div>
  > 27 |       <ReloadOutlined />
       |        ^^^^^^^^^^^^^^
    28 |     </div>
    29 |   );

临时通过传入rev={undefined}可以绕过错误，但仅当前项目出现此问题，其他项目及antd官方示例无异常。

可能的原因及排查方向 #

1. 全局类型定义冲突 #

antd的Icon组件会继承HTML元素的属性类型，如果项目中存在全局类型扩展，强制将rev设为必填属性，就会导致所有继承HTML属性的组件（包括Icon）都要求传入该属性。

• 排查项目中的全局.d.ts文件（如src/types/global.d.ts或@types目录下的自定义类型），检查是否有类似以下代码：

  declare module 'react' {
    interface HTMLAttributes<T> {
      rev: string; // 此处将rev设为必填，引发冲突
    }
  }
  

• 若存在此类定义，将rev改为可选（rev?: string）即可解决。

2. 依赖版本不兼容 #

antd 5.5对依赖版本有特定要求，若项目中@ant-design/icons、@types/react或@types/react-dom版本不匹配，会导致类型解析异常：

• 检查package.json中@ant-design/icons的版本，确保其与antd 5.5的peerDependencies要求一致；
• 确认@types/react和@types/react-dom的版本与项目使用的React版本兼容，避免版本过低或过高导致类型冲突。

3. TypeScript类型缓存异常 #

TypeScript的类型缓存可能未更新，导致旧的类型定义残留：

• 执行以下命令清除缓存后重新编译：

  # Create React App项目
  rm -rf node_modules/.cache
  # 通用TS项目
  npx tsc --clean
  

• 清除缓存后重新安装依赖（npm install或yarn install）再尝试编译。

4. 自定义Icon组件/类型扩展问题 #

若项目中存在自定义的Icon包装组件或对AntdIconProps的扩展修改，升级antd后这些自定义代码未同步更新，会引发类型冲突：

• 排查项目中封装的Icon组件，检查是否对AntdIconProps做了不合理的类型约束；
• 确保自定义组件的类型定义与antd 5.5的AntdIconProps结构保持一致。

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