Vee-validate: TypeScript errors: `reset` and `validate` do not exist on ValidationObserver

[jackwkinsey]

Versions

• vee-validate: 3.1.0
• vue: 2.6.10
• typescript: 3.6.4

Describe the bug
I am using TypeScript in a Vue project and after updating Vee Validate to version 3.1 I'm getting TypeScript errors. The app still functions correctly, but TypeScript linting is failing.

I have a component that uses ValidationObserver and gets a reference in:

mounted() {
    this.observer = this.$refs.observer as InstanceType<typeof ValidationObserver>;
}

Then if I try to invoke either the reset or validate methods in the component (i.e. this.observer.reset() or this.observer.validate()), I get the following TypeScript errors:

Property 'reset' does not exist on type 'CombinedVueInstance<{ id: string; refs: Record<string, CombinedVueInstance<{ errors: string[]; value: undefined; initialized: boolean; initialValue: undefined; flags: 
ValidationFlags; failedRules: {}; isActive: boolean; id: string; } & ... 4 more ... & { ...; }, object, object, object, Record<...>>>; observers: any[...'.

Property 'validate' does not exist on type 'CombinedVueInstance<{ id: string; refs: Record<string, CombinedVueInstance<{ errors: string[]; value: undefined; initialized: boolean; initialValue: undefined; flag
s: ValidationFlags; failedRules: {}; isActive: boolean; id: string; } & ... 4 more ... & { ...; }, object, object, object, Record<...>>>; observers: any[...'.

Upon inspecting the Observer.d.ts type file, I noticed that

reset(): void;
validate(...args: any[]): Promise<ValidationResult>;

was a part of the refs property on the type and if I add these as their own properties on the type (instead of just on the refs property), then no more TypeScript errors were reported.

Am I doing something wrong when I set up the observer in my mounted file or is the type file incorrect in the latest release?

[zyro23]

something changed 3.0.11 -> 3.1.0. seeing the same issue:

private validationObserver!: InstanceType<typeof ValidationObserver>;

ERROR in /path/to/my/app/src/views/MyView.vue(56,29):
56:29 Property 'reset' does not exist on type 'CombinedVueInstance<{ id: string; refs: Record<string, CombinedVueInstance<{ errors: string[]; value: undefined; initialized: boolean; initialValue: undefined; flags: ValidationFlags; failedRules: {}; isActive: boolean; id: string; } & ... 4 more ... & { ...; }, object, object, object, Record<...>>>; observers: any[...'.
    54 | 
    55 |   private foo() {
  > 56 |     this.validationObserver.reset();
       |                             ^

[logaretm]

Nothing really changed between 3.0 and 3.1 typing wise, it seems like a quirk because of the complicated typing Vue.js has, the fix itself is ridiculous as I just needed to take the provide code out into an external function which happened before with data.

Can you confirm 3.1.1 fixes the issue?

[jackwkinsey]

3.1.1 fixes it! Thanks for the push!