Infer model type from schema when using defineField()

[bechtold]

Is your feature request related to a problem? Please describe.

I'm using typescript, yup, toTypedSchema(), and it works like a charm after getting used to values from useForm() still having | undefined types, but values from onSubmit() having the required type.

The problem: the model that is returned from defineField() has type Ref<unknown>.

This is annoying when assigning it to components typed model:

Casting the type when passing it to the component works, but is not nice I guess. Especially if you use the model multiple times, you don't want to cast it every time. Also, my understanding is, that casting would not bring the benefits that I'm looking for from typescript.

The same goes for using the ref in code:

Similar when defining, for example, a boolean and using it in a v-if. It would be possible to use values.variableName, but why not use the model?

Especially because the type is defined in the schema:

After fiddling around a bit, I found out that adding the field's path to the generic type of defineField() does help to infer the proper type.

Also in code the ref's type is inferred correctly:

Describe the solution you'd like

It would be nice if the model's type is inferred automatically instead of manually having to do it. Maybe I'm missing something, so I'm grateful for any hints.

Describe alternatives you've considered

Passing the field's path to infer the type from helps, but is redundant: defineField<"pathToField">("pathToField")

[logaretm]

it is possible that it is getting confused by the MaybeRefOrGetter thrown in there. I didn't encounter this in the tests nor in my daily usage of this.

Can you create a minimal reproduction for this?

[zumm]

@logaretm Probably this is happening because of incorrect typed vuetifyConfig (we can see on the screenshot author is using it)

import * as yup from 'yup';
import { useForm, type LazyInputBindsConfig } from 'vee-validate';
import { toTypedSchema } from '@vee-validate/yup';

const FormSchema = yup.object({
  fieldOne: yup.number().required(),
  fieldTwo: yup.number().required(),
});

const { defineField } = useForm({
  validationSchema: toTypedSchema(FormSchema),
});

const vuetifyBindsConfig: LazyInputBindsConfig = (state) => ({
  props: {
    'error-messages': state.errors,
  },
});

const [fieldOne] = defineField('fieldOne', vuetifyBindsConfig); // unknow
const [fieldTwo] = defineField('fieldTwo'); // number | undefined

// or
const [fieldOne] = defineField<'fieldOne'>('fieldOne', vuetifyBindsConfig); // number | undefined

Problem is i don't know correct type for vuetifyBindsConfig. :)

[zumm]

And there is another issue with defineField typing. It defines type of object fields as PartialObjectDeep<T, {}> | undefined so they can't be used with components which expect T as model.

import * as yup from 'yup';
import { useForm from 'vee-validate';
import { toTypedSchema } from '@vee-validate/yup';

const FormSchema = yup.object({
  objectField: yup.object({
    id: yup.string().required()
    // ...
  })
});

const { defineField } = useForm({
  validationSchema: toTypedSchema(FormSchema),
});

const [objectField] = defineField('objectField');

// type error:
// <SomeFieldComponent v-model="objectField" />

// SomeFieldComponent.vue
defineModel<{
  id: string
  // ...
}>()