在 Haxe 中为 HTML 元素进行元素访问的强制转换答案

【问题标题】：Casting for element access in Haxe for HTML-elements在 Haxe 中为 HTML 元素进行元素访问的强制转换
【发布时间】：2017-08-23 16:40:57
【问题描述】：

如果我们想在画布上绘制一些东西，我们需要获取它的 2D 上下文。我在项目的 index.html 中有一个画布元素：

 <body>
    <canvas id="canv" width="200" height="200"></canvas>
 </body>

所以现在我需要获取该元素的访问权限，好吧，让我们编写代码：

var cans:CanvasElement = Browser.document.getElementById("canv");

在编译阶段出现错误：

src/Main.hx:32: 字符 2-78 : js.html.Element 应该是 js.html.CanvasElement

但是如果我们使用不安全的强制转换，已经可以了：

var cans:CanvasElement = cast Browser.document.getElementById("canv");

一切正常，我可以访问并可以获取 2D 上下文或进行一些设置，例如：

cans.width = cans.height = 800;
cans.style.backgroundColor = 'rgba(158, 167, 184, 0.4)';

是的，我知道，“如果它有效 - 不要修复”，我大致了解一切正常，原则上我得到我需要的东西，当被施放时，但有人可以为我解释这个过程吗？这是什么意思 - js.html.Element 应该是 js.html.CanvasElement？我才刚刚开始学习 Haxe（尤其是编程），我很高兴我可以做一些可行的事情，但我想知道，为什么它在工作时能工作，为什么在不能工作时不能工作。

【问题讨论】：

标签： javascript haxe

【解决方案1】：

js.html.Element 应该是 js.html.CanvasElement

这只是意味着编译器预计类型为CanvasElement（因为这是cans 变量的类型提示告诉它的），但遇到了其他问题（在这种情况下为Element ）。您正在尝试将getElementById() 返回的值分配给cans，但getElementById() 返回一个Element。

由于Element 比CanvasElement 更不具体（CanvasElement 扩展Element），您不能只将Element 分配给CanvasElement - 谁说这不是DivElement，或任何其他选项？这只能在代码执行时确定/编译器无法知道这一点，因此会出现错误（runtime vs compile time）。

在这种情况下这很好用，因为您知道 ID 为 "canv" 的元素是实际上是 CanvasElement，因此您可以通过告诉编译器您知道您知道什么来使编译器静音'正在使用cast。当返回的值实际上是另一种类型时会出错。

【讨论】：

【解决方案2】：

Gama11 的答案真的很好。有时更容易在代码中创建画布，比如这条简单的蛇。 https://try.haxe.org/#D0324 其次，有时您可以使用另一个变量并让抽象的东西为您自动转换它，但我认为您最终可能仍然在代码中使用转换。

var canvas = document.createCanvasElement(); 
var dom = canvas; 
var style = dom.style; 
// HTMLDocument is needed here so dom is infered to
// HTMLDocument type and the canvas is auto cast, 
// via the use of the secondary variable.

这里的问题并不是真正的 Haxe，问题在于 HTML5 的演变或追溯重新设计的方式，Haxe 只是试图包装一些动态的东西，与提供适当的编译器检查和一致性的尝试不一致，通常当类型像加载数据一样进入 Haxe 时，您必须将它们转换为 Haxe，但是您只有一个风险点，从那时起编译器可以帮助您。在某些情况下，您可以更明确地使用演员表：

var style = cast( canvas, HTMLDocument ).style;

告诉 Haxe 你希望它如何施放。对于一些动态性较差的目标，Haxe 可以在类型系统上做得更好，但是 js 如此松散的事实意味着尽管有一些奇怪的复杂性，但使用 Haxe 对 js 编码来说更加强大。坚持使用 Haxe，它有助于您对多种语言的一般代码理解。

【讨论】：

实际上，在这里使用安全演员表被认为是不好的做法。安全强制转换带有运行时开销，并且对于该开销，它们保证在强制转换失败的情况下抛出异常 - 这意味着如果你没有将它包装在 try-catch 中，你只是在浪费性能/应该使用不安全的演员表。请参阅 Haxe 手册页的 last section。
哦，好的，知道这很有用:)，对此感到抱歉。
没问题。我发现这是对 Haxe 语法最常见的误解之一。