reactjs - 推断消费端组件中第三方组件的forwardref类型

Question

我读过这个问题 Generics error with forwardRef: Property 'ref' does not exist on type 'IntrinsicAttributes'
这是我的情况:

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> {}

export const App = React.forwardRef((props: AppProps, ref) => {
  return <ThirdPartyComponent ref={ref} {...props} />;
});

得到 TS 类型错误:

Type '((instance: unknown) => void) | MutableRefObject<unknown> | null' is not assignable to type '((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined'.
  Type 'MutableRefObject<unknown>' is not assignable to type '((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined'.
    Type 'MutableRefObject<unknown>' is not assignable to type 'RefObject<HTMLInputElement>'.
      Types of property 'current' are incompatible.
        Type 'unknown' is not assignable to type 'HTMLInputElement | null'.
          Type 'unknown' is not assignable to type 'HTMLInputElement'.ts(2322)
index.d.ts(816, 46): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & ThirdPartyComponentProps & { children?: ReactNode; }'

自 ThirdPartyComponent组件是第三方库的组件，我不知道前向引用用于哪个HTML元素。它可能是根元素或内部元素，例如 input示例中的元素。
我知道转发引用的类型是 HTMLInputELement来自错误，但这是我通过错误学到的 ref 类型。
如何声明或推断 ThirdPartyComponent 的类型ref 直接在消费者端，即在 App 中成分。 React.forwardRef<??, AppProps> 的引用类型是什么？泛型。
TypeScript Playground

Answer 1

它需要一些 typescript 体操。
自 ThirdPartyComponent是 React.ComponentType<ThirdPartyComponentProps>我们应该从 inferinf ComponentType 开始.
这是我们的第一行:

T extends React.ComponentType<infer Ref>

然后我们需要推断 ComponentType的props , 我的意思是这些 ThirdPartyComponentProps Prop 。

Ref extends React.DetailedHTMLProps<
      React.InputHTMLAttributes<infer RefElement>,
      any
    >

RefElement是我们正在寻找的元素。
全码:

import React from "react";

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

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

type InferHTMLElement<T> =
  (T extends React.ComponentType<infer Ref>
    ? (Ref extends React.DetailedHTMLProps<React.InputHTMLAttributes<infer RefElement>, any>
      ? RefElement
      : never
    )
    : never
  )

{
  // HTMLInputElement
  type Test = InferHTMLElement<typeof ThirdPartyComponent>
}

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

export const App = React.forwardRef<InferHTMLElement<typeof ThirdPartyComponent>>((props: AppProps, ref) => {

  return <ThirdPartyComponent ref={ref} {...props} />;
});

Playground
您可以尝试更换 "input"与 "div"你会看到它有效。