I am seeking assistance with a Vue component. I have encountered an error message that states:
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';
| ^^^^^^^^^^
I am attempting to create my own type in TypeScript within a separate file and then import it into my component.</p>
<p>This is the Type definition:</p>
<pre><code>export namespace ButtonType {
export type Button = {
size: Size;
type: Type;
}
}
type Size = 'sm' | 'md' | 'lg';
type Type = 'primary' | 'accent' | 'subtle';
In my component file, I have the following code snippet:
import { ButtonType } from '@/typings/button-type';
export default defineComponent({
name: 'Btn',
components: {},
props: {
size: {
default: 'md',
} as ButtonType.Button.size,
type: {
default: 'primary',
} as ButtonType.Button.type,
}
I have attempted using ButtonType.Button['size'], but it did not resolve the issue either. In addition, I have some computed data present, although it may not be relevant to this particular problem. The primary goal was to establish a Type structure to prevent errors when assigning incorrect values for the button component's size or type attributes.
Do you have any insights on what might be causing this issue?