Comment utiliser useRef avec Typescript / Formik?

Question

Je passe une refpropriété dans mon FieldInput personnalisé que j'utilise pour la validation Formik de mon formulaire. Cependant, il donne quelques erreurs Typescript. Par exemple, dans ma fonction:

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

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

J'obtiens une erreur sur fieldRef.current that Object is possibly 'undefined'.. Je pensais que l'ajout de la condition if résoudrait le problème, mais ce n'est pas le cas. De plus, lorsque je soumets le formulaire, je reçois un avertissement indiquant 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 

De même, dans mon composant FieldInput personnalisé que j'utilise ref={fieldRef}, j'obtiens une erreur qui:

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)

Comment puis-je résoudre ces problèmes?

Voici un code et une boîte:

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

Answer 1

Si vous examinez les types génériques actuels de votre forwardRefméthode, le premier paramètre est unknown. Changez simplement votre méthode d'entrée de signature en

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

Typescript résoudra automatiquement le type correct en fonction du forwardReftype de retour de méthode.