Why Do I Need to Manually Specify Types with useField in vee-validate and Yup?

[federicobartoli]

I'm using vee-validate with Yup in a TypeScript project. To get the correct TypeScript types for my form fields, I find myself having to manually specify the type for each field like this:

import { useForm, useField } from 'vee-validate';
import * as Yup from 'yup';

const { values } = useForm({
  validationSchema: Yup.object({
    firstName: Yup.string().required(),
    age: Yup.number().required(),
  }),
});

const formFields = {
  firstName: useField<(typeof values)['firstName']>('firstName'),
  age: useField<(typeof values)['age']>('age'),
};

Is there a way to obtain the field types without manually specifying them for each field? What's the recommended practice for allowing vee-validate to automatically infer the types from my Yup schemas?

[hypeJunction]

With zod you can access the pieces of the schema:

const schema = z.object({
  name: z.string().min(1)
}) 

const { value } = useField('name', toTypedSchema(schema.shape.name))

I suppose the reason you would need to be manual about it is that form values could be deep nested objects, and useField() allows you to pass a path such as names.0.first, so using TS inference would be a complex feat.

[darkbasic]

allows you to pass a path such as names.0.first, so using TS inference would be a complex feat

If that's the issue it's definitely doable. Far from being easy but doable. I got the dotted inference working but I gave up on accessing the array items: I'm pretty sure someone more knowledgeable than me could achieve it. It was easier up to a couple of years ago, but it regressed with recent versions of TS.

[hypeJunction]

I am also not the biggest fan of how things are wired together in vee-validate ;( I guess there is a reason why I landed on this post, as I was also wondering why the heck I have to type so much code after having already typed so much code.

[darkbasic]

Buy the way I've also noticed a potential issue with the way the OP used validationSchema: I usually encapsulate the whole yup object with toTypedSchema before passing it to validationSchema otherwise initialValues ends up not being type safe.