TypeScript：types系统的问题

我只是在VisualStudio 2012中testing打字稿，并且对其types系统有问题。 我的HTML网站有一个ID为“mycanvas”的canvas标签。 我试图在这个canvas上画一个矩形。 这是代码

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

不幸的是VisualStudio抱怨

属性'getContext'在types'HTMLElement'的值上不存在

它将第二行标记为错误。 我认为这只是一个警告，但代码不能编译。 VisualStudio说

有构build错误。 你想继续并运行最后的成功构build？

我根本不喜欢这个错误。 为什么没有dynamic的方法调用？ 毕竟getContext的方法肯定存在于我的canvas元素上。 但是我认为这个问题很容易解决。 我刚刚为canvas添加了一个types标注：

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

但types系统仍然不满意。 这是新的错误信息，这次是在第一行：

无法将“HTMLElement”转换为“HTMLCanvasElement”：input“HTMLElement”缺less来自types“HTMLCanvasElement”的属性“toDataURL”

那么，我全力以赴进行静态打字，但这使得语言无法使用。 types系统要我做什么？

更新：

Typescript确实不支持dynamic调用，我的问题可以通过types转换来解决。 我的问题基本上是这一个TypeScript的重复：铸造HTMLElement

Answer 1

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

或使用anytypes的dynamic查找（无types检查）：

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

你可以看看lib.d.ts中的不同types。

Answer 2

看来这是在TypeScript的.9版本中得到纠正的： http : //blogs.msdn.com/b/typescript/archive/2013/03/25/working-on-typescript-0-9-generics-overload- on-constants-and-compiler-performance.aspx请参阅显式显示canvas标签的“Overload on Constants”部分。

Answer 3

我有同样的问题，但与SVGSVGElement而不是HTMLCanvasElement。 铸造到SVGSVGElement给编译时错误：

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

无法将“HTMLElement”转换为“SVGSVGElement”：
types'HTMLElement'缺less'SVGSVGElement'types的属性'width'。
types'SVGSVGElement'缺less'HTMLElement'types的属性'onmouseleave'。

如果通过首先投射到“任何”来修复它：

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

或者这样（它有相同的效果）

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

现在mySvg被强制types为SVGSVGElement。