Vue3组合式API中导出合并接口作为defineProps类型报错问题

1. <script setup>的类型导出机制限制 #

Vue3的<script setup lang="ts">对类型导出有特殊编译逻辑：它会将export声明的类型关联到组件对外暴露的类型系统中。但对于无自定义属性的空继承接口，TypeScript的类型擦除机制会在编译阶段将其视为父接口的别名，而非独立类型。Vue的SFC类型解析插件（如Vite的Vue插件）无法正确识别这种“无实体”的接口，导致defineProps无法绑定到有效类型，触发语法错误。

2. TypeScript空接口的优化特性 #

当你定义export interface ButtonItemProp extends ButtonData, Styling {}时，这个空接口在TypeScript中本质是ButtonData & Styling的别名，没有自身的独特标识。TypeScript的类型检查器会对这类空继承接口做优化处理，直接将其替换为父接口的交集类型。而Vue的defineProps类型参数需要的是一个有明确声明的类型实体，这种优化后的别名无法被Vue的类型系统正确捕获。

3. 两种解决方案的原理 #

• 添加假属性：给空接口添加一个无意义的可选属性（比如_unused?: never），会让TypeScript保留该接口的独立类型标识，不会被优化为父接口的别名，Vue的解析器就能正常识别它作为defineProps的类型参数。
• 单独export type { ButtonItemProp }：先定义接口再单独导出类型的方式，显式地向Vue的类型处理插件声明这是一个需要保留的类型实体，绕过了直接导出空接口时的识别问题，插件会正确关联该类型到defineProps。

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