types: Align FormikHelpers and FieldHelper types to useFormik ones

bonimba commented 1 year ago

This is yet another PR around TypeScript.

The inferred types for the helpers in useFormik are the correct ones and should be used everywhere. See

export declare function useFormik<Values extends FormikValues = FormikValues>({ validateOnChange, validateOnBlur, validateOnMount, isInitialValid, enableReinitialize, onSubmit, ...rest }: FormikConfig<Values>): {

   [...redacted for readability...]

    setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean) => Promise<FormikErrors<Values>> | Promise<void>;
    setFieldValue: (field: string, value: any, shouldValidate?: boolean) => Promise<FormikErrors<Values>> | Promise<void>;
    setFieldError: (field: string, value: string | undefined) => void;
    setStatus: (status: any) => void;
    setSubmitting: (isSubmitting: boolean) => void;
    setTouched: (touched: FormikTouched<Values>, shouldValidate?: boolean) => Promise<FormikErrors<Values>> | Promise<void>;
    setValues: (values: React.SetStateAction<Values>, shouldValidate?: boolean) => Promise<FormikErrors<Values>> | Promise<void>;
    submitForm: () => Promise<any>;
    validateForm: (values?: Values) => Promise<FormikErrors<Values>>;
    validateField: (name: string) => Promise<void> | Promise<string | undefined>;

    [...redacted for readability...]
};

Having the correct types, and the awaiting these helpers helps with otherwise possible race conditions when used in an imperative way, like so

const handleChange = ({ target }) => {
  await setFieldTouched('fieldName', true, false) 
  await setFieldValue('fieldName', target.value, false)
  await validateField('fieldName')
}