TypeScript: Probleme mit dem System

Question

Ich teste gerade Typoskript in VisualStudio 2012 und habe ein Problem mit seinem Typsystem. Meine HTML-Site hat ein Canvas-Tag mit der ID "mycanvas". Ich versuche ein Rechteck auf dieser Leinwand zu zeichnen. Hier ist der Code

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

Leider beklagt, dass Visual Studio

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

Es markiert die zweite Zeile als Fehler. Ich dachte, das wäre nur eine Warnung, aber der Code kompiliert nicht. VisualStudio sagt, dass

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

ich diesen Fehler überhaupt nicht mochte. Warum gibt es keinen dynamischen Methodenaufruf? Nach allen Methoden ist getContext definitiv auf meinem canvas-Element vorhanden. Ich dachte jedoch, dass dieses Problem leicht zu lösen wäre. Ich habe gerade einen Typ Annotiation für Leinwand hinzugefügt:

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

Aber das Typsystem war immer noch nicht zufrieden. Hier ist die neue Fehlermeldung, diesmal in der ersten Zeile:

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

Nun, ich bin für die statische Typisierung, aber das macht die Sprache unbrauchbar. Was will das Typsystem von mir?

UPDATE:

Typoskript hat in der Tat keine Unterstützung für dynamische Aufruf und mein Problem mit Typumwandlungen gelöst werden. Meine Frage ist im Grunde ein Duplikat dieser ein TypeScript: casting HTMLElement

Answer 1

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

oder mit dynamischen Lookup mit dem any Typ (ohne Typprüfung):

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

Sie auf die verschiedenen Arten in lib.d.ts aussehen kann.

Answer 2

Es scheint, ist dies in der 0,9-Version von Typoskript korrigiert wird: http://blogs.msdn.com/b/typescript/archive/2013/03/25/working-on-typescript-0-9-generics-overload-on-constants-and-compiler-performance.aspx finden Sie im Abschnitt „Überlast auf Constants“, wo der Leinwand-Tag explizit dargestellt ist.

Answer 3

Ich hatte das gleiche Problem, aber mit SVGSVGElement anstelle von HTMLcanvasElement. Casting zu SVGSVGElement gab einen Fehler bei der Kompilierung:

var mySvg = <SVGSVGElement>document.getElementById('mySvg'); 

Kann nicht konvertieren 'Htmlelement' auf 'SVGSVGElement':
Type 'Htmlelement' fehlt Eigenschaft 'width' vom Typ 'SVGSVGElement'.
Der Typ 'SVGSVGElement' fehlt die Eigenschaft 'onmouseleave' vom Typ 'HTMLElement'.

Wenn es durch erstes Casting fixiert auf 'alle':

var mySvg = <SVGSVGElement><any>document.getElementById('mySvg'); 

oder so (es hat die gleiche Wirkung)

var mySvg: SVGSVGElement = <any>document.getElementById('mySvg'); 

Jetzt mySvg stark als SVGSVGElement eingegeben wird.