112

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

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

残念ながら、VisualStudioはそれを訴えます

プロパティ「getContext」はタイプ「HTMLElement」の値に存在しません

2行目をエラーとしてマークします。これは単なる警告だと思っていましたが、コードはコンパイルされません。VisualStudioはそれを言う

ビルドエラーがありました。最後に成功したビルドを続行して実行しますか?

私はこのエラーがまったく好きではありませんでした。動的メソッド呼び出しがないのはなぜですか? 結局、メソッド getContext はキャンバス要素に確実に存在します。しかし、この問題は簡単に解決できると思いました。キャンバスの型注釈を追加しました。

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

しかし、型システムはまだ満足していませんでした。これが新しいエラー メッセージです。今回は最初の行にあります。

'HTMLElement' を 'HTMLCanvasElement' に変換できません: タイプ 'HTMLElement' にタイプ 'HTMLCanvasElement' のプロパティ 'toDataURL' がありません

まあ、私は静的型付けに全力を尽くしていますが、これにより言語が使用できなくなります。型システムは私に何をさせたいのですか?

アップデート:

Typescript は実際に動的呼び出しをサポートしておらず、私の問題は型キャストで解決できます。私の質問は基本的に、このTypeScript の複製です: HTMLElement のキャスト

4

7 に答える 7

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

または、タイプで動的ルックアップを使用するany(タイプチェックなし):

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

lib.d.tsでさまざまなタイプを確認できます。

于 2012-12-02T16:23:13.023 に答える
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 タグが明示的に示されている「定数のオーバーロード」のセクションを参照してください。

于 2013-05-08T16:43:32.093 に答える
1

私は同じ問題を抱えていましたが、HTMLCanvasElement の代わりに SVGSVGElement を使用していました。SVGSVGElement にキャストすると、コンパイル時にエラーが発生しました:

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

'HTMLElement' を 'SVGSVGElement' に変換できません:
タイプ 'HTMLElement' には、タイプ 'SVGSVGElement' のプロパティ 'width' がありません。
タイプ 'SVGSVGElement' には、タイプ 'HTMLElement' のプロパティ 'onmouseleave' がありません。

最初に「any」にキャストして修正した場合:

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

またはこの方法(同じ効果があります)

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

現在、mySvg は SVGSVGElement として厳密に型指定されています。

于 2014-09-04T12:12:31.847 に答える