Vue 3 + TypeScript TS2614：模块 '"*.vue"' 没有导出成员

Question

I'm trying to make named export in one component like this:

export interface ITest { t: String }

to call it from another:

import { ITest } from '@/components/Test.vue'

And have the error:

TS2614: Module '"*.vue"' has no exported member 'ITest '. Did you mean to use 'import ITest from "*.vue"' instead?

And if I change to: import ITest from '@/components/Test.vue'

The error now says: Module '"(path)/Test.vue"' has no default export. Did you mean to use 'import { ITest } from "(path)/Test.vue"' instead? Module '"(path)/Test.vue"' has no default export. Did you mean to use 'import { ITest } from "(path)/Test.vue"' instead?

How to make named export in Vue using TypeScript?

Vue 3, TypeScript, Webpack 5.

Answer 1

export interface ITest { 
  t: string; 
} 

• Change Test.vue to Test.ts , and where import it as well.
• Change type String to typescript type string

Answer 2

Don't export at setup section.

The following works:

<script lang="ts">
export interface ITest { t: string }
</script>

I have also wondered this, and didn't find any workarouds, until finally I found this by myself.

You can take a look at your shims-vue.d.ts and you can find it's probably analizing setup block to infer the definition of a component behind the scene.

That is to say, the setup block defines the type DefineComponent<{}, {}, any> , so there may be no spaces for exporting any static type. Thus I tried to export it in pure script block, and it worked.