VS Code中querySelectorAll选择带class元素时IntelliSense失效求助

在JavaScript中，使用querySelectorAll()选择元素（包括通过.指定class的元素）后，通过索引访问NodeList中的元素时，IntelliSense无法生效，不会高亮该DOM元素的方法或属性。

期望：在JavaScript中选择NodeList元素或其中单个元素时，能显示DOM属性

• 用JSDoc类型注释指定类型
  在JS文件里通过JSDoc标注元素类型，让IntelliSense识别DOM属性：

  /** @type {NodeListOf<HTMLElement>} */
  const elements = document.querySelectorAll('.my-class');
  // 此时访问elements[0]可获得完整DOM属性提示
  elements[0].classList.add('active');
  

  若直接获取单个元素，可直接断言类型：

  /** @type {HTMLElement} */
  const element = document.querySelectorAll('.my-class')[0];
  

• 转换为数组并标注类型
  将NodeList转为数组，同时用JSDoc指定数组元素类型：

  /** @type {HTMLElement[]} */
  const elementsArr = Array.from(document.querySelectorAll('.my-class'));
  elementsArr[0].style.color = 'red';
  

• 优先使用querySelector获取单个元素
  如果只需要选中单个元素，直接用querySelector，它默认会返回具体DOM元素类型，IntelliSense可直接识别：

  const element = document.querySelector('.my-class');
  element?.addEventListener('click', () => {});
  

内容的提问来源于stack exchange，提问作者RICK Dutta