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

例如，如果我有一个单文件 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", then Foo只是一个别名Vue，并且您将无法访问其成员。

如果您从以下位置导入，情况似乎确实如此.ts文件。如果您导入自.vue文件，它神奇地起作用了！

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

我在 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";