0
91
ViewsConverting AbstractComponent in TypeScript when using ForwardRef
I have many components that use forward refs built in 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>
})
Im trying to convert this codebase to Typescript but AbstractComponent is not part of Typescript.
How do I handle converting Flow's React.AbstractComponent into something Typescript can support:
·
Juan Pablo Isaza
1 answers
Answer question0
I think you just need to get rid of AbstractComponent type. Consider this example:
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>
})
TypeScript is able to infer that ComponentWithRef is ForwardRefExoticComponent
Here you can find other forwardRef question
·
Juan Pablo Isaza
Report
Answer question