TypeScript: problèmes avec le système de types

Je teste simplement typescript dans VisualStudio 2012 et j’ai un problème avec son système de types. Mon site html a une balise canvas avec l’id “mycanvas”. J’essaie de dessiner un rectangle sur cette canvas. Voici le code

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

Malheureusement, VisualStudio se plaint que

la propriété ‘getContext’ n’existe pas sur la valeur de type ‘HTMLElement’

Il marque la deuxième ligne comme une erreur. Je pensais que ce serait simplement un avertissement, mais le code ne comstack pas. VisualStudio dit que

il y avait des erreurs de construction. Voulez-vous continuer et exécuter la dernière construction réussie?

Je n’ai pas aimé cette erreur du tout. Pourquoi n’y a-t-il pas d’invocation de méthode dynamic? Après tout, la méthode getContext existe bien sur mon élément canvas. Cependant, je pensais que ce problème serait facile à résoudre. Je viens d’append une annotation de type pour canevas:

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

Mais le système de caractères n’était toujours pas satisfait. Voici le nouveau message d’erreur, cette fois dans la première ligne:

Impossible de convertir ‘HTMLElement’ en ‘HTMLCanvasElement’: tapez la propriété ‘HTMLElement’ ‘toDataURL’ du type ‘HTMLCanvasElement’

Eh bien, je suis tout à fait pour le typage statique, mais cela rend le langage inutilisable. Qu’est-ce que le système de caractères veut que je fasse?

METTRE À JOUR:

Typescript n’a en effet aucun support pour l’invocation dynamic et mon problème peut être résolu avec des typecasts. Ma question est fondamentalement une copie de celui-ci TypeScript: casting HTMLElement

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

ou en utilisant la recherche dynamic avec le type any (pas de vérification de type):

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

Vous pouvez regarder les différents types dans lib.d.ts.

Il semble que cela soit corrigé dans la version .9 de TypeScript: http://blogs.msdn.com/b/typescript/archive/2013/03/25/working-on-typescript-0-9-generics-overload- on-constants-and-comstackr-performance.aspx Voir la section “Surcharge sur les constantes” où la balise canvas est explicitement affichée.

J’ai eu le même problème, mais avec SVGSVGElement au lieu de HTMLCanvasElement. La conversion en SVGSVGElement a généré une erreur de compilation:

 var mySvg = document.getElementById('mySvg'); 

Impossible de convertir ‘HTMLElement’ en ‘SVGSVGElement’:
Tapez ‘HTMLElement’ est la propriété ‘width’ manquante du type ‘SVGSVGElement’.
Tapez ‘SVGSVGElement’ est la propriété manquante ‘onmouseleave’ du type ‘HTMLElement’.

Si corrigé par le premier casting à ‘any’:

 var mySvg = document.getElementById('mySvg'); 

ou de cette façon (il a l’effet identique)

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

Maintenant, mySvg est fortement typé comme SVGSVGElement.