How to use Typescript in the Multi Step Wizard ?

[thomaslecoeur]

Here's my page using the MultiStepWizard component provided in the documentation (https://vee-validate.logaretm.com/v4/examples/multistep-form-wizard/). Unfortunately, it doesn't support Typescript. the submit emit of the wizard gives a formData:any instead of a typed formData. How can I achieve that?

<script lang="ts" setup>
import { object, string } from 'yup';

const validationSchema = [
  toTypedSchema(object({
    firstName: string().required(),
    lastName: string()
      .transform((val) => `${val}`.toUpperCase())
      .required(),
    email: string().email().required(),
  })),
  toTypedSchema(object({
    subject: string().required(),
    message: string().required(),
    captcha: string().required(),
  })),
];

/**
 * Only Called when the last step is submitted
 */
function onSubmit(formData) {
  console.log(JSON.stringify(formData, null, 2));
}
</script>

Basically, what I would need to do is to extract and concat the types from my validationSchema array, but I have no idea how to do this.

[thomaslecoeur]

I achieved it by creating type extractors :

<script lang="ts" setup>
import { object, string } from 'yup';
import type { ObjectSchema } from 'yup';

// Helper type to extract the first type argument from each ObjectSchema in an array
export type ExtractSchemaTypeArray<T> = T extends Array<ObjectSchema<infer U, any, any, any>> ? U : never;

// Utility type to convert a union type to an intersection type
export type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;

export type ExtractAndMergeSchemaTypes<T> = UnionToIntersection<ExtractSchemaTypeArray<T>>;


const validationSchema = [
  (object({
    firstName: string().required(),
    lastName: string()
      .transform((val) => `${val}`.toUpperCase())
      .required(),
    email: string().email().required(),
  })),
  (object({
    subject: string().required(),
    message: string().required(),
    captcha: string().required(),
  })),
];

/**
 * Only Called when the last step is submitted
 */
function onSubmit(formData: ExtractAndMergeSchemaTypes<typeof validationSchema>) {
  console.log(JSON.stringify(formData, null, 2));
}
</script>