TypeScript: problemy z systemem typu

Question

Właśnie testuję maszynopis w Visual Studio 2012 i mam problem z jego typem systemu. Moja strona html ma tag canvas z identyfikatorem "mycanvas". Próbuję narysować prostokąt na tym płótnie. Oto kod

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

Niestety VisualStudio zarzuca

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

To oznacza drugą linię jako błąd. Myślałem, że to będzie tylko ostrzeżenie, ale kod się nie skomplikuje. VisualStudio mówi, że w ogóle nie podobał mi się ten błąd. Dlaczego nie ma wywołania metody dynamicznej? Po wszystkim metoda getContext zdecydowanie istnieje w moim elemencie canvas. Jednak myślałem, że ten problem będzie łatwy do rozwiązania. Właśnie dodałem adnotację typu do płótna:

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

Ale system typów wciąż nie był spełniony. Oto nowy komunikat, tym razem w pierwszej linii:

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

Cóż, jestem na całość do typowania statycznego, ale to sprawia, że ​​język bezużyteczny. Czego chce ode mnie system typów?

UPDATE:

Typescript ma faktycznie żadnego wsparcia dla dynamicznego inwokacji i mój problem może być rozwiązany z typecasts. Moje pytanie jest w zasadzie kopią tej jednej TypeScript: casting HTMLElement

Answer 1

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

lub stosując dynamiczną odnośnika z typem any (bez typechecking):

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

Można spojrzeć na różne rodzaje w lib.d.ts.

Answer 2

Wydaje ten jest rozwiązany w wersji maszynopisu .9: http://blogs.msdn.com/b/typescript/archive/2013/03/25/working-on-typescript-0-9-generics-overload-on-constants-and-compiler-performance.aspx Zobacz sekcję „Przeciążenie Stałe”, gdzie znacznik płótno jest wyraźnie pokazane.

Answer 3

Miałem ten sam problem, ale z SVGSVGElement zamiast HTMLCanvasElement. Casting do SVGSVGElement dał błąd kompilacji:

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

nie można przekonwertować 'HTMLElement' do 'SVGSVGElement':
typu '' HTMLElement brakuje własność 'width' od typu 'SVGSVGElement'.
W typie "SVGSVGElement" brakuje właściwości "onmouseleave" z typu "HTMLElement".

Jeżeli poprawiony przez pierwszego castingu do 'każdego':

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

lub w ten sposób (ma identyczny efekt)

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

Teraz mySvg jest silnie wpisany jako SVGSVGElement.