如何导入具有正确类型的 Vue 类组件？

Question

如果我有一个单文件 Vue 类组件，例如：

// MyComponent.vue
<template>
  <div></div>
</template>

import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
})
export default class MyComponent extends Vue {
  public message: string = 'Hello!'
}

我将它导入到其他地方，并获取它的一个实例。

import MyComponent from "./MyComponent.vue";
...
const foo = ... as MyComponent;
foo.message = "goodbye";

使用标准的 Vue CLI 3 设置会出现错误，因为它包含shims-vue.d.ts以下内容：

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

据我了解，这意味着无论何时您编写import Foo from "./Foo.vue", thenFoo都只是 的别名Vue，您将无法访问其成员。

如果您从.ts文件导入，情况似乎确实如此。如果您从.vue文件导入，它会神奇地工作！

不幸的是，我所有的测试都是.spec.ts文件，所以我无法导入任何组件的类型。这使得测试变得困难。有没有什么办法解决这一问题？

Answer 1

我在 Vue 2 和 Vue 3 项目中的做法如下：

1. 创建 Foo.vue 文件并将 script 标签添加到 Foo.vue.ts 文件中。这是片段。

   <template>
      <div>... Your template code here ...</div>
   </template>
   
   <script lang="ts" src="./Foo.vue.ts" />
   

2. 在 Foo.vue.ts 文件中编写组件代码。

import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
})
export default class MyComponent extends Vue {
  public message: string = 'Hello!'
}

3. 现在您可以使用as关键字。

import MyComponent from "./MyComponent.vue";
...
const foo = obj as MyComponent;
foo.message = "goodbye";