Como usar useRef com Typescript / Formik?

Question

Estou passando uma refpropriedade para meu FieldInput personalizado que uso para validação de Formik do meu formulário. No entanto, ele fornece alguns erros de Typecript. Por exemplo, na minha função:

    const handleSubmitForm = (
    values: FormValues,
    helpers: FormikHelpers<FormValues>,
  ) => {

    setShowFlatList(true);
    Keyboard.dismiss();
    helpers.resetForm();
    if (fieldRef && fieldRef.current){
          fieldRef.current.blur();}
    helpers.resetForm();
  };

Recebo um erro em fieldRef.current isso Object is possibly 'undefined'.. Pensei que adicionar a condição if resolveria o problema, mas não resolveu. Além disso, quando eu envio o formulário, recebo um aviso de que

Warning: An unhandled error was caught from submitForm()
Error: "fieldRef.current.blur is not a function. (In 'fieldRef.current.blur()', 'fieldRef.current.blur' is undefined)" in handleSubmitForm 

Da mesma forma, no meu componente FieldInput personalizado onde uso ref={fieldRef}, recebo um erro que:

Type '{ ref: MutableRefObject<undefined>; setFieldTouched: (field: string, isTouched?: boolean | undefined, shouldValidate?: boolean | undefined) => void; handleChange: { ...; }; ... 4 more ...; placeholderText: string; }' is not assignable to type 'IntrinsicAttributes & FieldInputProps & { children?: ReactNode; }'.
  Property 'ref' does not exist on type 'IntrinsicAttributes & FieldInputProps & { children?: ReactNode; }'.ts(2322)

Como posso consertar isso?

Aqui está uma caixa de códigos:

https://snack.expo.io/@nhammad/jealous-beef-jerky-fix

Answer 1

Se você olhar para os tipos genéricos atuais de seu forwardRefmétodo, o primeiro parâmetro é unknown. Basta alterar o seu método de assinatura de entrada para

export const FieldInput = React.forwardRef<Input, FieldInputProps>(...)

O typescript resolverá automaticamente o tipo correto com base no forwardReftipo de retorno do método.