How to correctly type errorMap?
In my project, I have the following type definitions:
export type ValidationSchemaType = typeof validationSchema;
export type FormFields = keyof z.infer<ValidationSchemaType>;
export type ReceiptFormType = ReturnType<
typeof useForm<
z.infer<ValidationSchemaType>,
any,
any,
any,
any,
any,
any,
any,
any,
any
>
>;
And the following component:
<receiptForm.Subscribe
selector={(state) => [
state.canSubmit,
state.isSubmitting,
state.isTouched,
state.fieldMeta,
state.errorMap,
]}
children={([canSubmit, isSubmitting, isTouched, fieldMeta, errorMap]) => {
// ...
}}
/>
In this component, receiptForm is typed as ReceiptFormType.
How can I make errorMap inside the children render prop be correctly typed, so that the types of its fields like onSubmit, onChange, etc. are recognized properly?4 Replies
genetic-orange•2mo ago
you probably need to tell typescript that it‘s a tuple and not an array. Add
as const to the end of the selector
but in your context, you typed it as any either way. Could you explain why you extracted the type for receiptForm?optimistic-goldOP•2mo ago
Because the component with <receiptForm.Subscribe /> is a separate component with a submit button, and I’m passing the form instance to it as a prop.
genetic-orange•2mo ago
that sounds like a use case for Form Composition instead
optimistic-goldOP•2mo ago
Thank you so much — as const solved my problem.
It looks like I’ll need to rewrite the entire composition for my form.