React集成Antd执行tsc构建时Tree/TreeSelect类型继承报错

开发基于Antd组件库的React组件包时，执行npm run build命令，在tsc类型检查环节抛出类型错误，导致构建中断。

node_modules/antd/lib/tree-select/index.d.ts:18:18 - error TS2430: Interface 'TreeSelectProps<ValueType, OptionType>' incorrectly extends interface 'Omit<TreeSelectProps<ValueType, OptionType>, "mode" | "getInputElement" | "inputIcon" | "backfill" | "showTreeIcon" | "treeMotion" | "treeLine">'.
  Types of property 'switcherIcon' are incompatible.
    Type 'SwitcherIcon' is not assignable to type 'IconType'.
      Type '(props: { expanded: boolean; }) => ReactNode' is not assignable to type 'IconType'.
        Type '(props: { expanded: boolean; }) => ReactNode' is not assignable to type '(props: TreeNodeProps<DataNode>) => ReactNode'.
          Types of parameters 'props' and 'props' are incompatible.
            Type 'TreeNodeProps<DataNode>' is not assignable to type '{ expanded: boolean; }'.
              Types of property 'expanded' are incompatible.
                Type 'boolean | undefined' is not assignable to type 'boolean'.
                  Type 'undefined' is not assignable to type 'boolean'.

18 export interface TreeSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcTreeSelectProps<ValueType, OptionType>, 'showTreeIcon' | 'treeMotion' | 'inputIcon' | 'mode' | 'getInputElement' | 'backfill' | 'treeLine'> {
                    ~~~~~~~~~~~~~~~

node_modules/antd/lib/tree/Tree.d.ts:86:18 - error TS2430: Interface 'TreeProps<T>' incorrectly extends interface 'Omit<TreeProps<T>, "direction" | "draggable" | "prefixCls" | "showLine">'.
  Types of property 'icon' are incompatible.
    Type 'ReactNode | ((nodeProps: AntdTreeNodeAttribute) => ReactNode)' is not assignable to type 'IconType'.
      Type '(nodeProps: AntdTreeNodeAttribute) => ReactNode' is not assignable to type 'IconType'.
        Type '(nodeProps: AntdTreeNodeAttribute) => ReactNode' is not assignable to type '(props: TreeNodeProps<DataNode>) => ReactNode'.
          Types of parameters 'nodeProps' and 'props' are incompatible.
            Type 'TreeNodeProps<DataNode>' is not assignable to type 'AntdTreeNodeAttribute'.
              Types of property 'eventKey' are incompatible.
                Type 'Key | undefined' is not assignable to type 'string'.
                  Type 'undefined' is not assignable to type 'string'.

86 export interface TreeProps<T extends BasicDataNode = DataNode> extends Omit<RcTreeProps<T>, 'prefixCls' | 'showLine' | 'direction' | 'draggable'> {
                    ~~~~~~~~~

当前package.json核心配置如下：

{ 
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.41",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "antd": "^4.16.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.5",
    "ts-loader": "^9.3.0",
    "typescript": "^4.7.3",
    "web-vitals": "^2.1.4",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "emit-types": "tsc",
    "emit": "tsc --outDir dist --declaration --emitDeclarationOnly",
    "build": "babel src/lib --out-dir dist --extensions '.ts,.tsx' && npm run emit-types && NODE_ENV=production webpack",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

这是典型的依赖版本不兼容问题：

• 你使用的antd@4.16.0属于4.x早期版本，发布时React18、TypeScript4.7均未正式发布，内置的类型定义没有适配高版本React/TS的严格校验规则。
• Antd的Tree、TreeSelect组件底层依赖rc-tree、rc-tree-select，后续这两个底层依赖更新了类型定义，把部分属性（比如expanded、eventKey）标记为可选类型，老版本Antd的类型声明没有同步更新，TS做类型校验时就会判定类型不匹配。
• 构建脚本直接调用tsc做全量类型检查，默认会校验node_modules下的.d.ts文件，第三方包的类型错误就会直接阻塞构建。

按推荐优先级从高到低排列：

• 升级Antd到兼容版本（最彻底）
  Antd 4.20.0及之后的4.x正式版本已经完成了React18、高版本TS的类型适配，直接升级到4.x最终稳定版即可解决问题：

  npm i antd@^4.24.10
  

  升级后重新执行构建命令，错误会直接消失，也不会丢失组件的类型提示。

• 配置TS跳过依赖包类型检查（最常用）
  如果因为项目原因暂时不能升级Antd，可以修改项目根目录的tsconfig.json，开启skipLibCheck配置：

  {
    "compilerOptions": {
      "skipLibCheck": true
    }
  }
  

  这个配置只会跳过node_modules下第三方声明文件的类型检查，不会影响自身业务代码的类型校验，是组件库开发的通用配置，可以避免第三方包的类型问题阻塞自身构建。

• 临时添加类型忽略声明（仅应急用）
  如果既不能升级版本也不想修改TS配置，可以在项目全局类型声明文件（一般是src/global.d.ts，没有就新建）中添加如下声明，临时覆盖Antd的错误类型：

  declare module 'antd/es/tree' {
    interface TreeProps<T = any> {}
  }
  declare module 'antd/es/tree-select' {
    interface TreeSelectProps<ValueType = any, OptionType = any> {}
  }
  

  这种方式会丢失Tree、TreeSelect组件的类型提示，只适合临时构建救急，不推荐长期使用。

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