Vue.js, Typescript and VeeValidate typing

Question

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 ?

Ohgodwhy · Accepted Answer · 2020-02-05 22:30:50Z

11

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>
}

edited Feb 5, 2020 at 22:30

answered Oct 3, 2019 at 16:09

Ohgodwhy

50.9k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js, Typescript and VeeValidate typing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related