Angular中如何优化Enum类型的*ngIf多值判断？

问题场景 #

你的类型定义如下：

type = MyType; // 枚举类型
myObj: MyObj | undefined = undefined;
myObj.type: MyType;

原本在模板里用的判断逻辑是：

*ngIf="type.first === myObj.type || type.second === myObj.type"

想改成更简洁的数组includes写法：

*ngIf="[type.first, type.second].includes(myObj?.type)"

但遇到类型错误：

Argument of type 'MyType | undefined' is not assignable to parameter of type 'MyType'.

你目前用$any(myObj?.type)临时绕过了检查，下面给你几种不用新建方法的严谨解决方式：

解决方案 #

• 非空断言运算符：如果你能保证执行到这个判断时，myObj一定已经被赋值（不会是undefined），可以用!告诉TS编译器这里的值非空：

  *ngIf="[type.first, type.second].includes(myObj?.type!)"
  

  注意：如果实际运行时myObj还是undefined，会触发运行时错误，所以要确保前置条件成立。

• 空值合并运算符补全类型：用??给myObj?.type一个默认的枚举值（选数组里没有的或者任意枚举值都可以，因为当myObj?.type是undefined时，默认值不在数组里的话includes会返回false，和原逻辑一致）：

  *ngIf="[type.first, type.second].includes(myObj?.type ?? type.first)"
  

  这样参数类型就统一为MyType，不会再报错。

• 先判断myObj存在：在includes前先通过逻辑与确保myObj不为undefined，后面直接用myObj.type就不会有类型问题：

  *ngIf="myObj && [type.first, type.second].includes(myObj.type)"
  

  这种方式最安全，完全符合原逻辑，可读性也很好。

对比临时方案 #

你用的$any是强制绕过TS类型检查，虽然能解决问题，但不够严谨，上面的方案更符合类型安全原则，避免潜在的运行时问题。

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