使用 ForwardRef 时在 TypeScript 中转换 AbstractComponent

【问题标题】：Converting AbstractComponent in TypeScript when using ForwardRef使用 ForwardRef 时在 TypeScript 中转换 AbstractComponent
【发布时间】：2021-12-14 00:58:18
【问题描述】：

我有许多使用 Flow 中内置的前向引用的组件：

const ComponentWithRef: AbstractComponent<Props, HTMLInputElement> = forwardRef<
  Props,
  HTMLInputElement,
>(function Component(props: Props, ref): Node {


  const innerRef = useRef(null);

  useImperativeHandle(ref, () => innerRef.current);

  return <div>MyComponent</div> 
})

我正在尝试将此代码库转换为 Typescript，但 AbstractComponent 不是 Typescript 的一部分。

如何处理将 Flow 的 React.AbstractComponent 转换为 Typescript 可以支持的东西：

【问题讨论】：

标签： javascript reactjs typescript flowtype

【解决方案1】：

我认为你只需要摆脱AbstractComponent 类型。考虑这个例子：

import React, { forwardRef, useRef, useImperativeHandle, ForwardedRef } from 'react'

type Props = {}


// React.ForwardRefExoticComponent<HTMLInputElement & React.RefAttributes<Props>>
const ComponentWithRef =
  forwardRef<
    Props,
    HTMLInputElement
  >((props: Props, ref) => {
    const innerRef = useRef(null);

    useImperativeHandle(ref, () => ({
      greet: () => 'Hello Batman :)'
    }));

    return <div ref={innerRef}>MyComponent</div>
  })

Playground

TypeScript 能够推断出 ComponentWithRef 是 ForwardRefExoticComponent

Here你可以找到其他forwardRef问题

【讨论】：