TypeScript: problemi con il sistema di tipi

Question

Sto solo testando dattiloscritto in VisualStudio 2012 e ho un problema con il suo sistema di tipi. Il mio sito html ha un tag canvas con l'id "mycanvas". Sto provando a disegnare un rettangolo su questa tela. Ecco il codice

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

Purtroppo VisualStudio lamenta che

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

Essa segna la seconda linea come un errore. Ho pensato che questo sarebbe solo un avvertimento ma il codice non viene compilato. VisualStudio dice che

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

Non mi è piaciuto affatto questo errore. Perché non esiste un'invocazione di metodo dinamica? Dopo tutto il metodo getContext esiste sicuramente sul mio elemento canvas. Tuttavia ho pensato che questo problema sarebbe stato facile da risolvere. Ho appena aggiunto un tipo annotiation per tela:

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

Ma il sistema di tipo ancora non ero soddisfatto. Ecco il nuovo messaggio di errore, questa volta in prima linea:

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

bene, sono tutti fuori per la tipizzazione statica, ma questo rende la lingua inutilizzabile. Cosa vuole che il sistema tipo mi faccia?

UPDATE:

Carattere tipografico ha infatti alcun supporto per l'invocazione dinamica e il mio problema può essere risolto con typecasts. La mia domanda è fondamentalmente un duplicato di questo TypeScript: casting HTMLElement

Answer 1

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

o utilizzando la ricerca dinamica con il tipo any (senza typechecking):

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

Potete guardare i diversi tipi di lib.d.ts.

Answer 2

Sembra che questo è stato corretto nella versione 0,9 del dattiloscritto: http://blogs.msdn.com/b/typescript/archive/2013/03/25/working-on-typescript-0-9-generics-overload-on-constants-and-compiler-performance.aspx si veda la sezione "Overload su Costanti", dove il tag canvas è esplicitamente indicato.

Answer 3

Ho avuto lo stesso problema, ma con SVGSVGElement invece di HTMLCanvasElement. Casting per SVGSVGElement ha dato un errore di compilazione:

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

Impossibile convertire 'HTMLElement' a 'SVGSVGElement':
Tipo 'HTMLElement' manca proprietà 'width' dal tipo 'SVGSVGElement'.
Tipo 'SVGSVGElement' manca la proprietà 'onmouseleave' dal tipo 'HTMLElement'.

Se riparato dal primo casting per 'qualsiasi':

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

o in questo modo (che ha lo stesso effetto)

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

Ora mySvg è fortemente tipizzato come SVGSVGElement.