jQuery转原生JS时报select不存在于HTMLSelectElement类型错误

运行代码时抛出TypeScript报错：Property 'select' does not exist on type 'HTMLSelectElement'. Did you mean 'onselect'？
现有一段jQuery代码需要转换为纯JavaScript实现，转换过程中触发上述报错，尝试过所有可查的相关解决方案均未修复。
涉及代码如下：

let categories = $("#myCategories").find('.products');
let res = categories.select.data;
console.log(res)

let categories2 = document.getElementById("myCategories") as HTMLSelectElement;
let res2 = categories2.select.data;
console.log(res2)

• 你写的jQuery版本代码本身就存在API调用错误：jQuery返回的集合对象上不存在select属性，不管是直接运行jQuery代码还是转原生实现，categories.select.data这段逻辑都会抛错，和TypeScript、原生JS本身无关。
• 原生HTMLSelectElement类型的DOM实例本身就没有select属性，TypeScript的类型校验完全符合Web API的实际规则，提示的onselect是和该拼写最接近的原生事件属性，属于TS给出的拼写修正提示。
• 额外逻辑错误：直接把getElementById("myCategories")的返回值断言为HTMLSelectElement没有依据，只有标签为<select>的DOM元素才属于这个类型，如果#myCategories是div、ul等普通容器，这个类型断言从逻辑起点就是错的。

从代码结构判断，你的实际需求是获取#myCategories下class为products的子元素关联的data数据，对应正确实现逻辑如下：

• 如果你要读取的是之前通过jQuery.data()方法绑定的、没有直接写在DOM标签上的缓存数据：原生JS无法直接访问jQuery内部维护的data缓存，要么保留jQuery读取逻辑，要么在绑定数据时直接写入DOM的data-*属性，再用原生API读取。
• 如果你要读取的是元素标签上直接声明的data-*自定义属性，直接用原生datasetAPI读取即可，Web API里不存在.select.data这种写法。

可直接运行的TypeScript参考实现：

// 如果父容器不是<select>标签，不要断言为HTMLSelectElement，通用容器用HTMLElement类型即可
const categoriesContainer = document.getElementById("myCategories") as HTMLElement | null;
if (!categoriesContainer) {
  throw new Error("目标容器#myCategories不存在，无法执行后续逻辑");
}
// 获取所有class为products的子元素
const productEls = categoriesContainer.querySelectorAll<HTMLElement>('.products');
// 读取元素上的data属性，例如元素上写了data-id="123"，可通过el.dataset.id获取对应值
const res = Array.from(productEls).map(el => el.dataset);
console.log(res);

如果代码里的.select是你自行给jQuery对象扩展的自定义属性或方法，需要自己对应实现原生逻辑，原生DOM对象和TypeScript内置的DOM类型定义里不会包含自定义扩展的内容。

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