TypeScript: problemas con el sistema de tipos


Solo estoy probando typescript 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);

Desafortunadamente 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 simplemente una advertencia, pero el código no se compila. VisualStudio dice que

Hubo errores de compilación. Te gustaría continuar y ejecutar el último construcción exitosa ?

No me gustó este error en absoluto. ¿Por qué no hay 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 añadir un tipo annotiation para canvas:

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 todavía no estaba satisfecho. Aquí está el nuevo mensaje de error, esto tiempo en la primera línea:

No se puede convertir 'HTMLElement' a 'HTMLCanvasElement': Tipo 'HTMLElement' falta la propiedad 'toDataURL' del tipo "HTMLCanvasElement"

Bueno, estoy totalmente a favor de la escritura estática, pero esto hace que el lenguaje sea inutilizable. ¿Qué quiere el sistema de tipos que haga?

ACTUALIZACIÓN:

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

Author: Community, 2012-12-02

3 answers

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

O usando búsqueda dinámica con el tipo any (sin comprobación de tipo):

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

Puedes ver los diferentes tipos en lib.d. ts .

 151
Author: Markus Jarderot,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-09 17:03:07

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

 2
Author: Chris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-08 16:43:32

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

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

No se puede convertir 'HTMLElement' a 'SVGSVGElement':
Type 'HTMLElement' falta la propiedad 'width' del tipo 'SVGSVGElement'.
Type 'SVGSVGElement' is missing property ' onmouseleave 'from type'HTMLElement'.

Si se fija por primera vez casting a 'any':

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

O de esta manera (tiene el idéntico efecto)

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

Ahora mySvg se escribe fuertemente como SVGSVGElement.

 1
Author: Edward,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-04 12:12:31