定义Props 的时候 extends 了另一个组件暴露的 interface 时出错 Failed to resolve extends base type

定义Props 的时候 extends 了另一个组件暴露的 interface 时出错 Failed to resolve extends base type

开发环境 版本号 项目创建方式
Windows 22H2 CLI

示例代码：

组件 A.vue

// 从组件 A.vue 暴露出一个 interface  
export interface AProps {  
  name: string;  
}

组件 B.vue

// 从组件 A.vue 引入这个 interface 并在 extends 后将这个 interface 作为组件的 props  
import { AProps } from "./A.vue";  
interface BProps extends AProps {  
  age: number;  
}  
const props = defineProps<BProps>();

就这样引发了报错，在将 [@dcloudio](/user/dcloudio) 的依赖版本回退到 3.0.0-3080720230703001 的时候可以成功运行，可升级到 3.0.0-4050720250324001 (最新版)后无法运行，其他依赖、代码、均无变化。

经测试这个bug是从 3.0.0-4000620240325001 版本开始出现的。 3.0.0-3090920231225001 版本仍支持此语法

操作步骤：

  1. 拉取代码
    git clone https://gitee.com/ljb2458/jun-uni.git
  2. 安装依赖
    pnpm i
  3. 启动到任意平台(此时是正常的)
    pnpm run dev:mp-weix
  4. 更新到最新 @dcloudio 版本
    pnpm run dev:mp-weixin
  5. 重新启动
    pnpm run dev:mp-weixin

结果是报错，即使将除了 @dcloudio 的依赖全部回退也依然报错。

预期结果：

成功编译并运行。

实际结果：

报错，无法运行。

bug描述：

从 3.0.0-3080720230703001 版本升级到 3.0.0-4050720250324001(最新版) 后编译时报错。

[@vue/compiler-sfc] Failed to resolve extends base type. If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:  interface Props extends /* @vue-ignore */ Base {}  
Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

经测试这个bug是从 3.0.0-4000620240325001 版本开始出现的。 3.0.0-3090920231225001 版本仍支持此语法

这是因为我在定义Props 的时候 extends 了另一个组件暴露的 interface 而引发的报错，可这种写法在 [@dcloudio](/user/dcloudio) 3.0.0-3080720230703001 是被支持的。


5 回复

该写法在vue3.3+编译器里会告警，告警信息里很清楚，可以自己添加 / @vue-ignore / 来忽略
如：interface BProps extends / @vue-ignore / AProps


不是这样的，在 git clone https://gitee.com/ljb2458/jun-uni.git 中使用了该写法，并没有报错，在仅升级 @dcloudio 依赖至 3.0.0-4000620240325001 之后的版本开始的报错，因此 3.0.0-4000620240325001 之后的版本可能有什么改动使这种原本受支持的版本失效了。

回复 l***@outlook.com: dcloudio内部依赖vue，会不定时升级vue版本，这个警告就是升级了vue编译器报的， 信息里边已经告诉了是[@vue/compiler-sfc] 这个插件告警的。

https://github.com/vuejs/core/blob/main/packages/compiler-sfc/src/script/resolveType.ts#L436

这是一个已知的TypeScript编译器限制问题。在较新版本的@dcloudio/uni-app中，Vue SFC编译器对类型扩展的处理更加严格。

解决方法有以下几种：

  1. 使用注释忽略该错误：
interface BProps extends /* @vue-ignore */ AProps {
  age: number;
}
  1. 将接口定义提取到单独的.d.ts文件中：
// types/props.d.ts
export interface AProps {
  name: string;
}

// B.vue
import { AProps } from "./types/props";
interface BProps extends AProps {
  age: number;
}
回到顶部