TypeScript: problems with type system
Asked 07 September, 2021
Viewed 1K times
  • 52
Votes

I'm just testing typescript in VisualStudio 2012 and have a problem with its type system. My html site has a canvas tag with the id "mycanvas". I'm trying to draw a rectangle on this canvas. Here's the code

var canvas = document.getElementById("mycanvas");
var ctx: CanvasRenderingContext2D = canvas.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 100, 100);

Unfortunately VisualStudio complains that


  

the property 'getContext' does no exist on value of type 'HTMLElement'

It marks the second line as an error. I thought this would be merely a warning but the code does not compile. VisualStudio says that


  

there were build errors. Would you like to continue and run the last successful build ?

I didn't like this error at all. Why is there no dynamic method invocation ? After all the method getContext definitely exists on my canvas element. However I thought this problem would be easy to solve. I just added a type annotiation for canvas:

var canvas : HTMLCanvasElement = document.getElementById("mycanvas");
var ctx: CanvasRenderingContext2D = canvas.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 100, 100);

But the type system still wasn't satisfied. Here's the new error message, this time in the first line:


  

Cannot convert 'HTMLElement' to 'HTMLCanvasElement': Type 'HTMLElement' is missing property 'toDataURL' from type 'HTMLCanvasElement'

Well, I'm all out for static typing but this makes the language unusable. What does the type system want me to do ?

UPDATE:

Typescript has indeed no support for dynamic invocation and my problem can be solved with typecasts. My question is basically a duplicate of this one TypeScript: casting HTMLElement

7 Answer