JavaScript类型注解

Question

我正在使用WebStorm并遇到以下问题：

/** @type {HTMLCanvasElement} */
var buffered_canvas = document.createElement("canvas");
buffered_canvas.width = 256;
buffered_canvas.height = 256;

当我将buffered_canvas注释为HTMLCanvasElement类型时，它会抱怨createElement返回不能分配给HTMLCanvasElement的HTMLElement。

/** @type {HTMLElement} */
var buffered_canvas = document.createElement("canvas");
buffered_canvas.width = 256;
buffered_canvas.height = 256;

当我将其更改为HTMLElement类型时，它会抱怨HTMLElement上没有定义宽度和高度属性。

我该如何正确地做这件事？

而且--我是JavaScript新手，很难找到任何真实的规范，比如HTMLElement，它有哪些属性或createCanvas的方法签名，以及它返回的类型。有时，我在MDN上找到了一些不错的东西，但它们通常不包括方法签名或许多类型信息。这些东西有什么好的资源吗？

谢谢

Answer 1

您可以像这样键入类型：

var buffered_canvas = /** @type {HTMLCanvasElement} */ (document.createElement("canvas"));

见本页底部。

您可以将其与常规类型注释一起使用，如下所示。

/** @type {HTMLCanvasElement} */
var buffered_canvas = /** @type {HTMLCanvasElement} */ (document.createElement("canvas"));

如果WebStorm遵循与闭包相同的注释约定，这应该可以工作。

很难找到任何真实的规范，比如HTMLElement，它有哪些属性或createCanvas的方法签名，以及它返回的类型。

MDN是好的，您还可以查看WHATWG和W3C的标准。

Answer 2

这两种情况的最佳结果是，将类型设置为任一或使用管道操作符|。

/** @type {HTMLCanvasElement|HTMLElement} */

现在，IDE将识别这两个继承的方法。

可以这样做，因为HTMLCanvasElement实际上扩展了一个HTMLElement。当您这样做时，您正在告诉IDE 2：

1. 首先，您有一个HTMLCanvasElement，因为我们知道在createElement('canvas')上返回的HTMLElement是从new HTMLCanvasElement()传递给HTMLElement的。这就满足了你的第二个问题：

当我将其更改为HTMLElement类型时，它会抱怨HTMLElement上没有定义宽度和高度属性。

1. 其次，您有一个HTMLElement，因为继承了HTMLCanvasElement.prototype = new HTMLElement()，所以这将满足您的第一个问题：

当我将buffered_canvas注释为HTMLCanvasElement类型时，它会抱怨createElement返回不能分配给HTMLCanvasElement的HTMLElement。

编辑

为了精确起见，下面是PHPStorm (我也假设WebStorm )用于document.createElement的内容

/**
@param {string} tagName
@return {Element}
*/
Document.prototype.createElement = function(tagName) {};

这是矛盾之处，当您悬停在方法上时，createElement在弹出窗口中得到的是

[ HTMLElement ] Document.prototype.createElement( [ string ] tagName )

最后，与之前的HTMLElement相同的原则是扩展Element，所以您可以使用这个注释

/** @type {Element|HTMLElement|HTMLCanvasElement} */
var buffered_canvas = document.createElement("canvas");