Angular12出现delete操作数需可选、对象可能为undefined报错如何解决

报错根因说明 #

1. Object is possibly 'undefined'
   你之前把非空断言!加在this.alerts后面完全没用，你初始化时已经给alerts赋值为[]，它本身不可能是空。报错的根源是Array.find()方法：如果没有匹配到对应元素，find会返回undefined，你直接访问返回值的.fade属性就会触发严格空值检查报错。

2. The operand of a 'delete' operator must be optional
   你当前定义的Alert类所有属性都是必选类型，TypeScript不允许直接删除必选属性，触发这个报错说明你的业务代码里存在类似delete alert.xxx的操作。

解决方法 #

1. 修复空值报错

两种方案可选：

• 「安全优先，推荐」先判断find的返回结果再操作：

const targetAlert = this.alerts.find(x => x === alert);
if (targetAlert) {
  targetAlert.fade = true;
}

• 「确定一定能匹配到对应alert时可用」把非空断言加在find返回值后面：

this.alerts.find(x => x === alert)!.fade = true;

2. 修复delete操作报错

也是两种方案：

• 「确实需要删除属性时用」把Alert类中要删除的属性改为可选类型，比如需要删除fade属性就修改定义：

// alert.model.ts中修改
public fade?: boolean;

• 「更推荐，无需修改类型定义」不要用delete操作，直接给属性赋值为对应类型的默认值即可：

// 不要写 delete targetAlert.fade
targetAlert.fade = false;
// 如果需要清空属性也可以赋值为undefined：targetAlert.fade = undefined;

额外注意

你当前Alert类的所有属性都加了非空断言!，相当于你向TypeScript保证这些属性一定会被赋值，实例化Alert的时候要确保传入了所有必填属性，否则运行时可能会出现异常。

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