解决 TS2614 Module “.vue“ has no exported member（Vue3+TypeScript）

解决 TS2614: Module “*.vue” has no exported member（Vue3+TypeScript）问题解决问题最近使用TS+Vue3.2写项目时碰到个问题：Vue组件中定义了一个接口并导出，在另一个TS文件中import这个接口，报TS2614的错误。在其他Vue组件中导入则不会报错。<script setup lang="ts">//vue组件中的接口

a10534126

10411人浏览 · 2022-03-07 09:34:15

a10534126 · 2022-03-07 09:34:15 发布

解决 TS2614: Module “*.vue” has no exported member（Vue3+TypeScript）

问题
解决

问题

最近使用TS+Vue3.2写项目时碰到个问题：
Vue组件中定义了一个接口并导出，在另一个TS文件中import这个接口，报TS2614的错误。在其他Vue组件中导入则不会报错。

<script setup lang="ts">
//vue组件中的接口定义
export interface IProps {
    description: string
}
</script>


//TS文件中导入
import type { IProps } from '@/components/*.vue'

环境：
WebStorm 2021.3 / Vue 3.2 / TypeScript 4.1.5
报错：
TS2614: Module '"*.vue"' has no exported member 'IProps'. Did you mean to use 'import IProps from "*.vue"' instead?

离谱的是，即便我恢复到上次正常运行时的代码，重新npm install也救不回来。写代码果然是门玄学。

解决

自己摸索和搜索了些解决方案，包括重新npm install、升级TS版本、更改文件格式、更改接口类型表示等，都没有用。
受这个问题启发，我尝试把接口放到一个单独的TS文件中，在用到的地方调用这个接口。这确实解决了这个问题，不再报错。
据其他一些回答说，Vue的最新VSCode插件已经解决了这个问题，但因为我主要使用WS，也就没有尝试。
也看到其他一些方案，对我来说，单独把接口放到一个TS文件中是代价最小的解决方案。虽然对于我的项目来说，这样的做法有些奇怪。
不知道后面会不会有官方的解决方案。