Vue.js、Typescript 和 VeeValidate 打字

Question

我正在尝试使用 Typescript 构建一个严格键入的 vue.js 项目。

我使用 VeeValidate 来构建表单。我使用对 VeeValidate ValidationObserver 的引用来处理提交的表单。我也使用 vue-class-component。

这是我尝试在代码中键入 ValidationObserver 组件的方式。

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

当我尝试编译它时，出现以下错误：

TS2749：“ValidationObserver”指的是一个值，但在此处用作类型。

我怎样才能正确输入这个 repertoireForm $refs ？

Answer 1

您想要的导入实际上是指一个组件ValidationProviderInstance，ValidationObserverInstance如果没有Instance这些导入。

import { ValidationProviderInstance, ValidationObserverInstance } from 'vee-validate'

然后后来：

const valid = await (this.$refs.repertoireForm as ValidationObserverInstance).validate()

编辑

v3 改变了一些事情。您现在可以使用InstanceType：

$refs!: {
    validationProviderRef: InstanceType<typeof ValidationProvider>,
    validationObserverRef: InstanceType<typeof ValidationObserver>
}