模块没有导出的成员 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['size'] 但也没有用。

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

知道发生了什么吗？

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']>
        }
    }
  }
})