[Bug记录]Vue类型扩展跟vue单文件声明冲突

问题描述

ts文件引入vue文件时提示找不到模块

在项目入口文件如:main.ts里引入App.vue会报找不到vue文件的声明,但已在同级目录声明 declare module "*.vue"

在这里插入图片描述


原因分析:

排查后是自定义vue的property跟vue单文件声明冲突了

在这里插入图片描述


解决方案:

分开两个.d.ts文件声明

// vue.d.ts
declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
// shims-vue.d.ts
import Vue from "vue";

declare module "vue/types/vue" {
  interface Vue {
    xxx: string
  }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 类型注释只能在 TypeScript 文件中使用的原因是因为 TypeScript 是一种静态类型检查的编程语言,可以通过类型注释来提供代码的类型信息,从而在编译期间进行类型检查,减少运行时的错误。而 Vue 是一个基于 JavaScript 的框架,JavaScript 是一种动态类型的编程语言,没有编译阶段,所以无法进行静态类型检查。 然而,由于 Vue 在项目中使用了许多特定的语法和生命周期,TypeScript 提供了一种使用类型注释来增强 Vue 代码的可读性和可维护性的方式。通过在 Vue 组件文件中使用 TypeScript扩展语法,我们可以将类型注释应用于 Vue 组件的 prop、data、computed 等属性上。这样在开发过程中,编辑器可以根据类型注释提供代码补全、错误检查等功能,从而提高开发效率和代码质量。 需要注意的是,为了使用 Vue 类型注释,我们需要在 TypeScript 文件引入 Vue类型声明文件,以使 TypeScript 理解 Vue 的特定语法和类型信息。同时,我们还需要在项目配置中添加相应的 TypeScript 相关配置,以确保 TypeScript 在编译过程中正确解析和处理 Vue 组件中的类型注释。 总之,Vue 类型注释只能在 TypeScript 文件中使用,是因为 TypeScript 提供了一种增强 Vue 代码的方式,通过类型注释来提供静态类型检查和代码补全等功能,从而提高项目的代码质量和开发效率。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值