当前位置: 首页 > article >正文

修复使用unplugin-auto-import和unplugin-vue-components后tsc-vue报错的问题

在使用NaiveUI的过程中,引入了unplugin-auto-import和unplugin-vue-components。
这两个组件能自动引入vue方法和vue组件,提升了开发者体验。

但是在vscode中,源码里未手动引用而直接用的方法和组件还是被标红,提示找不到,
在build的时候,tsc-vue报错,

error TS2304: Cannot find name 'NButton'.
error TS2304: Cannot find name 'ref'.

解决方法

在tsconfig.json的include属性里加上 auto-imports.d.ts ,就可以解决不能识别vue方法的问题

{
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts"],
}

但是vue组件不识别的问题,解决起来就没这么直接了
截止2023-09-14,unplugin-vue-components对在vue sfc中使用tsx的支持还是有问题
具体讨论可以看下这个合并请求:

fix: tsx component type declaration #673

通过参考上面这个合并请求里的讨论,我想如果手工创建一个 components-tsx.d.ts 文件,在里面加上全局引用,
并把这个文件配置到 tsconfig.json 的include中,是不就能解决报错问题

试了一下,果然可以。之所以不在原来的 components.d.ts 中加,是因为那个文件在使用的组件变化时会自动重新生成,
手动加入的内容会被覆盖掉。

components.d.ts 文件内容

export {}

declare global {
    const NButton: typeof import('naive-ui')['NButton']
}

最终的 tsconfig.json

{
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts", "components-tsx.d.ts"],
}

http://www.kler.cn/a/530721.html

相关文章:

  • 探秘Linux IO虚拟化:virtio的奇幻之旅
  • 【leetcode100】路径总和Ⅲ
  • LabVIEW透镜多参数自动检测系统
  • 41. 缺失的第一个正数
  • Android 开发:新的一年,新的征程
  • python算法和数据结构刷题[5]:动态规划
  • 寒假day10
  • 一文讲解Spring中应用的设计模式
  • Swoole如何进行错误处理
  • Linux下安装Redis详细教程
  • 6. 【Vue实战--孢子记账--Web 版开发】-- 主币种设置
  • 强化学习、深度学习、深度强化学习的区别是什么?
  • PySPARK带多组参数和标签的SparkSQL批量数据导出到S3的程序
  • Unity Shader Graph 2D - 跳动的火焰
  • 大语言模型深度研究功能:人类认知与创新的新范式
  • Pyside6异步通信测试
  • Java设计模式:行为型模式→状态模式
  • 【R语言】R语言安装包的相关操作
  • Linux第105步_基于SiI9022A芯片的RGB转HDMI实验
  • 体系自适应的物联网漏洞挖掘系统研究背景及意义:物联网漏洞挖掘概述之物联网漏洞现状及问题
  • Python网络自动化运维---批量登录设备
  • 自然语言生成(NLG)算法模型评估方案的硬件配置、系统架构设计、软件技术栈、实现流程和关键代码
  • 【router路由的配置】
  • FPGA学习篇——开篇之作
  • Linux系统之whereis命令的基本使用
  • IM 即时通讯系统-47-beardlessCat IM 使用netty开发分布式Im,提供分布netty集群解决方案