I'm trying to have build a vue.js project strictly typed with Typescript.
I use VeeValidate to build a form. I use a reference to the VeeValidate ValidationObserver to process the submitted form. I also use vue-class-component.
Here is how I tried to type the ValidationObserver component in my code.
<template>
  <ValidationObserver tag="form" ref="repertoireForm" @submit.prevent="submitForm">
    <ValidationProvider rules="required"></ValidationProvider>
  </ValidationObserver>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import {ValidationObserver, ValidationProvider} from 'vee-validate';
@Component({
  components: {
    ValidationObserver,
    ValidationProvider,
  },
})
export default class RepertoireForm extends Vue 
  $refs!: {
    // here is what I'm trying to type
    repertoireForm: ValidationObserver,
  }
  async submitForm(e: Event): Promise<void> {
    const valid = await this.$refs.repertoireForm.validate();
    // some submit routine here
  }
}
</script>
When I try to compile this, I got the following error:
TS2749: 'ValidationObserver' refers to a value, but is being used as a type here.
How can I correctly type this repertoireForm $refs ?
The imports you want are actually ValidationProviderInstance and ValidationObserverInstance as without the Instance these refer to a Component.
import { ValidationProviderInstance, ValidationObserverInstance } from 'vee-validate'
And then later:
const valid = await (this.$refs.repertoireForm as ValidationObserverInstance).validate()
Edit
v3 has changed things. You can now use the InstanceType:
$refs!: {
    validationProviderRef: InstanceType<typeof ValidationProvider>,
    validationObserverRef: InstanceType<typeof ValidationObserver>
}
                        If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With