any Property 'setCheckedKeys' does not exist on type 'Vue | Element | Vue[] | Element[]'.

最新推荐文章于 2023-05-09 19:00:50 发布
最新推荐文章于 2023-05-09 19:00:50 发布
阅读量902 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： ts Vue element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LLL_liuhui/article/details/103031237
本文解决了一个在使用Vue框架时遇到的问题，即this.$refs.tree.setCheckedKeys(keys)调用时出现的错误。通过添加类型断言(this.$refs.tree as any).setCheckedKeys(keys)，成功解决了该问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

this.$refs.tree.setCheckedKeys(keys);报错

解决办法：加类型断言

(this.$refs.tree as any).setCheckedKeys(keys);

element-ui 报错Cannot read property ‘setCheckedKeys‘ of undefined“
ych6666的博客
01-11 1368
el-tree的一些坑 过程是这样的 1.首先我将el-tree封装为一个公用组件：myTree 然后在另一组件中注册使用 <my-tree ref="myTree" :show-checkbox="true" :tree-data="tableTreeData" :node-key="id" @currentChecked="currentChecked"/> </my-tree> 2.此时，我准备清空树中所有勾选的ch
React报错之Property ‘value‘ does not exist on type ‘HTMLElement‘
m0_56069948的博客
08-27 2894
正文从这开始~当我们试图访问一个类型为的元素上的属性时，会产生"Property ‘value’ does not exist on type ‘HTMLElement’"错误。为了解决该错误，在访问属性之前，使用类型断言将元素类型断言为。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vqD4BHIZ-1661534128424)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/75da2f875f0f4a5d96deea6
直接操作 Vue data 中不存在的属性导致的 v-model 绑定异常问题
yuange
08-19 5997
初学Vue遇到的问题，尝试了几个小时才搞明白，大佬应该一眼就能看出什么问题吧…… 需要注意，不要直接在JS中操作一个Vue data对象中不存在的属性，如果同时有通过v-model绑定到该对象的不存在的属性时，会出现诡异的行为表现，console中不会报出任何warn或error。 需求是，实现三个复选框，第一个复选框初始为选中状态，一开始写出来是这样的—— HTML 1 2 3 4 5 <div id="app" style="margin: 10p...
Property ‘clearSelection’ does not exist on type ‘Vue’
知行合一
05-27 2885
首先vue+typescript下报Property ‘clearSelection’ does not exist on type ‘Vue’ 这种情况居然会编译错误， 查看报了什么错，显示是 分析原因： 它不知道是哪个类型的属性，因为我们这里用到了TypeScript，而TypeScript 又是强类型检查所以报了这个错。 解决方案： 将原来的 this.$refs['multipleTable'].clearSelection() 修改为任意类型 (this.$refs['multipleTa
vue element-ui typescript tree报错 === Property 'getCheckedNodes' does not exist on type 'Element | E...
weixin_30737433的博客
08-29 882
import { Tree } from 'element-ui' const ref = <Tree>this.$refs.tree ref.getCheckedNodes() 转载于:https://www.cnblogs.com/cynthia-wuqian/p/11429794.html
解决Vue3的ts报错：类型“{}”上不存在属性“xxx”，三种方法彻底根治
热门推荐
05-09 5万+
网上找了各种原因，有让添加jsconfig.json文件的，有让新建一个项目的，有的直接放弃ts的，哈哈哈，真的是千奇百怪都有，好吧，我这里就也出一种方法，不要用vscode了，使用WebStorm，哈哈哈，可能让你也想不到吧，但是真的有效啊：请看效果，就不报错了，撒花。
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly…Vetur（2339）
11-19
VSCode 中 Vue 项目报错 Property ‘xxx‘ does not exist on type ‘CombinedVueInstance…Vetur（2339） 在 VSCode 中使用 Vue 项目时，可能会遇到 Property ‘xxx‘ does not exist on type ...
[react] Property ‘addEventListener‘ does not exist on type ‘never‘
qubes的专栏
10-11 957
problem react hook模式，使用useRef，设置click事件监听 const parentRef = useRef(null); useEffect(()=>{ parentRef.current?.addEventListener('click',()=>{ console.log(`parentRef`) },false) }, []) <div style={parentStyle} ref={parentRef}>
vue2.x + ts + element 踩坑初体验
weixin_43899935的博客
11-30 1323
1、this.message.error(′′)报类型“default”上不存在属性“message.error('') 报 类型“default”上不存在属性“message.error(′′)报类型“default”上不存在属性“message”。 解决方法： 在 tsconfig.json 里面添加 "types": [ "webpack-env", "./../element-ui/types" ], 原因： 然后再去看看element node-model的结
Vue 源码学习——深入响应式原理
开发猫
05-31 1008
目录 深入响应式原理 响应式对象 Object.defineProperty initState proxy observe Observer defineReactive 依赖收集 Dep Watcher 过程分析 派发更新 过程分析 nextTick JS 运行机制 Vue 的实现 检测变化的注意事项 对象添加属性 数组 计算属性 VS 侦听属性 c...
解决ts类型“never”上不存在属性“XXX”解决办法
m0_49566505的博客
06-08 1万+
这个问题是因为使用了ts但没有去定义它的类型比如这种 这里就会报错一个“never”上不存在属性“XXX”解决办法可以 targetList: [ ] as any,或者直接targetList: Array()
vue-elementUI el-tree组件获取当前选中(check)的所有数据（含所有选中的二级节点和父节点）数组
提莫拌一团蘑菇
12-24 1万+
获取方法如下： this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
vuerequire不存在页面_解决“类型'Vue'上不存在属性”错误
weixin_29781865的博客
02-22 2518
我正在使用Typescript和Vuejs来构建一个应用程序 . 我有几个独立的组件(.vue)文件，我将其导入到Typescript(.ts)文件中 . 在Typescript文件中，我从npm Vue库导入Vue，然后创建一个新的Vue来显示我的组件 . 我看到的错误是：'Vue'类型中不存在属性x我的构建系统是带有tsc的Webpack . 为什么我会收到此错误，如何解决？main.tsim...
【vue】解决Property ‘xxx‘ does not exist on type ‘never‘
栀妹儿的炼丹炉
12-01 1万+
做一个根据id返回对应名称的过滤函数，记录如下报错 报错：Property 'xxx' does not exist on type 'never'.Vetur(2339) 我获取到的数据是：{__ob__: we}对象形式的数组 解决方法：通过字符方式获取对象属性【来自大神：EsquireY】 growthStageFormat(id){ let label = ''; // 重点来啦 this.stepAttr.find((item) => { .
vue refs 报错 Property 'getSectionIds' does not exist on type 'Vue | Element | Vue[] | Element[]'.
Jane_96的博客
12-06 1903
在父组件中用refs去获取子组件内部的方法或者属性，以下面的demo为例，直接写this.$refs.childRef.getValue() 会报错，报错内容说’Vue | Element | Vue[] | Element[]'a这些类型中，没有我们调用的属性。但是我们很清楚，这个childRef的类型是ChildComponent，这个类型中是含有我们所需要的变量或者方法，因此给this.$r...
TypeScript Property ‘XXX‘ does not exist on type ‘never‘
青颜的天空的博客
03-24 3664
使用TypeScript开发React项目，开发中用Map循环渲染UI时，出现这个错误是因为Typescript在执行代码检查时在该对象没有定义相应属性，遇到该错误有以下几种解决办法。 将对象设置成 any类型 <ul> {data.hits.map((item: any) => ( <li key={item.objectID}> <a href={item.url}>{item.title}</a> </li
vue+TS中父组件调用子组件报错Property ‘xxx‘ does not exist on type ‘Vue‘解决方案
qq_40295815的博客
03-05 6271
在使用ts的过程中发现，父组件调用子组件方法的时候 this.$refs.childThisParent.handleCommitInfo() 发现vscode报错Property 'handleCommitInfo' does not exist on type 'Vue的情况，但是实际上运行效果完全没问题。 主要原因是vscode会根据声明文件自动进行类型推断的，这里没法知道childMethod的类型 因此，如下即可 (this.$refs.childThisParentas any)....
Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'
qq_35257117的博客
06-10 1万+
环境： vue2.5.2+element-ui2.2.2 +TypeScript 位置： 在提交from 表单验证时 //在这开始报错 this.type = 'test' this.$refs['form'].validate(valid => { ... ... }) 错误信息： 分析原因： Property ‘validate’ does not exist on typ...
提示Vue: Property proxy does not exist on type ComponentInternalInstance | null
最新发布
03-14
<think>好的，我现在要解决用户的问题：在使用Vue3的setup语法时，遇到类型错误“Property 'proxy' does not exist on type 'ComponentInternalInstance | null’”。用户之前询问过如何全局引入常量文件，现在在实现过程中遇到了类型问题。我需要分析原因并提供解决方案。 首先，用户可能按照之前的指导，在组件中通过getCurrentInstance()获取实例，然后使用proxy来访问全局常量。但TypeScript提示proxy不存在，这可能是因为类型定义的问题。 Vue3的getCurrentInstance()返回的是ComponentInternalInstance或null，而proxy属性可能在新版本中已被弃用或类型定义发生了变化。需要确认Vue3的版本和Composition API的使用方式。 查阅Vue3的官方文档发现，在Composition API中，尤其是使用<script setup>时，推荐使用useContext或直接使用provide/inject，或者直接导入常量，而不是依赖全局属性。此外，getCurrentInstance()返回的实例在类型上可能不包含proxy，或者需要显式断言。 可能的原因：在setup中，getCurrentInstance().proxy可能无法正确推断类型，或者在新版本中已经不再推荐使用proxy来访问全局属性。因此，用户需要调整访问全局常量的方式。 解决方案可能有几种：一是通过类型断言明确告诉TypeScriptproxy的存在；二是使用app.config.globalProperties配合setup中的ctx.root访问；三是推荐更模块化的方式，直接导入常量文件，而不是全局注入。 考虑到用户希望全局引入常量，但遇到类型问题，可能需要调整全局常量的注册和使用方式。例如，使用依赖注入（provide/inject）或者使用更类型安全的方式，如为globalProperties添加类型声明。 另外，用户可能没有正确扩展ComponentCustomProperties接口，导致TS无法识别$constants的存在。需要检查shims.d.ts中的类型声明是否正确，并且是否在组件中正确使用。 总结可能的解决步骤： 1. 使用类型断言明确proxy的类型。 2. 检查类型声明文件是否正确扩展了ComponentCustomProperties。 3. 推荐替代方法，如直接导入常量，避免使用全局属性。 4. 使用useContext或ctx.root来访问全局属性，但需要注意Vue版本的支持。 5. 调整全局常量的注册方式，使用app.provide配合inject，以更符合Composition API的最佳实践。 最终，需要给出用户清晰的步骤，解决类型错误，同时保持代码的类型安全和可维护性。可能还需要比较不同方法的优缺点，帮助用户选择最适合的方案。</think>以下是分步骤解决方案： 出现该错误的原因是 TypeScript 无法正确识别组件实例类型，以下是 3 种解决方案： ```typescript // 方案1：类型断言（推荐） const instance = getCurrentInstance()! const proxy = instance.proxy as ComponentPublicInstance & { $constants: typeof constants } // 使用示例 proxy.$constants.BUTTON_TEXT.SUBMIT ``` ```typescript // 方案2：解构写法（Vue3.3+） import { getCurrentInstance } from 'vue' const { $constants } = (getCurrentInstance() as any).proxy ``` ```typescript // 方案3：模块化导入（最推荐） // 直接导入常量文件，无需全局注册 import { BUTTON_TEXT } from '@/constants/buttonText' // 模板中直接使用 <el-button>{{ BUTTON_TEXT.SUBMIT }}</el-button> ``` **类型声明修正（关键步骤）：** ```typescript // src/shims-vue.d.ts import { Constants } from '@/constants' declare module '@vue/runtime-core' { interface ComponentCustomProperties { $constants: Constants // 必须与注册的类型一致 } // 如果使用方案1的类型断言，可添加扩展 interface ComponentPublicInstance { $constants: Constants } } ``` **各方案对比：** | 方案 | 类型安全 | 维护性 | 推荐度 | 适用场景 | |--------|----------|--------|--------|---------------------| | 方案1 | ⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐ | 需要全局属性的场景 | | 方案2 | ⭐⭐ | ⭐ | ⭐ | 快速开发临时方案 | | 方案3 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐| ⭐⭐⭐⭐⭐| 中大型项目推荐方案 | **最佳实践建议：** 1. 优先使用模块化导入（方案3） 2. 需要全局使用时，配合完成以下配置： ```typescript // main.ts 注册时添加类型 app.config.globalProperties.$constants = constants as Constants // 组件中使用 const ctx = useCurrentInstance()?.appContext.config.globalProperties ctx?.$constants.BUTTON_TEXT.SUBMIT ``` **补充说明：** - 使用 `$constants` 时需确保已执行 `npm install @vue/runtime-core --save-dev` - Vue 3.3+ 推荐使用 [provide/inject](https://vuejs.org/guide/components/provide-inject.html) 替代全局属性 ```typescript // 全局提供 app.provide('constants', constants) // 组件中使用 import { inject } from 'vue' const constants = inject<Constants>('constants')! ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值