5

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 complains 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 complains 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

2
  • 1
    I'd say you're needlessly complicating your work with this. JavaScript is not strongly typed, and not Java.
    – MightyPork
    Dec 12, 2014 at 22:47
  • 3
    Well my project is currently 20K lines of code, so it's complicated. 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
    Dec 12, 2014 at 22:59

2 Answers 2

6

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.

1
  • Thanks, this seems the best solution. And thanks for the links. :-)
    – user202987
    Dec 13, 2014 at 7:55
5

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 complains instead that width and height properties are undefined on HTMLElement.

  1. 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 complains 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");
5
  • This is essentially the same as leaving it untyped (look at percent typed output from Closure). Kind of defeats the point. Dec 13, 2014 at 4:04
  • you sir are wrong. see my edit. HTMLCanvasElement is a HTMLElement
    – Jay Harris
    Dec 13, 2014 at 4:29
  • Ah, so WebStorm will give you autocomplete for both types. This actually throws a warning in Closure since it wants an Element from createElement instead of HTMLElement. If you do HTMLCanvasElement|Element, it doesn't throw a warning but it's pretty much useless because it treats it as being untyped. Does type casting not work for WebStorm? Dec 13, 2014 at 6:25
  • @DaggNabbit yes it will. and for the Element thing, see my edit webstorm/phpstorm contradicts itself
    – Jay Harris
    Dec 13, 2014 at 6:49
  • @DaggNabbit I'm not sure if casting works in webstorm/phpstorm, I use | to inherit methods for type hinting
    – Jay Harris
    Dec 13, 2014 at 6:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.