使用 Vue JSX 时出现:JSX 元素隐式具有类型 “any“,因为不存在接口 “JSX.IntrinsicElements“。

这一段时间在为华为云的 Vue DevUI 组件库(一个前端组件库)做开源贡献。每次在 VSCode 中打开整个项目的时候都发现里面所有.tsx结尾的文件都是大面积爆红,我查看了一下报错内容:JSX 元素隐式具有类型 "any",因为不存在接口 "JSX.IntrinsicElements"。

作为一个晚期的强迫症患者,看到这个情况,这能忍?虽然其实这并不影响使用,但是每每想到我的代码中到处都是爆红,实在是令人头皮发麻。

于是我立刻把报错内容复制粘贴,在必应上四处搜寻,不少博客都建议我安装@types/react@types/react-dom,但是我们的组件库是 Vue JSX,而和 Vue 相关的博客里,得到的结论都是清一色的“不使用严格的类型检查”。

要么是:

{"compilerOptions": {"strict": false}
}

这个是禁用严格检查,意思是让检查器对你宽容一些,一些小问题就别 cue 我了。

要么是:

{"compilerOptions": {"noImplicitAny": false,}
}

这个倒是更加一针见血,是禁用在出现表达式和声明上有隐含的any的时候抛出异常,让它对类似的异常忽略。它直接针对我们遇到的这个问题,让这类问题被忽略掉。好吧,你这边给我报这个错误,报错报的很好,以后别报了

实际上本质上上面这两个其实解决方案是一个,都是降级代码检查的严格程度。要硬说这两种都的确都是有效解决方案,但是实在是略有些简单粗暴,没有任何优雅性可言。更何况我提交一个把strict改成false的 PR 的话,感觉还是略有些生草。

后来我又想到可以配置@vue/babel-preset-jsx,但是这个也没有解决JSX语法报错的问题(我怀疑可能是依赖不匹配的问题),最后我还是想到了一个稍微优雅一些的方案:

// src/shims-vue.d.ts
import { VNode } from 'vue';declare type VueNode = VNode;
declare global {namespace JSX {interface IntrinsicElements {[elem: string]: unknown;}}
}

这里使用unknown是因为 TypeScript 非常排斥开发者使用一个宽泛的类型声明,接受任何类型的相关值,所以我没有使用any而是使用了官方推荐的unknown作为替代。

这个文件可以放在任何一个src路径中,由于 DevUI 是一个组件库,所以我将它放在了外层的根目录中。实际上,这里使用了global声明,这并不影响你将它放在任何特定位置,只要确保这个路径会被检查器识别即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/36803.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

五、Spring IoCDI ★ ✔

5. Spring IoC&DI 1. IoC & DI ⼊⻔1.1 Spring 是什么?★ (Spring 是包含了众多⼯具⽅法的 IoC 容器)1.1.1 什么是容器?1.1.2 什么是 IoC?★ (IoC: Inversion of Control (控制反转))总…

Python逻辑控制语句 之 判断语句--if、if else 和逻辑运算符结合

逻辑运算符: and or not 1.案例一 需求: 1. 获取⽤户输⼊的⽤户名和密码 2. 判断⽤户名是 admin 并且密码是 123456 时, 在控制台输出: 登录成功! 3. 否则在控制台输出: 登录信息错误! # 需求: # 1. 获取用户输入的用户名和密码 # 2. 判断…

【折腾笔记】兰空图床使用Redis做缓存

前言 最近发现我部署在群晖NAS上的兰空图床程序在高并发的情况下会导致图片加载缓慢或出现图片加载失败的情况,于是我查阅了官方文档资料并进行了一系列的测试,发现兰空图床如果开启了原图保护功能,会非常的吃CPU的性能,尤其是在…

【Python游戏】猫和老鼠

本文收录于 《一起学Python趣味编程》专栏,从零基础开始,分享一些Python编程知识,欢迎关注,谢谢! 文章目录 一、前言二、代码示例三、知识点梳理四、总结一、前言 本文介绍如何使用Python的海龟画图工具turtle,开发猫和老鼠游戏。 什么是Python? Python是由荷兰人吉多范…

【工具】API文档生成DocFX

文章目录 总述示例第一步:安装 DocFX第二步:初始化项目第三步:编辑配置文件第四步:编写文档第五步:生成文档第六步:预览文档第七步:部署文档 总述 DocFX 是一个由微软开发的开源文档生成工具&a…

【限免】线性调频信号的脉冲压缩及二维分离SAR成像算法【附MATLAB代码】

文章来源:微信公众号:EW Frontier QQ交流群:949444104 程序一 对线性调频信号进行仿真,输出其时频域的相关信息,并模拟回波信号, 对其进行脉冲压缩和加窗处理。 实验记录: 1.线性调频信号时…

【力扣 242】有效的字母异位词 C++题解(排序+字符串比较)

给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词。 注意:若 s 和 t 中每个字符出现的次数都相同,则称 s 和 t 互为字母异位词。 示例 1: 输入: s “anagram”, t “nagaram” 输出: true 示例 2: 输入: s “rat”…

从0构建一个录制UI测试工具

很多UI自动化测试工具都具备录制UI自动化测试的能力,例如playwright,可以通过playwright vscode插件完成录制,如下图所示,当选择录制脚本时,会打开一个浏览器,在浏览器中输入被测应用url,用户在…

C++:enum枚举共用体union

enum枚举 C继承C的枚举用法 (1)典型枚举类型定义,枚举变量定义和使用 (2)枚举类型中的枚举值常量不能和其他外部常量名称冲突: 举例1宏定义,举例2另一个枚举 // 定义一个名为Color的枚举类型 enum Color {RED, // 红色,默认值…

昇思25天学习打卡营第11天|SSD目标检测

1. 学习内容复盘 模型简介 SSD,全称Single Shot MultiBox Detector,是Wei Liu在ECCV 2016上提出的一种目标检测算法。使用Nvidia Titan X在VOC 2007测试集上,SSD对于输入尺寸300x300的网络,达到74.3%mAP(mean Average Precision)…

JAVA毕业设计145—基于Java+Springboot+vue+uniapp的驾校预约小程序(源代码+数据库+15000字论文)

毕设所有选题: https://blog.csdn.net/2303_76227485/article/details/131104075 基于JavaSpringbootvueuniapp的驾校预约小程序(源代码数据库15000字论文)145 一、系统介绍 本项目前后端分离,分为用户、教练、管理员三种角色 1、用户: …

Redis数据结构——跳跃表(Skiplist)

Redis数据结构——跳跃表(Skiplist) Redis作为一个高性能的键值存储系统,提供了多种数据结构供开发者选择。其中,跳跃表(Skiplist)是一种特殊的数据结构,它在Redis中主要用于实现有序集合&…

ModuleNotFoundError: No module named ‘_sysconfigdata_x86_64_conda_linux_gnu‘

ModuleNotFoundError: No module named _sysconfigdata_x86_64_conda_linux_gnu 1.软件环境⚙️2.问题描述🔍3.解决方法🐡4.结果预览🤔 1.软件环境⚙️ Ubuntu 20.04 Python 3.7.0 2.问题描述🔍 今天发现更新conda之后&#xff0…

Redisson(分布式锁、限流)

注意Redisson是基于Redis的&#xff0c;所以必须先引入Redis配置&#xff08;参考SpringBoot集成Redis文章&#xff09; 1. 集成Redisson 引入依赖 <!-- 二选一,区别是第一个自动配置&#xff0c;第二个还需要手动配置也就是第二步自定义配置&#xff0c;注意版本号&…

Windows怎么实现虚拟IP

在做高可用架构时&#xff0c;往往需要用到虚拟IP&#xff0c;在linux上面有keepalived来实现虚拟ip的设置。在windows上面该怎么弄&#xff0c;keepalived好像也没有windows版本&#xff0c;我推荐一款浮动IP软件PanguVip&#xff0c;它可以实现windows上面虚拟ip的漂移。设置…

UE5材质之HLSL:深度

UE4/5的Custom节点&#xff1a;在VScode使用HLSL&#xff08;新手入门用&#xff09;_vscode写hlsl-CSDN博客 效果&#xff1a; 材质节点&#xff1a; 自定义节点代码&#xff1a; float3 rayStepViewDir*-1; float4 inputTexTexture2DSample(TexObject,TexObjectSampler,uv)…

字体属性(笔记)

字体属性: 含义属性参数说明例子字体样式font-family字体样式的名称可以是使用多个字体样式&#xff0c;后面作为备用字体&#xff0c;font-family&#xff1a;“微软雅黑”&#xff0c;“宋体”;字体大小font-size像素:px,em,remfont-size:20px&#xff1b;字体颜色color颜色…

如何用 PHP 实现一个自定义爬虫框架

随着互联网的不断发展&#xff0c;信息量爆炸式增长&#xff0c;获取有价值的信息已经成为了许多人的需求。在这样的大环境下&#xff0c;爬虫技术逐渐兴起&#xff0c;成为了大数据时代的重要工具之一。爬虫技术的应用十分广泛&#xff0c;其可以用于网络舆情监测、数据分析、…

docker中mysql突然无法远程连接设置

docker登陆到docker.hub docker login -u 用户名 回车密码 将容器打包成自己的镜像 docker commit -a "用户名" -m "redis" 533d6f1402ca 用户名/myredis:v1.2 将镜像发布到平台上 docker push用户名/myredis:v1.2 删除本地镜像 docker rm image …

JavaSE主要内容(全套超完整)

一、为什么选择Java&#xff08;Java的优势&#xff09; 1、应用面广&#xff1a; 相较于其他语言&#xff0c;Java的应用面可谓是非常广&#xff0c;这得益于他的跨平台性和其性能的稳定性。他在服务器后端&#xff0c;Android应用开发&#xff0c;大数据开发&#xf…