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

65
demandé sur Community 2012-12-02 16:46:37

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 .

151
répondu Markus Jarderot 2017-10-09 17:03:07

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.

2
répondu Chris 2013-05-08 16:43:32

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.

1
répondu Edward 2014-09-04 12:12:31