React项目多条件if判断触发TS2367错误如何优化为单条语句？

报错原因 #

你编写的(role !== UserRoleEnum.Admin || role !== UserRoleEnum.Employee)逻辑存在恒真问题：

• 当role为Admin时，role !== UserRoleEnum.Employee为真，整个或表达式返回真
• 当role为Employee时，role !== UserRoleEnum.Admin为真，整个或表达式返回真
• 当role为其他枚举值时，两个判断均为真，表达式返回真
  TypeScript识别到Admin和Employee是无重叠的枚举值，因此抛出TS2367错误提示。

修正方案 #

你描述的「用户不是Admin或不是Employee」逻辑本身恒成立，推测你实际需要的是用户既不是Admin也不是Employee的判断，对应单条if语句的简洁写法如下：

if (
  !([UserRoleEnum.Admin, UserRoleEnum.Employee].includes(role)) &&
  [ProjectState.online, ProjectState.onhold].includes(project.state)
) {
  // 业务逻辑
}

如果你偏好直接使用逻辑运算符实现，写法如下：

if (
  role !== UserRoleEnum.Admin && role !== UserRoleEnum.Employee &&
  (project.state === ProjectState.online || project.state === ProjectState.onhold)
) {
  // 业务逻辑
}

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