使用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里哪里影响的。

使用element-plus 页面组件 ts报错JSX元素类型“ElRow”不具有任何构造签名或调用签名_第1张图片
tsconfig.json文档

解决方案:

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

使用element-plus 页面组件 ts报错JSX元素类型“ElRow”不具有任何构造签名或调用签名_第2张图片
怀疑是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"
    ]
}

其它解决方案:

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

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

你可能感兴趣的:(ts,element-plus,typescript,vue.js,javascript)