如何在 Vue 2 和 TypeScript 中将 $refs 字段转换为其组件类型？

Posted 2023-02-16

【中文标题】如何在 Vue 2 和 TypeScript 中将 $refs 字段转换为其组件类型？

【英文标题】：How to convert $refs field to its component type in Vue 2 & TypeScript?

【发布时间】：2022-01-01 14:17:48

【问题描述】：

我正在将我的 Vue 2.x 项目从 javascript 迁移到 TypeScript。由于一些历史原因，我没有机会使用Class Style Vue Component，所以我使用Vue.extend的方式。

这是我的ValidPeriod.vue（为简单起见，省略一些代码）：

<template>
  <div>
    <div>Some content...</div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend(
  data() 
    return ;
  ,
  methods: 
    isValidate() 
      return false;
    ,
  ,
);
</script>

现在我正在迁移使用ValidPeriod.vue的App.vue：

<template>
  <div>
    <ValidPeriod ref="validPeriod" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import ValidPeriod from './ValidPeriod.vue';

export default Vue.extend(
  components: 
    ValidPeriod,
  ,
  data() 
    return ;
  ,
  mounted() 
    validPeriod.isValidate();
  ,
);

现在我收到 TS 错误：

TS2339：“Vue | 类型”上不存在属性“isValidate”元素 | Vue[] |元素[]'。类型“Vue”上不存在属性“isValidate”。

然后我尝试投射它：

(this.$refs.validPeriod as ValidPeriod).isValidate();

现在我明白了：

TS2749：“ValidPeriod”指的是一个值，但在这里被用作一个类型。您的意思是“typeof ValidPeriod”吗？

好的，我添加typeof，然后得到：

TS2352：'Vue | 类型的转换元素 | Vue[] | Element[]' 输入 'ExtendedVue' 可能是一个错误，因为这两种类型都没有与另一种充分重叠。如果这是故意的，请先将表达式转换为“未知”。类型 'Element[]' 缺少来自类型 'VueConstructor'：extend、nextTick、set、delete 等等。

所以我的问题是如何从ExtendedVue<Vue, ... 中派生一些类型，以便可以识别ValidPeriod.vue 中定义的字段？

【问题讨论】：

这能回答你的问题吗？ Vuejs typescript this.$refs.<refField>.value does not exist

【参考方案1】：

对于初学者，要使其正常工作，请尝试

(this.$refs.validPeriod as any).isValidate();

接下来，您可能会尝试直接从模块中导入类型。也许这样可以解决问题。

import type ValidPeriod from './ValidPeriod.vue';