【TypeScript】TS2339エラーの原因と対処方法を解説！

いずみ

こんな悩みを解決できる記事を書きました！

僕は現役フリーランスエンジニア（歴8年）で、資格は13個保有しています。

TS2339エラーは型を明示していない場合に発生するエラーです。

詳しくは後ほど解説しますが、対処方法は非常に簡単なのでご安心ください。

本記事を読めば、TS2339エラーの原因と対処方法が理解できるので早速見ていきましょう！

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいね！

TS2339エラーとは

TS2339エラーは型を明示していない場合に発生するエラーです。

const unkoCanvas = document.getElementById("unkoCanvas");
const unkoContext = unkoCanvas.getContext("2d");

↑のようなコードを実行すると…

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

TS2339エラーが発生します。

unkoCanvasがHTMLElementと解釈されたためgetContextが存在しないと言われています。

TS2339エラーの原因

TS2339エラーは適切な型定義をしていない場合に発生します。

先ほどの例だと、unkoCanvasがHTMLCanvasElementではなくHTMLElementと解釈されたのがエラーの原因です。

TS2339エラーの対処方法

TS2339エラーは適切な型定義することで解決します。

いずみ

対処方法は主に3つあります。

1. 型アサーションを使う

const unkoCanvas = <HTMLCanvasElement>document.getElementById("unkoCanvas");
const unkoContext = unkoCanvas.getContext("2d");

型アサーション<HTMLCanvasElement>を定義します。

2. asで明示する

const unkoCanvas = document.getElementById("unkoCanvas") as HTMLCanvasElement;
const unkoContext = unkoCanvas.getContext("2d");

asでHTMLCanvasElementを明示します。

3. anyを付与する

const unkoCanvas:any = document.getElementById("unkoCanvas");
const unkoContext = unkoCanvas.getContext("2d");

anyを付与します。

いずみ

anyは型がないのと同じなのでおすすめしません。

よくある質問

まとめ

今回は、TS2339エラーの原因と対処方法について解説しました。

以下が本記事のまとめになります。

まとめ

• TS2339エラーは型を明示していない場合に発生するエラー。
• TS2339エラーの原因は適切な型定義をしていないこと。
• TS2339エラーの対処方法は型アサーションやasで明示すること。

まとめ♪

いずみ

最後までお読みいただき、ありがとうございました！