1. ホーム
  2. html

[解決済み] TypeScript: 型システムに関する問題

2022-09-28 17:20:48

質問

VisualStudio 2012 で typescript をテストしているところですが、その型システムで問題が発生しました。私の html サイトには、ID "mycanvas" を持つ canvas タグがあります。私はこのキャンバスに矩形を描画しようとしています。以下はそのコードです。

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 は私の canvas 要素に間違いなく存在します。しかし、私はこの問題は簡単に解決できると思いました。canvas の型注釈を追加しただけです。

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

しかし、型システムはまだ満足していませんでした。これが新しいエラーメッセージです。

HTMLElement' を 'HTMLCanvasElement' に変換できません。タイプ 'HTMLElement' はタイプからプロパティ 'toDataURL' が欠落しています。 'HTMLCanvasElement' のプロパティがありません。

私は静的型付けには賛成ですが、これでは言語が使い物になりません。型システムは私に何をさせたいのでしょうか?

UPDATEです。

Typescriptは確かに動的な呼び出しをサポートしておらず、私の問題はタイプキャストで解決できます。私の質問は基本的にこれと重複しています。 TypeScript: HTMLElement のキャスティング

どのように解決するのですか?

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 .