TypeScript: problems with type system

Question

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

Answer 1

var canvas = <HTMLCanvasElement> document.getElementById("mycanvas"); var ctx = canvas.getContext("2d"); 

or using dynamic lookup with the any type (no typechecking):

var canvas : any = document.getElementById("mycanvas"); var ctx = canvas.getContext("2d"); 

You can look at the different types in lib.d.ts.

Answer 2

const canvas =  document.getElementById('stage') as HTMLCanvasElement;