canvasの「Property 'toDataURL' does not exist」エラーの対処

CanvasのtoDataUrlでコンパイルエラー

TypeScriptを使ったプロジェクトの中でcanvasのtoDataUrlメソッドやtoDataURLメソッドを使用すると、以下のようなエラーが発生する事があると思います。

エラーログ

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");

エラーログ

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要素を取得した際の戻り値の型を明示的に指定する必要があります。

ダメな例

const canvas = document.getElementById("canvas"); // これだとダメ

解決方法

解決方法は2種類あります。

asを使って型を定義

まず一つ目はasを使ってType assertions (キャスト)を行う方法です。

[adsense-responsive]

asを利用

const canvas = document.getElementById("canvas") as HTMLCanvasElement;

キャストを行う

二つ目はジェネリックを使う方法です。

キャストを行う

const canvas = <HTMLCanvasElement>document.getElementById("canvas");

型定義だけではダメ

変数を定義する際に型を指定すれば良いのでは？とTypeScript初心者の筆者は思いましたが、それではダメでした。

ダメな例

const canvas: HTMLCanvasElement = document.getElementById("canvas");

その場合はasかcastと併用しなければいけないので、直接的な解決策ではなさそうですね。

良い例

const canvas: HTMLCanvasElement = document.getElementById( "canvas") as HTMLCanvasElement;

終わりに

以上のように、ややはまりがちなTypeScriptのエラーです。

お困りの方は是非試してみてください♪