Vue.js、Typescript和VeeValidate键入

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

我使用VeeValidate构建表单。我使用对VeeValidationObserver的引用来处理提交的表单。 我还使用vue类组件

下面是我如何尝试在代码中键入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>

从“Vue”导入Vue；
从“vue类组件”导入组件；
从“vee validate”导入{ValidationObserver，ValidationProvider}；
@组成部分({
组成部分：{
验证观察者，
ValidationProvider，
},
})
导出默认类指令集扩展Vue
$refs！：{
//这是我想输入的内容
剧目改革：ValidationObserver，
}
异步提交表单（e:事件）：承诺{
const valid=等待此操作。$refs.repertoinReform.validate（）；
//有些人在这里提交例行程序
}
}

当我试图编译此文件时，出现以下错误：

TS2749:“ValidationObserver”引用了一个值，但正在用作 在这里输入

---

我如何才能正确地键入此曲目$refs？

您需要的导入实际上是

ValidationProviderInstance

和

ValidationObserverInstance

，因为没有

实例

这些引用组件

从'vee validate'导入{ValidationProviderInstance，ValidationObserverInstance}

后来：

const valid=await（此.$refs.repertoim作为validationobserver实例）。validate（）

编辑

v3改变了一切。您现在可以使用

实例类型

：

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

$refs！：{
validationProviderRef:InstanceType，
validationObserverRef:InstanceType
}

这不起作用（版本

3.2.3

）

ValidationProviderInstance

和

ValidationObserverInstance

不是

vee validate

@Sebastian的exportet成员，谢谢。我的答案对v2是正确的。我现在还为v3添加了正确的打字。太棒了，这很有帮助！