使用element-plus 页面组件 ts报错JSX元素类型“ElRow”不具有任何构造签名或调用签名

项目场景：

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

---

问题描述

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

main.ts

import { createApp } from 'vue'
import App from '/@/App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/display.css'
import SvgIcon from '/@/components/SvnIcon/index.vue'
import * as ElIcons from '@element-plus/icons-vue'

const app = createApp(App)
app.use(ElementPlus)
app.component('SvgIcon', SvgIcon)

const ElIconsData = ElIcons as unknown as Array<() => Promise<typeof import('*.vue')>>
for (const iconName in ElIconsData) {
    app.component(`ElIcon${iconName}`, ElIconsData[iconName])
}
  
app.mount('#app')

---

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

原因分析：

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

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

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

tsconfig.json文档

解决方案：

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

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

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

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

附tsconfig.json文件：

{
    "compilerOptions": {
        "sourceMap": true,
        "strict": true,
        "module": "esnext",
        "target": "es6",
        "jsx": "preserve",
        "importHelpers": true,
        "experimentalDecorators": true,
        "strictFunctionTypes": false,
        "skipLibCheck": true,
        "moduleResolution": "node",
        "isolatedModules": true,
        "allowSyntheticDefaultImports": true,
        "forceConsistentCasingInFileNames": true,
        "allowJs": false,
        "resolveJsonModule": true,
        "incremental": true,
        "baseUrl": ".",
        "paths": {
            "/@/*": ["src/*"],
            "/mock/*": ["mock/*"],
            "/server/*": ["server/*"]
        },
        "lib": ["esnext", "dom"],
        "types": ["vite/client", "jest", "node","element-plus/global"],
        "typeRoots": [
            "./node_modules/@types/",
            "./types"],
        "esModuleInterop": true,
        "plugins": [
            { "name": "@vuedx/typescript-plugin-vue" }
        ]
    },
    "include": [
        "**/*.ts", "**/*.d.ts", "**/*.vue","types/*.d.ts","mock/*.ts","vite.config.ts"
    ],
    "exclude": [
        "node_modules",
        "dist",
        "**/*.js"
    ]
}

其它解决方案：

有几位小伙伴也遇到了这种问题，采用上述方法不成功，最后采用其它方法解决