TypeScript: problèmes avec le système de type
je teste juste le typographie dans VisualStudio 2012 et j'ai un problème avec son système de type. Mon site html a une étiquette de toile avec l'id "mycanvas". J'essaie de dessiner un rectangle sur cette toile. 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 un erreur. Je pensais que ce serait simplement un avertissement, mais le code ne compile 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 du tout aimé cette erreur. Pourquoi n'y a-t-il pas d'invocation de méthode dynamique ? Après tout, la méthode getContext existe certainement sur mon élément canvas. Cependant, je pensais que ce problème serait facile à résoudre. J'ai juste ajouté un Annotation type pour toile:
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 type n'était toujours pas satisfait. Voici le nouveau message d'erreur, cette fois, dans la première ligne:
ne peut pas convertir "HTMLElement" en "HTMLCanvasElement": Type 'HTMLElement' est une propriété manquante 'toDataURL' de type "Htmlcanvaselement "
Eh bien, je suis tout à fait pour la dactylographie statique, mais cela rend le langage inutilisable. Quel est le type de système faire de moi ?
mise à jour:
Typescript n'a en effet aucun support pour l'invocation dynamique et mon problème peut être résolu avec des typographies. Ma question est essentiellement une copie de celui-ci TypeScript: casting HTMLElement
3 réponses
var canvas = <HTMLCanvasElement> document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ou en utilisant la recherche dynamique 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 c'est corrigé dans la .9 version de la Machine: http://blogs.msdn.com/b/typescript/archive/2013/03/25/working-on-typescript-0-9-generics-overload-on-constants-and-compiler-performance.aspx Voir la section sur "surcharge sur les constantes" où la balise canvas est explicitement indiquée.
j'ai eu le même problème, mais avec SVGSVGElement au lieu de HTMLCanvasElement. Casting to SVGSVGElement a donné une erreur de compilation:
var mySvg = <SVGSVGElement>document.getElementById('mySvg');
ne peut pas convertir "HTMLElement" en "SVGSVGElement":
Le Type "HTMLElement" manque la propriété "width" du type "SVGSVGElement".
Type 'SVGSVGElement' est manquant 'onmouseleave' de type 'La'.
si fixé par première coulée à "n'importe":
var mySvg = <SVGSVGElement><any>document.getElementById('mySvg');
ou de cette façon (il a le même effet)
var mySvg: SVGSVGElement = <any>document.getElementById('mySvg');
maintenant mySvg est fortement typé SVGSVGElement.