Vue3+TypeScript项目导入.vue组件命名导出报错TS2614如何解决？

问题原因 #

.vue 单文件组件的默认 TypeScript 类型声明会将模块导出识别为组件实例类型，不会自动识别你在组件内定义的命名导出类型，且你导入类型时未加type修饰符的情况下，TS 会将其判定为运行时导入，自然找不到编译后会被擦除的 interface 定义。

解决方案 #

方案1（最推荐）：抽离类型到独立文件

将公共类型定义单独放到.ts或者.d.ts文件中存储，避免耦合在组件文件里，也方便全局复用：

1. 新建和Test.vue同级的types.ts文件，写入类型定义：

export interface ITest { t: string }

2. 导入时从独立类型文件导入即可：

import type { ITest } from '@/components/types'

方案2：组件内拆分<script>块导出类型

如果确实需要将类型定义写在.vue文件内，可以拆分出一个非setup的<script>块专门做类型导出：

<!-- Test.vue -->
<script setup lang="ts">
// 组件原有逻辑写在这个script setup块里
</script>

<script lang="ts">
// 单独的普通script块用来导出类型
export interface ITest { t: string }
</script>

<template>
<!-- 原有模板内容 -->
</template>

导入时注意加type修饰符：

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

注意事项 #

• 所有类型导入都建议加type修饰符，尤其是开启了isolatedModules（Vue项目默认开启）的情况下，否则会触发TS的运行时导入校验报错
• 不建议在.vue文件中导出运行时的命名变量，仅适合用上述方式导出纯类型定义
• 确保项目的vue-loader版本在17+，适配Vue3的TS类型导出规则

内容的提问来源于stack exchange，提问作者holycreeper