无论我尝试什么，打字稿对象都可能未定义答案

【问题标题】：typescript object possibly undefined no matter what I tried无论我尝试什么，打字稿对象都可能未定义
【发布时间】：2021-10-14 01:43:13
【问题描述】：

我正在使用画布来捕捉裁剪后的图像。这是函数

export const getCroppedImg = (
  image: HTMLImageElement,
  crop: Crop,
  fileName: string
): Promise<Blob> => {
  let canvas: HTMLCanvasElement;
  let ctx: CanvasRenderingContext2D;
  // I m using next.js
  if (typeof window !== "undefined") {
    if (crop) {
      canvas = document.createElement("canvas");
      const scaleX = image.naturalWidth / image.width;
      const scaleY = image.naturalHeight / image.height;
      canvas.width  =crop.width ? crop.width * scaleX : undefined;
      canvas.height =crop.height &&  crop.height * scaleY;
      ctx = canvas.getContext("2d") as CanvasRenderingContext2D;

      ctx.drawImage(
        image,
        crop.x * scaleX,
        crop.y * scaleY,
        crop.width * scaleX,
        crop.height * scaleY,
        0,
        0,
        crop.width * scaleX,
        crop.height * scaleY
      );
    }
  }

crop.x, crop.y, crop.width crop.height 导致 ts 错误“对象可能是‘未定义’”。我用if(crop) 包裹了整个逻辑，我尝试了两种不同的方法

      canvas.width  =crop.width ? crop.width * scaleX : undefined;
      canvas.height =crop.height &&  crop.height * scaleY;

“canvas.width”和“canvas.height”警告

"Type 'number | undefined' is not assignable to type 'number'.
  Type 'undefined' is not assignable to type 'number'.ts(2322)

这是作物：

import { Crop } from "react-image-crop";

interface Crop {
        aspect?: number;
        x?: number;
        y?: number;
        width?: number;
        height?: number;
        unit?: 'px' | '%';
    }

【问题讨论】：

标签： typescript canvas next.js

【解决方案1】：

在检查它们之前，将现有的crop.width 和crop.height 取出到它们自己的变量中。

您也不能将undefined 分配给canvas.width，或使用&& 有条件地为高度分配一个值 - 请改用if。

如果crop 的任何属性未定义（您将无法绘制画布或正确使用drawImage），则执行任何逻辑似乎都没有意义，因此抛出错误或在这种情况下提前返回。

您也没有返回 Promise，因此请删除 Promise<Blob> 类型。

export const getCroppedImg = (
    image: HTMLImageElement,
    crop: Crop,
) => {
    const { width, height, x, y } = crop;
    if (typeof window === "undefined" || !width || !height || !x || !y) {
        // Proceeding further would make no sense;
        // can't adjust canvas, or draw the image
        // return here, or throw an error or something
        throw new Error('Bad argument');
    }
    const canvas = document.createElement("canvas");
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;

    canvas.width = width * scaleX;
    canvas.height = height * scaleY;
    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;

    ctx.drawImage(
        image,
        x * scaleX,
        y * scaleY,
        width * scaleX,
        height * scaleY,
        0,
        0,
        width * scaleX,
        height * scaleY
    );
}

【讨论】：

成功了。谢谢你。又一个头痛消失了

【解决方案2】：

您在这一行中说 canvas.width 可能是未定义的：

canvas.width  =crop.width ? crop.width * scaleX : undefined;

所以你可以重新设计逻辑，这样就不是这样了。话虽如此，有时您会比 TypeScript 编译器了解更多，因此如果您知道在需要访问该值时永远不会未定义，则可以断言该值。

canvas.width as number

【讨论】：

【解决方案3】：

为什么在 Crop 界面使用可选字段？

你试过了吗？：

interface Crop {
    aspect: number;
    x: number;
    y: number;
    width: number;
    height: number;
    unit: 'px' | '%';
}

【讨论】：

我没有写这个，我是从包中导入的。我应该提到这一点