Type error for @validate argument when using validateYup

[fastfedora]

When using this library in a Glint component, I am getting a type error trying to use validateYup with @validate:

import { validateYup } from 'ember-headless-form-yup';

...

export default class MyComponent {
  ...

  <template>
    <HeadlessForm
      @validate={{validateYup this.args.schema}}
      as |form|
    >
      ...
   </HeadlessForm>
  </template>
}

The error I'm getting is:

Conversion of type 'FormValidateCallback<Partial<DATA>>' to type 'FormValidateCallback<DATA>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'Partial<DATA>' is not comparable to type 'DATA'.
    'Partial<DATA>' is assignable to the constraint of type 'DATA', but 'DATA' could be instantiated with a different subtype of constraint 'object'.glint(2352)

The issue appears to be that validateYup returns FormValidateCallback<Partial<DATA>> while @validate accepts only FormValidateCallback<DATA>.

My current workaround is to move the code into a getter in the component and re-type it there:

  get validate(): FormValidateCallback<DATA> | undefined {
    return this.args.schema
      ? validateYup(this.args.schema) as unknown as FormValidateCallback<DATA>
      : undefined;
  }

[simonihmig]

It might be related to the fact that you are not passing @data to the form, which is basically how the generic DATA type is inferred. Even when you don't pre-populate the form with data, it makes sense to pass a value to infer the type, even if that value is just an empty object, but defined to have the type that your form expects. Like in this test for example?

@fastfedora could you please try that out?