html5 - que - meta tags ejemplos

TypeScript: problemas con el sistema de tipos

Question

Solo estoy probando el texto mecanografiado en VisualStudio 2012 y tengo un problema con su sistema de tipos. Mi sitio html tiene una etiqueta canvas con el id "mycanvas". Estoy tratando de dibujar un rectángulo en este lienzo. Aquí está el código

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

Lamentablemente, VisualStudio se queja de que

la propiedad ''getContext'' no existe en el valor de tipo ''HTMLElement''

Marca la segunda línea como un error. Pensé que esto sería solo una advertencia, pero el código no se compila. VisualStudio dice que

hubo errores de compilación. ¿Te gustaría continuar y ejecutar la última versión exitosa?

No me gustó este error en absoluto. ¿Por qué no hay una invocación de método dinámico? Después de todo el método getContext definitivamente existe en mi elemento canvas. Sin embargo, pensé que este problema sería fácil de resolver. Acabo de agregar una anotación de tipo para lienzo:

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

Pero el sistema de tipos aún no estaba satisfecho. Aquí está el nuevo mensaje de error, esta vez en la primera línea:

No se puede convertir ''HTMLElement'' en ''HTMLCanvasElement'': Escriba ''HTMLElement'' en la propiedad ''toDataURL'' en el tipo ''HTMLCanvasElement''.

Bueno, estoy dispuesto a escribir estáticos, pero esto hace que el lenguaje no se pueda usar. ¿Qué quiere el sistema tipográfico que haga?

ACTUALIZAR:

Desde luego, Typescript no tiene soporte para la invocación dinámica y mi problema se puede resolver con typecasts. Mi pregunta es básicamente un duplicado de este TypeScript: casting HTMLElement

Answer 1

Parece que esto se está corrigiendo en la versión .9 de TypeScript: http://blogs.msdn.com/b/typescript/archive/2013/03/25/working-on-typescript-0-9-generics-overload-on-constants-and-compiler-performance.aspx Consulte la sección sobre "Sobrecarga en constantes" donde la etiqueta canvas se muestra explícitamente.

Answer 2

Tuve el mismo problema, pero con SVGSVGElement en lugar de HTMLCanvasElement. La conversión a SVGSVGElement produjo un error en tiempo de compilación:

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

No se puede convertir ''HTMLElement'' a ''SVGSVGElement'':
Escriba ''HTMLElement'' falta la propiedad ''width'' del tipo ''SVGSVGElement''.
Escriba ''SVGSVGElement'' falta la propiedad ''onmouseleave'' del tipo ''HTMLElement''.

Si se solucionó al lanzar primero a ''cualquiera'':

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

o de esta manera (tiene el mismo efecto)

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

Ahora mySvg está fuertemente tipeado como SVGSVGElement.

Answer 3

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

o usando búsqueda dinámica con any tipo (sin verificación de tipo):

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

Puede ver los diferentes tipos en lib.d.ts