Typescript 如何导入具有正确类型的Vue类组件?
例如,如果我有一个单文件Vue类组件:Typescript 如何导入具有正确类型的Vue类组件?,typescript,vue.js,webpack,Typescript,Vue.js,Webpack,例如,如果我有一个单文件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: s
// 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!'
}
对于标准的Vue CLI 3设置,这会出现错误,因为它包含带有以下内容的Vue.d.ts:
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
据我所知,这意味着每当您从“/Foo.vue”编写import Foo时,Foo
将只是vue
的别名,您将无法访问其成员
如果从.ts
文件导入,则情况似乎确实如此。如果从.vue
文件导入,它会神奇地工作
不幸的是,我所有的测试都是.spec.ts
文件,因此我无法导入任何组件的类型。这使得测试变得困难。有没有办法解决这个问题?我真的不认为这是使用组件的方法。您不应该以这种方式从父组件更改子组件的成员。一个更好的方法是使用是的,我也听说过React,但是你如何处理一次性事件呢?比如“如果用户点击这个按钮,它应该折叠所有树节点”?你最终不得不将所有的状态和逻辑移到需要访问其中任何一个的最顶层组件,这是一个相当垃圾的解决方案。无论如何,在Vue中,发射器和绑定的类型也非常糟糕。我想我会切换到支持正确键入的React。
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}