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

Question

我使用 typescript 和 react 为我的项目写了一个类。

class myImage extends Image {
   oriHeight: number;
}

上传两张图片后，我有一个名为“results”的数组，其中包含 myImage 类型的对象。

[myImage, myImage]

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

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

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

但是，result 的输出不再是一个对象，而是一个 img 标签（因为 Image 的类型是 HTMLElement），这使得 result 的数据不可读。所以每个 tmp 的输出都是未定义的。

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

Answer 1

我敢打赌，您的数据实际上很好。当您在控制台记录一个 html 元素时，chrome 控制台会将其显示为 html 标记而不是 javascript 对象。

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

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