vue报错之“JSX element implicitly has type ‘any‘ because no interface ‘JSX.IntrinsicElements‘ exists.”

本文介绍了在Vue项目中遇到TypeScriptJSX错误的处理,提供两种解决方案:一是关闭tsconfig.json中的严格类型检查,二是允许隐式任何类型。
部署运行你感兴趣的模型镜像

背景:

在使用TypeScript时,在vue中报了如上错误,“JSX 元素隐式具有类型 "any",因为不存在全局类型 "JSX.Element"。”

解决方法:

方法一

不使用严格的类型检查,即在 tsconfig.json 中设置 “strict”: false

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

方法二

在 tsconfig.json中设置 “noImplicitThis”: false

{
  "compilerOptions": {
    "noImplicitAny": false, // 是否在表达式和声明上有隐含的any类型时报错
  }
}

备注:

本文参考:7b7d23d16ab5

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰(StepFun)与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量,支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是,它可以生成多种语言的歌曲,包括但不限于中文、英文、日文等19种语言

npm run build > arco-design-pro-vue@1.0.0 build > vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts src/components/menu/index.vue:102:19 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 102 <a-sub-menu ~~~~~~~~~~~ 103 key={element?.name} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... 107 }} ~~~~~~~~~~~~~~~~~~~~~~ 108 > ~~~~~~~~~~~~~~~~~~~ src/components/menu/index.vue:110:19 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 110 </a-sub-menu> ~~~~~~~~~~~~~ src/components/menu/index.vue:112:19 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 112 <a-menu-item ~~~~~~~~~~~~ 113 key={element?.name} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... 115 onClick={() => goto(element)} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 116 > ~~~~~~~~~~~~~~~~~~~ src/components/menu/index.vue:118:19 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 118 </a-menu-item> ~~~~~~~~~~~~~~ src/components/menu/index.vue:129:9 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 129 <a-menu ~~~~~~~ 130 mode={topMenu.value ? 'horizontal' : 'vertical'} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... 139 onCollapse={setCollapse} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 140 > ~~~~~~~~~ src/components/menu/index.vue:142:9 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 142 </a-menu> ~~~~~~~~~ src/views/form/group/index.vue:254:32 - error TS7016: Could not find a declaration file for module '@arco-design/web-vue/es/form'. '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@arco-design_web-vue@2.57.0@@arco-design/web-vue/es/form/index.js' implicitly has an 'any' type. If the '@arco-design/web-vue' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@arco-design/web-vue/es/form';` 254 import { FormInstance } from '@arco-design/web-vue/es/form'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/form/step/components/base-info.vue:90:32 - error TS7016: Could not find a declaration file for module '@arco-design/web-vue/es/form'. '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@arco-design_web-vue@2.57.0@@arco-design/web-vue/es/form/index.js' implicitly has an 'any' type. If the '@arco-design/web-vue' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@arco-design/web-vue/es/form';` 90 import { FormInstance } from '@arco-design/web-vue/es/form'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/form/step/components/channel-info.vue:100:32 - error TS7016: Could not find a declaration file for module '@arco-design/web-vue/es/form'. '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@arco-design_web-vue@2.57.0@@arco-design/web-vue/es/form/index.js' implicitly has an 'any' type. If the '@arco-design/web-vue' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@arco-design/web-vue/es/form';` 100 import { FormInstance } from '@arco-design/web-vue/es/form'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/user/setting/components/basic-information.vue:130:32 - error TS7016: Could not find a declaration file for module '@arco-design/web-vue/es/form'. '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@arco-design_web-vue@2.57.0@@arco-design/web-vue/es/form/index.js' implicitly has an 'any' type. If the '@arco-design/web-vue' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@arco-design/web-vue/es/form';` 130 import { FormInstance } from '@arco-design/web-vue/es/form'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/visualization/data-analysis/components/chain-item.vue:43:44 - error TS2345: Argument of type '() => { grid: { left: number; right: number; top: number; bottom: number; }; xAxis: { type: "category"; show: false; }; yAxis: { show: false; }; tooltip: { show: true; trigger: "axis"; }; series: { name: string; data: Ref<...>; type: "bar"; barWidth: number; itemStyle: { ...; }; }; }' is not assignable to parameter of type 'optionsFn'. Call signature return types '{ grid: { left: number; right: number; top: number; bottom: number; }; xAxis: { type: "category"; show: false; }; yAxis: { show: false; }; tooltip: { show: true; trigger: "axis"; }; series: { name: string; data: Ref<any, any>; type: "bar"; barWidth: number; itemStyle: { ...; }; }; }' and 'EChartsOption' are incompatible. The types of 'series' are incompatible between these types. Type '{ name: string; data: Ref<any, any>; type: "bar"; barWidth: number; itemStyle: { borderRadius: number; }; }' is not assignable to type 'SeriesOption$1 | SeriesOption$1[] | undefined'. Type '{ name: string; data: Ref<any, any>; type: "bar"; barWidth: number; itemStyle: { borderRadius: number; }; }' is not assignable to type 'PictorialBarSeriesOption$1'. Type '{ name: string; data: Ref<any, any>; type: "bar"; barWidth: number; itemStyle: { borderRadius: number; }; }' is not assignable to type 'PictorialBarSeriesOption'. Types of property 'type' are incompatible. Type '"bar"' is not assignable to type '"pictorialBar"'. 43 const { chartOption } = useChartOption(() => { ~~~~~~~ src/views/visualization/data-analysis/components/chain-item.vue:135:44 - error TS2345: Argument of type '() => { grid: { left: number; right: number; top: number; bottom: number; }; legend: { show: true; top: string; right: string; orient: "vertical"; icon: string; itemWidth: number; itemHeight: number; textStyle: { ...; }; }; tooltip: { ...; }; series: { ...; }[]; }' is not assignable to parameter of type 'optionsFn'. Call signature return types '{ grid: { left: number; right: number; top: number; bottom: number; }; legend: { show: true; top: string; right: string; orient: "vertical"; icon: string; itemWidth: number; itemHeight: number; textStyle: { ...; }; }; tooltip: { ...; }; series: { ...; }[]; }' and 'EChartsOption' are incompatible. The types of 'series' are incompatible between these types. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }[]' is not assignable to type 'SeriesOption$1 | SeriesOption$1[] | undefined'. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }[]' is not assignable to type 'SeriesOption$1[]'. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }' is not assignable to type 'SeriesOption$1'. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }' is not assignable to type 'PieSeriesOption$1'. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }' is not assignable to type 'PieSeriesOption'. Types of property 'data' are incompatible. Type 'Ref<any, any>' is missing the following properties from type '(OptionDataValueNumeric | OptionDataValueNumeric[] | PieDataItemOption)[]': length, pop, push, concat, and 28 more. 135 const { chartOption } = useChartOption(() => { ~~~~~~~ src/views/visualization/multi-dimension-data-analysis/components/data-overview.vue:54:39 - error TS18049: 'el.value' is possibly 'null' or 'undefined'. 54 <span class="tooltip-value">${el.value.toLocaleString()}</span> ~~~~~~~~ Found 13 errors in 7 files. Errors Files 6 src/components/menu/index.vue:102 1 src/views/form/group/index.vue:254 1 src/views/form/step/components/base-info.vue:90 1 src/views/form/step/components/channel-info.vue:100 1 src/views/user/setting/components/basic-information.vue:130 2 src/views/visualization/data-analysis/components/chain-item.vue:43 1 src/views/visualization/multi-dimension-data-analysis/components/data-overview.vue:54 ✘ lixiang@lixiangdeMacBook-Pro  ~/Desktop/xingwangtoubiao1   main  ^[[200~npm install --legacy-peer-deps 200~npm install --legacy-peer-deps200~npmzsh: bad pattern: ^[[200~npm ✘ lixiang@lixiangdeMacBook-Pro  ~/Desktop/xingwangtoubiao1   main  npm install --legacy-peer-deps npm ERR! code EACCES npm ERR! syscall rename npm ERR! path /Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@babel_code-frame@7.27.1@@babel npm ERR! dest /Users/lixiang/Desktop/xingwangtoubiao1/node_modules/._@babel_code-frame@7.27.1@@babel-Ap5lTVgv npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, rename '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@babel_code-frame@7.27.1@@babel' -> '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/._@babel_code-frame@7.27.1@@babel-Ap5lTVgv' npm ERR! [Error: EACCES: permission denied, rename '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@babel_code-frame@7.27.1@@babel' -> '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/._@babel_code-frame@7.27.1@@babel-Ap5lTVgv'] { npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'rename', npm ERR! path: '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@babel_code-frame@7.27.1@@babel', npm ERR! dest: '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/._@babel_code-frame@7.27.1@@babel-Ap5lTVgv' npm ERR! } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator. npm ERR! A complete log of this run can be found in: npm ERR! /Users/lixiang/.npm/_logs/2025-07-21T04_18_16_919Z-debug-0.log ✘ lixiang@lixiangdeMacBook-Pro  ~/Desktop/xingwangtoubiao1   main  npm run build > arco-design-pro-vue@1.0.0 build > vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts src/components/menu/index.vue:102:19 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 102 <a-sub-menu ~~~~~~~~~~~ 103 key={element?.name} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... 107 }} ~~~~~~~~~~~~~~~~~~~~~~ 108 > ~~~~~~~~~~~~~~~~~~~ src/components/menu/index.vue:110:19 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 110 </a-sub-menu> ~~~~~~~~~~~~~ src/components/menu/index.vue:112:19 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 112 <a-menu-item ~~~~~~~~~~~~ 113 key={element?.name} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... 115 onClick={() => goto(element)} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 116 > ~~~~~~~~~~~~~~~~~~~ src/components/menu/index.vue:118:19 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 118 </a-menu-item> ~~~~~~~~~~~~~~ src/components/menu/index.vue:129:9 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 129 <a-menu ~~~~~~~ 130 mode={topMenu.value ? 'horizontal' : 'vertical'} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ... 139 onCollapse={setCollapse} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 140 > ~~~~~~~~~ src/components/menu/index.vue:142:9 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 142 </a-menu> ~~~~~~~~~ src/views/form/group/index.vue:254:32 - error TS7016: Could not find a declaration file for module '@arco-design/web-vue/es/form'. '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@arco-design_web-vue@2.57.0@@arco-design/web-vue/es/form/index.js' implicitly has an 'any' type. If the '@arco-design/web-vue' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@arco-design/web-vue/es/form';` 254 import { FormInstance } from '@arco-design/web-vue/es/form'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/form/step/components/base-info.vue:90:32 - error TS7016: Could not find a declaration file for module '@arco-design/web-vue/es/form'. '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@arco-design_web-vue@2.57.0@@arco-design/web-vue/es/form/index.js' implicitly has an 'any' type. If the '@arco-design/web-vue' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@arco-design/web-vue/es/form';` 90 import { FormInstance } from '@arco-design/web-vue/es/form'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/form/step/components/channel-info.vue:100:32 - error TS7016: Could not find a declaration file for module '@arco-design/web-vue/es/form'. '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@arco-design_web-vue@2.57.0@@arco-design/web-vue/es/form/index.js' implicitly has an 'any' type. If the '@arco-design/web-vue' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@arco-design/web-vue/es/form';` 100 import { FormInstance } from '@arco-design/web-vue/es/form'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/user/setting/components/basic-information.vue:130:32 - error TS7016: Could not find a declaration file for module '@arco-design/web-vue/es/form'. '/Users/lixiang/Desktop/xingwangtoubiao1/node_modules/_@arco-design_web-vue@2.57.0@@arco-design/web-vue/es/form/index.js' implicitly has an 'any' type. If the '@arco-design/web-vue' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@arco-design/web-vue/es/form';` 130 import { FormInstance } from '@arco-design/web-vue/es/form'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/visualization/data-analysis/components/chain-item.vue:43:44 - error TS2345: Argument of type '() => { grid: { left: number; right: number; top: number; bottom: number; }; xAxis: { type: "category"; show: false; }; yAxis: { show: false; }; tooltip: { show: true; trigger: "axis"; }; series: { name: string; data: Ref<...>; type: "bar"; barWidth: number; itemStyle: { ...; }; }; }' is not assignable to parameter of type 'optionsFn'. Call signature return types '{ grid: { left: number; right: number; top: number; bottom: number; }; xAxis: { type: "category"; show: false; }; yAxis: { show: false; }; tooltip: { show: true; trigger: "axis"; }; series: { name: string; data: Ref<any, any>; type: "bar"; barWidth: number; itemStyle: { ...; }; }; }' and 'EChartsOption' are incompatible. The types of 'series' are incompatible between these types. Type '{ name: string; data: Ref<any, any>; type: "bar"; barWidth: number; itemStyle: { borderRadius: number; }; }' is not assignable to type 'SeriesOption$1 | SeriesOption$1[] | undefined'. Type '{ name: string; data: Ref<any, any>; type: "bar"; barWidth: number; itemStyle: { borderRadius: number; }; }' is not assignable to type 'PictorialBarSeriesOption$1'. Type '{ name: string; data: Ref<any, any>; type: "bar"; barWidth: number; itemStyle: { borderRadius: number; }; }' is not assignable to type 'PictorialBarSeriesOption'. Types of property 'type' are incompatible. Type '"bar"' is not assignable to type '"pictorialBar"'. 43 const { chartOption } = useChartOption(() => { ~~~~~~~ src/views/visualization/data-analysis/components/chain-item.vue:135:44 - error TS2345: Argument of type '() => { grid: { left: number; right: number; top: number; bottom: number; }; legend: { show: true; top: string; right: string; orient: "vertical"; icon: string; itemWidth: number; itemHeight: number; textStyle: { ...; }; }; tooltip: { ...; }; series: { ...; }[]; }' is not assignable to parameter of type 'optionsFn'. Call signature return types '{ grid: { left: number; right: number; top: number; bottom: number; }; legend: { show: true; top: string; right: string; orient: "vertical"; icon: string; itemWidth: number; itemHeight: number; textStyle: { ...; }; }; tooltip: { ...; }; series: { ...; }[]; }' and 'EChartsOption' are incompatible. The types of 'series' are incompatible between these types. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }[]' is not assignable to type 'SeriesOption$1 | SeriesOption$1[] | undefined'. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }[]' is not assignable to type 'SeriesOption$1[]'. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }' is not assignable to type 'SeriesOption$1'. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }' is not assignable to type 'PieSeriesOption$1'. Type '{ name: string; type: "pie"; radius: string[]; label: { show: false; }; data: Ref<any, any>; }' is not assignable to type 'PieSeriesOption'. Types of property 'data' are incompatible. Type 'Ref<any, any>' is missing the following properties from type '(OptionDataValueNumeric | OptionDataValueNumeric[] | PieDataItemOption)[]': length, pop, push, concat, and 28 more. 135 const { chartOption } = useChartOption(() => { ~~~~~~~ src/views/visualization/multi-dimension-data-analysis/components/data-overview.vue:54:39 - error TS18049: 'el.value' is possibly 'null' or 'undefined'. 54 <span class="tooltip-value">${el.value.toLocaleString()}</span> ~~~~~~~~ Found 13 errors in 7 files. Errors Files 6 src/components/menu/index.vue:102 1 src/views/form/group/index.vue:254 1 src/views/form/step/components/base-info.vue:90 1 src/views/form/step/components/channel-info.vue:100 1 src/views/user/setting/components/basic-information.vue:130 2 src/views/visualization/data-analysis/components/chain-item.vue:43 1 src/views/visualization/multi-dimension-data-analysis/components/data-overview.vue:54
07-22
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值