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

您可以像这样键入 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 相同的注释约定，这应该可以工作。

having trouble finding any real specification of things like HTMLElement and what properties it has or method signatures for createCanvas and what type it returns.

MDN不错，也可以看看 WHATWG和 W3C为标准。