模块没有导出的成员Vue3

Question

我需要一些关于Vue组件的帮助。

我得到这个错误：

Failed to compile.
src/components/Btn/Btn.vue:11:14
TS2305: Module '"../../typings/button-type"' has no exported member 'ButtonType'.
9 |     import { defineComponent, computed } from '@vue/runtime-core';
> 11 |     import { ButtonType } from '@/typings/button-type';
|              ^^^^^^^^^^
12 | // components
13 |
14 |     export default defineComponent({

我正试图在一个单独的文件中创建我自己的Ts类型，并将其导入到我的组件中。

类型：

export namespace ButtonType {
export type Button = {
size: Size;
type: Type;
}
}
type Size = 'sm' | 'md' | 'lg';
type Type = 'primary' | 'accent' | 'subtle';

在我的组件中，我有以下内容：

import { ButtonType } from '@/typings/button-type';
// components
export default defineComponent({
name: 'Btn',
components: {},
props: {
size: {
default: 'md',
} as ButtonType.Button.size,
type: {
default: 'primary',
} as ButtonType.Button.type,
}

我试过ButtonType。Button[大小]都不起作用。

我有一些计算数据等，但与这个案子无关。主要想法是创建一个类型，这样我就可以在为按钮组件设置错误的大小或类型时识别错误。

知道发生了什么事吗？

Answer 1

Vue将PropType用于道具类型

import { defineComponent, PropType } from 'vue'
import { ButtonType } from '@/typings/button-type';
export default defineComponent({
props: {
size: {
default: "md",
type: String as PropType<ButtonType['Button']['size']>
},
type: {
default: "primary",
type: String as PropType<ButtonType['Button']['type']>
}
}
}
})