如何在TypeScript中为HTMLElement的attributes扩展新属性

你可以通过嵌套交叉类型，精准修改HTMLElement的attributes属性类型，无需声明新类型或使用any：

const retyped = this.element.nativeElement as HTMLElement & {
  attributes: NamedNodeMap & { banana: string }
};

这样断言后，访问retyped.attributes.banana就不会触发类型错误了——TypeScript会识别到attributes既保留了原NamedNodeMap的所有特性，又新增了banana字符串属性。

原理是：交叉类型&可以在不修改原类型定义的前提下，对目标类型的某个子属性进行扩展。这里我们针对HTMLElement的attributes字段，将其与包含banana属性的对象类型交叉，既保留了原生NamedNodeMap的类型信息，又添加了自定义属性的类型声明。

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