TS报错：You may need an additional loader to handle the result of these loaders.

fud1mo

已于 2022-08-23 16:45:42 修改

阅读量2.9k

点赞数

文章标签： javascript 前端开发语言

于 2022-08-23 16:36:27 首次发布

本文链接：https://blog.youkuaiyun.com/wsssq_/article/details/126487739

版权

在Vue3项目中，使用ref获取元素并尝试添加classList时遇到错误。问题在于TypeScript无法确定document.querySelector返回的元素类型。解决方法是对查询结果进行类型断言，如`(document.querySelector('.advanced-filter') as HTMLElement).classList`，从而可以正常访问classList属性。

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

vue3项目：获取HTML元素的classList时，ref模板引用成功获取，document.querySelector能获取元素，但获取classList时报错

const advancedFilter = ref();
advancedFilter.value.classList.add('active');

console.log(document.querySelector('.advanced-filter')); //成功获取到HTML元素
console.log(document.querySelector('.advanced-filter')?.classList); // 报错

成功获取到元素

从元素获取classList时报错

报错详情

原因：TS无法确定获取到的数据类型

解决方式：TS类型断言

console.log((document.querySelector('.advanced-filter') as HTMLElement).classList);