如何导入具有正确类型的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;
}

据我所知，这意味着每当您编写从". /Foo.vue"导入Foo时，Foo将只是Vue的别名，您将无法访问其成员。

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

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

Answer 1

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

>

<template>
   <div>... Your template code here ...</div>
</template>

<script lang="ts" src="./Foo.vue.ts" />

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

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 = obj as MyComponent;
foo.message = "goodbye";