投稿日：
2019年10月3日
最終更新日：
【Canvas】Property ‘toDataURL’ does not exist on type ‘HTMLElement’.の原因と対処方法【TypeScript】
YouTubeも見てね♪
ねこじゃすり
猫を魅了する魔法の装備品！
Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK
メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！
BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール
もう一人の僕を呼び覚ませ！！
MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド
Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード！
CanvasのtoDataUrlでコンパイルエラー
TypeScriptを使ったプロジェクトの中でcanvasのtoDataUrlメソッドやtoDataURLメソッドを使用すると、以下のようなエラーが発生する事があると思います。
|
1
2
3
4
|
210:31 Property 'getContext' does not exist on type 'HTMLElement'.
208 | qrCodeImg.onload = () => {
209 | const canvas = document.getElementById("canvas");
> 210 | const ctx: any = canvas.getContext("2d");
|
|
1
2
3
4
|
212:32 Object is possibly 'null'.
210 | const ctx: any = canvas.getContext("2d");
211 | ctx.drawImage(qrCodeImg, 0, 0, size, size);
> 212 | this.qrCodeOnlyPngData = canvas.toDataURL("image/png");
|
このままだとコンパイルエラーのため、CIで止まってしまうので解決する必要があります。
原因
これは、canvas要素を取得した際の戻り値の型を明示的に指定する必要があります。
|
1 |
const canvas = document.getElementById("canvas"); // これだとダメ
|
解決方法
解決方法は2種類あります。
asを使って型を定義
まず一つ目はasを使ってType assertions (キャスト)を行う方法です。
|
1 |
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
|
キャストを行う
二つ目はジェネリックを使う方法です。
|
1 |
const canvas = <HTMLCanvasElement>document.getElementById("canvas");
|
型定義だけではダメ
変数を定義する際に型を指定すれば良いのでは？とTypeScript初心者の筆者は思いましたが、それではダメでした。
|
1 |
const canvas: HTMLCanvasElement = document.getElementById("canvas");
|
その場合はasかcastと併用しなければいけないので、直接的な解決策ではなさそうですね。
|
1 |
const canvas: HTMLCanvasElement = document.getElementById( "canvas") as HTMLCanvasElement;
|
終わりに
以上のように、ややはまりがちなTypeScriptのエラーです。
お困りの方は是非試してみてください♪