I'm trying to convert ReactNative official example for useImperativeHandle
with TypeScript
- original:
function FancyInput(props, ref) { const inputRef = useRef(); useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus(); } })); return <input ref={inputRef} ... />;}FancyInput = forwardRef(FancyInput);
- with TypeScript:
import React, { ReactElement, Ref, useRef, useImperativeHandle, forwardRef } from "react";import { TextInput } from "react-native";interface FancyInputProps { name: string;}const FancyInput = (props: FancyInputProps, ref: Ref<TextInput>): ReactElement => { const inputRef = useRef<TextInput>(null); useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus(); }, })); return <input ref={inputRef} />;};export default forwardRef(FancyInput);
But focus
is highlighted by my IDE with the following error message:
Type '{ focus: () => void; }' is missing the following properties fromtype 'TextInput': isFocused, clear, measure, measureInWindow, and 18more.
It's because TextInput
have indeed other properties, but I want to only add one (focus
), no rewrite all the others properties.
I have a feeling I'm not that far, any help will be very much appreciated!