TypeScript：型システムの問題

Question

VisualStudio 2012でtypescriptをテストしているだけで、型システムに問題があります。私のHTMLサイトには、 "mycanvas"というIDを持つキャンバスタグがあります。私はこのキャンバスに長方形を描こうとしています。ここで

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

は、残念ながら、VisualStudioをそれはエラーとして第2のラインをマーク

the property 'getContext' does no exist on value of type 'HTMLElement'

と文句を言いコードです。私はこれが単なる警告であると思ったが、コードはコンパイルされない。 VisualStudioによると、

there were build errors. Would you like to continue and run the last successful build ?

このエラーはまったく気に入らなかった。動的メソッド呼び出しがないのはなぜですか？私のキャンバス要素には、すべてのメソッドgetContextが確実に存在します。しかし、私はこの問題を解決するのが簡単だと思った。キャンバスのタイプ注釈を追加したばかりです：

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

しかし、タイプシステムはまだ満足できませんでした。ここでは、新しいエラーメッセージ、最初の行に、この時間です：

Cannot convert 'HTMLElement' to 'HTMLCanvasElement': Type 'HTMLElement' is missing property 'toDataURL' from type 'HTMLCanvasElement'

は、まあ、私は静的型付けのためにすべてのアウトだが、これは言語が使用できなくなります。タイプシステムは私に何をしたいのですか？

UPDATE：

活字体が実際に動的呼び出しをサポートしていませんし、私の問題は、型キャストで解決することができます。

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

あなたはlib.d.tsに異なる種類を見ることができます：私の質問は基本的にこの1 TypeScript: casting HTMLElement

Answer 1

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

かanyタイプの動的な検索を使って（なし型チェック）の複製です。

Answer 2

活字体の0.9バージョンで修正されているようだ： http://blogs.msdn.com/b/typescript/archive/2013/03/25/working-on-typescript-0-9-generics-overload-on-constants-and-compiler-performance.aspx は、キャンバスのタグが明示的に示されている「定数の過負荷」のセクションを参照してください。

Answer 3

私は同じ問題を抱えていましたが、HTMLCanvasElementの代わりにSVGSVGElementを使用しました。
タイプ「のHTMLElement」プロパティが欠落している「幅」タイプから「SVGSVGElement」：「SVGSVGElement」に

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

変換できません「のHTMLElement」：SVGSVGElementへのキャストは、コンパイル時にエラーを与えました。
タイプ 'SVGSVGElement'に 'HTMLElement'タイプのプロパティ 'onmouseleave'がありません。 'は任意の' に最初のキャストで、それを固定した場合

：

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

または

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

今mySvgが強くSVGSVGElementとして入力され、この方法（それは同じ効果があります）。