自动更改数组中元素的类型

Question

我使用打字稿为我的项目写了一个这样的类并做出反应。

class myImage extends Image {
   oriHeight: number;
}

上传两个图像后，我有一个名为“结果”的数组，其中充满了类型为myImage的对象。

[myImage, myImage]

在浏览器中单击它时，我可以看到每个元素的oriHeight数据。

然后我尝试使用results.map（）方法遍历该数组中的所有元素。

results.map((result: myImage) => {
   console.log(result);
   var tmp = result.oriHeight;
   console.log(tmp);
})

但是，结果的输出不再是一个对象，而是一个img标记（因为Image的类型是HTMLElement），这使得结果的数据不可读。因此，每个tmp的输出都是不确定的。

我对此感到困惑。为什么要遍历myImage对象时将其变成img标签？我希望有人可以帮助我。真的很感激。

Answer 1

我敢打赌，您的数据确实不错。当您控制台记录html元素时，Chrome控制台将其显示为html标签而不是javascript对象。

更新：将自己的属性添加到DOM元素通常是一个不好的做法，因为它们更难调试，并且有可能被将来的浏览器属性覆盖。相反，您可以创建一个同时包含图像和自定义属性的javascript对象。这是示例接口定义：

interface MyImage {
    imageEl: HTMLImageElement;
    oriHeight: number;
}