使用element-plus 页面组件 ts报错JSX元素类型“ElRow”不具有任何构造签名或调用签名。尝试重启volar插件或者配置tsconfig

项目场景：

vite、ts、vue3、element-plus、axios等技术的开发的后台管理系统。

问题描述

在开发中遇到一个问题，就是main.ts已经全局注册了ElementPlus，但是在业务开发的vue页面中，一些element-plus的el-row、el-card等提示
JSX元素类型“ElRow”不具有任何构造签名或调用签名，如图

 

main.ts

 

 

 

 

虽然不影响运行，但是代码看着红红波浪线着实难受，百度了一大堆，没用实际的用处信息。

原因分析：

开始分析问题出在哪里
开始尝试了许久把element-plus重新引入，main.ts、vite.config.ts都检查了一遍，还是无果。后来尝试直接在业务页面里直接书写：

import { ElRow ElCard} from "element-plus";
//然后在components里注册下
components: {
ElRow ，
ElCard
},

居然没有提示信息了，但每个页面都要这么写的话，太繁杂了。然后浏览ts相关技术文档时，看到了tsconfig.json的解释，突然想到，既然是ts编译报的提示，会不会是tsconfig.json里哪里影响的。

 

解决方案：

通过阅读文档，看到了types这个配置项

怀疑是tsconfig.json里指定了types，点开一看果然。直接修改types如下：

"types": ["vite/client", "jest", "node","element-plus/global"]

问题解决，页面看起来舒适不少。

 

 

或者尝试禁用：volar插件的问题