TS2339エラーの対処方法について

エラー

試しにこのようなコードをTypeScriptで書いてみます。

const canvas = document.getElementById("hogeCanvas");
const ctx = canvas.getContext("2d");

JavaScriptでは問題ないが、TypeScriptだと以下のようにエラーとして怒られます。

error TS2339: Property 'getContext' does not exist on type 'HTMLElement'

これはTypeScriptが戻り値をHTMLElementと推論した結果、
getContextのような、メソッドやプロパティが参照できないためです。

解決策

型アサーションで具体的な要素を指定します。

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

もしくは、

const canvas = document.getElementById("hogeCanvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d");

それかanyです。

const canvas:any = document.getElementById("hogeCanvas");
const ctx = canvas.getContext("2d");

型安全性を妥協するから、anyはあくまで最終手段にしましょう。

参考