JavaScript 类型注解

Question

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

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

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

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

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

我该如何正确地做到这一点？

另外——我是 JavaScript 新手，很难找到任何真正的规范，例如 HTMLElement 及其具有的属性或 createCanvas 的方法签名以及它返回的类型。有时我会在 MDN 上找到不错的东西，但它们通常不包含方法签名或太多类型信息。这东西有什么好的资源吗？

谢谢

Answer 1

您可以像这样键入 cast：

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

请参阅bottom of this page。

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

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

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

很难找到任何真正的规范，例如 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 返回的 HTMLElement 无法分配给 HTMLCanvasElement。

编辑

进一步检查准确性，这是 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");