投稿日：
2019年10月3日
最終更新日：
【Canvas】Property ‘toDataURL’ does not exist on type ‘HTMLElement’.の原因と対処方法【TypeScript】
YouTubeも見てね♪
ねこじゃすり
猫を魅了する魔法の装備品！
【最新機種】GoPro hero11 Black
created by Rinker
¥61,300
(2025/01/05 20:59:47時点 楽天市場調べ-詳細)
最新機種でVlogの思い出を撮影しよう！
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
モンスターエナジー 355ml×24本 [エナジードリンク]
脳を活性化させるにはこれ！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
サンディスク 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のエラーです。
お困りの方は是非試してみてください♪