模块 '"*.vue"' 没有导出的成员 'Hoge'。 您的意思是改用“从“*.vue”导入会议吗？ts(2614)

Question

Summery

I've implemented Vue.js/Nuxt.js application.
In the application, I import vue file into typescript file.

typescript file

import { Hoge } from '~/layouts/default.vue'

~/layouts/default.vue

<script lang="ts">
export interface Hoge{
  hoge: string
}
</script>

But I shows error on { Hoge } saying Module '"*.vue"' has no exported member 'Hoge'. Did you mean to use 'import Meeting from "*.vue"' instead?ts(2614) Module '"*.vue"' has no exported member 'Hoge'. Did you mean to use 'import Meeting from "*.vue"' instead?ts(2614)

I want to know how to resolve this error.

what I've tried

I already set index.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

Answer 1

I am not sure why you are trying to import a type from a vue file but this is what I recommend:

Create a file /types/shared.ts And add this inside:

export interface Hoge{
  hoge: string
}

Than you can import this interface like this:

import { Hoge } from '~/types/shared'