I'm using WebStorm and encountering the following problem:

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

When I annotate buffered_canvas as type HTMLCanvasElement, it plains that createElement returns an HTMLElement which cannot be assigned to an HTMLCanvasElement.

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

When I change it to type HTMLElement, it plains instead that width and height properties are undefined on HTMLElement.

How do I do this properly?

Also -- I'm new to JavaScript and 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. Sometimes I find decent stuff on MDN, but they don't usually include method signatures or much type information. Is there any good resource for this stuff?

Thanks

I'm using WebStorm and encountering the following problem:

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

When I annotate buffered_canvas as type HTMLCanvasElement, it plains that createElement returns an HTMLElement which cannot be assigned to an HTMLCanvasElement.

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

When I change it to type HTMLElement, it plains instead that width and height properties are undefined on HTMLElement.

How do I do this properly?

Also -- I'm new to JavaScript and 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. Sometimes I find decent stuff on MDN, but they don't usually include method signatures or much type information. Is there any good resource for this stuff?

Thanks

• javascript
• types
• webstorm

• 1 I'd say you're needlessly plicating your work with this. JavaScript is not strongly typed, and not Java. – MightyPork Commented Dec 12, 2014 at 22:47
• 3 Well my project is currently 20K lines of code, so it's plicated. I'm using the Closure Compiler and type annotations to check for errors. I'll admit I'm new to WebStorm, but its built-in error checking already helped me discover a couple errors. However, it also lists hundreds of stupid errors like the one above. – user202987 Commented Dec 12, 2014 at 22:59

2 Answers 2

You can type cast like this:

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

See the bottom of this page.

You can use this along with the regular type annotation, like this.

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

If WebStorm follows the same annotation conventions as Closure this should work.

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 is good, you can also look at WHATWG and W3C for standards.

The best of both worlds, set the type to either or with a pipe operator |

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

Now both inherited methods will be recognized by your IDE.

It's okay to do this because HTMLCanvasElement actually extends a HTMLElement. When you do this you are telling the IDE 2 things:

1. First you have a HTMLCanvasElement because we know that the HTMLElement returned on createElement('canvas') is casted from a new HTMLCanvasElement() to HTMLElement. So that satisfies your second problem:

When I change it to type HTMLElement, it plains instead that width and height properties are undefined on HTMLElement.

2. Second you have a HTMLElement because of inheritance HTMLCanvasElement.prototype = new HTMLElement(), so that will satisfy your first problem:

When I annotate buffered_canvas as type HTMLCanvasElement, it plains that createElement returns an HTMLElement which cannot be assigned to an HTMLCanvasElement.

EDIT

further review for exactness, here is what PHPStorm (i assume WebStorm as well) is using for document.createElement

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

Here is the contradiction, when you hover over the method createElement here is what you get in the pop up window

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

Finally, same principle as before HTMLElement extends Element, so you can use this annotation

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