Typescript type of input parameter formik.error and formik.touched (prime react + formik)

Viewed 272

I am using PrimeReact with Typescript and now I have to use Formik as form validator. PrimeReact(v7) Formik documentation: https://www.primefaces.org/primereact-v7/#/formik and there are no changes when you switch the tab to TS source. I have problem with part:

const isFormFieldValid = (name) => !!(formik.touched[name] && formik.errors[name]);
const getFormErrorMessage = (name) => {
    return isFormFieldValid(name) && <small className="p-error">{formik.errors[name]}</small>;
};

I cannot solve the "name" type. I tried for a :string, FormikTouched, any, FormikError... When I try string as type of parameter my IDE say:

TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'FormikTouched<{ name: string; }>'.   No index signature with a parameter of type 'string' was found on type 'FormikTouched<{ name: string; }>'.

Could someone help me with this please?

1 Answers

I did this:

  const formikTouched: any = formik.touched;
  const formikErrors: any = formik.errors;

  const isFormFieldValid = (name: string) => !!(formikTouched[name] && formikErrors[name]);
  const getFormErrorMessage = (name: string) => {
    return isFormFieldValid(name) && <small className="p-error">{formikErrors[name]}</small>;
  };

Typescript stops complaining and now is running without error.

Related