Multistep Form with generic types

[robinpilz]

I'm currently implementing a multistep form in vue3 and typescript and would like to generically type the submit handler, but I'm not quite able to get it working, maybe someone could give me some advice.

There is an typescript example for the multistep form but it is not properly typed:
https://stackblitz.com/edit/vee-validate-v4-multi-step-form-composition?file=src%2Fcomponents%2FFormWizard.vue

I think one would need a generic for the validationSchema prop and then have a merged object of output values as a type for the submission values that somehow derives from the passed typed schema.

Any hints would be appreciated! Thanks!

[logaretm]

This is interesting, I'm planning a new abstraction for multistep forms for a future release and would like some details from you.

So when you say you want to type the submit handler, you mean that the values should include all values from all steps? or just the values from one step? because that can be tricky depending on how you use the submit handler.

If you are using it to move to next step then it will need to somehow be able to figure out the current step and use the values for it in isolation which I don't think is straightforward or possible with static typing unless you add some assertions inside the handler itself.

But if you are using the submission handler for the overall submit or don't mind having values from other steps then it would work by merging all the inferred value types from each schema which seems like what you want here.

have a merged object of output values as a type for the submission values that somehow derive from the passed typed schema.

That could be possible with a type like this, assuming you use yup

This is what I got at the moment in a POC branch of mine.

import { InferType, object, string } from 'yup';

// your array of schemas
const schemas = [object({ email: string() }), object({ name: string() }), object({ age: string() })] as const;

// Util type
// https://stackoverflow.com/questions/50374908/transform-union-type-to-intersection-type/50375286#50375286
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;

type AllTypes = UnionToIntersection<InferType<(typeof schemas)[number]>>;

const type: AllTypes = {
  age: '11',
  email: '',
};

Maybe this helps