React TypeScript：类型'null'不能分配给类型'CanvasRenderingContext2D'

Question

我似乎能够创建画布，但是当我获得上下文时

  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）。因此，在分配结果之前，您需要确保结果不为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 instanceof CanvasRenderingContext2D)) {
        throw new Error('Failed to get 2D context');
    }
    const ctx: CanvasRenderingContext2D = res;