TypeScript迁移遇报错：Element类型不存在yPos属性

问题根源 #

1. 参数类型不匹配：你将nodes的类型声明为HTMLDivElement，但实际接收的是包含12个div节点的HTMLCollection，类型定义错误。
2. 自定义属性未声明：yPos是拖拽逻辑添加的自定义属性，TypeScript的内置Element/HTMLDivElement类型中不存在该属性，因此触发类型检查报错。

具体解决方案 #

方案一：局部类型断言（适合仅当前函数使用的场景）

先修正参数类型，再通过类型断言告诉TypeScript元素带有yPos属性：

// 定义包含yPos的自定义div类型
type DraggableDiv = HTMLDivElement & { yPos?: number };

// 若接收的是HTMLCollection类型的参数
const whereAmI = (nodes: HTMLCollectionOf<HTMLDivElement>) => {
  Array.from(nodes).forEach((el, i) => {
    const draggableEl = el as DraggableDiv;
    console.log('el.yPos: ', draggableEl.yPos);
  });
};

// 若nodes是包含子div的父元素（对应原JS逻辑）
const whereAmI = (nodes: HTMLDivElement) => {
  Array.from(nodes.children).forEach((el, i) => {
    const draggableEl = el as DraggableDiv;
    console.log('el.yPos: ', draggableEl.yPos);
  });
};

方案二：全局扩展类型（适合项目多处使用该自定义属性的场景）

在项目的全局类型声明文件（比如global.d.ts）中扩展HTMLDivElement接口，让TypeScript全局识别yPos属性：

// global.d.ts
interface HTMLDivElement {
  yPos?: number;
}

之后无需每次断言，直接访问即可：

// 接收HTMLCollection参数的情况
const whereAmI = (nodes: HTMLCollectionOf<HTMLDivElement>) => {
  Array.from(nodes).forEach((el, i) => {
    console.log('el.yPos: ', el.yPos);
  });
};

// 接收父div元素的情况
const whereAmI = (nodes: HTMLDivElement) => {
  Array.from(nodes.children).forEach((el, i) => {
    console.log('el.yPos: ', el.yPos);
  });
};

补充说明 #

原JavaScript代码无需类型检查，所以可以直接访问任意属性，但TypeScript作为静态类型语言，要求所有访问的属性必须在类型定义中存在。通过上述两种方式，既能满足类型检查要求，又能兼容原有的拖拽逻辑。

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