typescript - 如何导入具有正确类型的 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" ，然后 Foo将只是 Vue 的别名，您将无法访问其成员。

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

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

Answer 1

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

创建一个 Foo.vue 文件并将脚本标签添加到 Foo.vue.ts 文件中。这是片段。

<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!'
}

现在您可以使用 as关键词。

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