Angular 14中如何解决Object is possibly 'undefined'错误？

Angular 14默认启用了严格类型检查模式，而HttpEventType.UploadProgress类型的total属性是可选的（可能为undefined），因此TypeScript会抛出该错误。以下是几种实用的解决方法：

方案1：安全处理total为undefined的情况（推荐） #

使用空值合并操作符??，在total不存在时用loaded作为分母，避免除以0的同时保证进度计算合理：

if (event.type === HttpEventType.UploadProgress) {
  const total = event.total ?? event.loaded;
  this.progress = Math.round(100 * event.loaded / total);
}

当无法获取文件总大小时，进度会直接显示为100%，符合上传完成的实际场景。

方案2：非空断言（仅确定total必存在时使用） #

如果你能确保后端一定会返回Content-Length响应头（即event.total永远有值），可以用非空断言符!告诉TypeScript忽略undefined检查：

if (event.type === HttpEventType.UploadProgress) {
  this.progress = Math.round(100 * event.loaded / event.total!);
}

注意：如果实际场景中total可能为undefined，该写法会导致运行时错误，需谨慎使用。

方案3：显式条件分支处理 #

通过条件判断明确区分total存在/不存在的场景，做更精细化的处理：

if (event.type === HttpEventType.UploadProgress) {
  if (event.total !== undefined) {
    this.progress = Math.round(100 * event.loaded / event.total);
  } else {
    // 自定义处理逻辑，比如标记进度为100%或显示"无法获取进度"
    this.progress = 100;
  }
}

补充说明 #

旧版本Angular未启用严格类型检查，或搭配的TypeScript版本较低，因此不会对可选属性做严格校验，这也是旧代码能正常运行的原因。

内容的提问来源于stack exchange，提问作者abdul wahid