TypeScript中如何在消费侧推断第三方组件的forwardRef类型

解决方案 #

你可以使用React内置的React.ElementRef工具类型直接提取第三方组件的ref类型，无需提前知晓其绑定的DOM元素类型。React.forwardRef的第一个泛型参数填入React.ElementRef<typeof ThirdPartyComponent>即可。

修改后的完整代码如下：

import React from "react";

interface ThirdPartyComponentProps
  extends React.ComponentPropsWithRef<"input"> {}

const ThirdPartyComponent: React.ComponentType<ThirdPartyComponentProps> = 
  React.forwardRef<HTMLInputElement, ThirdPartyComponentProps>(
    (props: ThirdPartyComponentProps, ref) => {
      return (
        <div>
          <input ref={ref} type="text" {...props} />
        </div>
      );
    }
  );

interface AppProps
  extends React.ComponentPropsWithRef<typeof ThirdPartyComponent> {}

// 填入提取到的ref类型即可解决报错
export const App = React.forwardRef<React.ElementRef<typeof ThirdPartyComponent>, AppProps>(
  (props, ref) => {
    return <ThirdPartyComponent ref={ref} {...props} />;
  }
);

原理解释 #

• React.ElementRef<T>是React官方类型定义中专门用于提取组件对外暴露的ref实例类型的工具泛型，支持原生DOM组件、forwardRef封装的自定义组件等所有合法的React组件类型。
• 只要第三方组件的类型定义是正确导出的，ElementRef就能自动推断出其转发的ref的具体类型，无需你从报错信息中手动获取目标元素类型。
• 你之前的报错是因为没有给外层forwardRef指定ref泛型，TS默认将ref推导为unknown类型，和第三方组件期望的ref类型不匹配，用ElementRef提取后类型即可对齐，报错自然消失。

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