Как использовать useRef с Typescript / Formik?

Question

Я передаю refсвойство в свой настраиваемый FieldInput, который использую для проверки моей формы Formik. Однако это дает несколько ошибок машинописного текста. Например, в моей функции:

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

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

Я получаю сообщение об ошибке fieldRef.current Object is possibly 'undefined'.. Я думал, что добавление условия if исправит это, но этого не произошло. Кроме того, когда я отправляю форму, я получаю предупреждение, что

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 

Точно так же в моем пользовательском компоненте FieldInput, который я использую ref={fieldRef}, я получаю сообщение об ошибке:

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)

Как я могу это исправить?

Вот кодовый ящик:

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

Answer 1

Если вы посмотрите на текущие общие типы вашего forwardRefметода, первым параметром будет unknown. Просто измените метод ввода подписи на

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

Typescript автоматически определит правильный тип в зависимости от forwardRefтипа, возвращаемого методом.