reactjs - react typescript : Type 'null' is not assignable to type 'CanvasRenderingContext2D'

Question

我似乎能够创建 Canvas ，但是当我开始获取上下文时

  const resizeImage = async (maxSize: number) => {
    const image = originalImage;
    const id = positionId;
    const resizeCanvas = document.createElement('canvas');
    resizeCanvas.width = maxSize;
    resizeCanvas.height = maxSize;
    const ctx: CanvasRenderingContext2D = resizeCanvas.getContext('2D');
//         ^ Error
    ...

错误是

Type 'CanvasRenderingContext2D | ImageBitmapRenderingContext | WebGLRenderingContext | WebGL2RenderingContext | null' is not assignable to type 'CanvasRenderingContext2D'.
  Type 'null' is not assignable to type 'CanvasRenderingContext2D'.ts(2322)

Answer 1

该错误意味着 resizeCanvas.getContext('2D') 可以返回 null，但您将其分配给 CanvasRenderingContext2D 类型的变量(即不能为 null ).所以你需要在赋值之前确保结果不为空。另外我想你想确保它的类型是 CanvasRenderingContext2D 而不是 ImageBitmapRenderingContext 等。你可以这样做:

 const resizeImage = async (maxSize: number) => {
    const image = originalImage;
    const id = positionId;
    const resizeCanvas = document.createElement('canvas');
    resizeCanvas.width = maxSize;
    resizeCanvas.height = maxSize;
    const res = resizeCanvas.getContext('2D');
    if (!res || !(res instanceof CanvasRenderingContext2D)) {
        throw new Error('Failed to get 2D context');
    }
    const ctx: CanvasRenderingContext2D = res;