最近,用 angular 前端框架为应用登录新增图形验证码认证,由于没有现成的插件,于是便使用canvas+js操作,也是可以正常使用,但是在编译阶段却有个报错:
ERROR in src/app/login/login.component.ts(84,19): error TS2339: Property 'getContext' does not exist on type 'HTMLElement'.
虽然报错,但是确实可以正常执行,很是奇怪。报错的代码为:
let c = document.getElementById("myCanvas") ; let ctx = c.getContext("2d");
查看源码是有 getContext() 这个方法的。后面想是不是类型导致的呢,于是,使用类型断言(不影响代码运行,只是在编译阶段起作用)修改代码入下:
let c = document.getElementById("myCanvas") as HTMLCanvasElement; let ctx = c.getContext("2d");
编译正常通过。后面了解,还有另外一种断言方式:
let c = <HTMLCanvasElement> document.getElementById("myCanvas") ; let ctx = c.getContext("2d");
以上均可编译通过,因为 getContext() 是在 HTMLCanvasElement 中定义的,因此,我们需要指定类型。
以上