在 Web 开发领域，我们经常面临乍一看似乎很简单的挑战，但很快就会变成复杂的难题。最近，我在 Angular 项目中经历了一次有趣的经历，它提醒我在 TypeScript 中评估布尔条件时精确度的重要性。我想与您分享这个教训，希望它能帮助您避免同样的陷阱。

问题的背景

初步情况

在我的 Angular 项目中，我遇到了涉及四个布尔变量的情况。在这四个中，两个依赖于通过可观察的来自后端的异步数据。目标很简单：只有当这两个特定变量为假时，条件才应为真。

最初的方法及其局限性

最初，我选择了一种对我来说似乎合乎逻辑且简洁的方法：

if (terrainPret && arbitreArrive && 
    !equipeLocaleAbsente && !equipeVisiteuseAbsente) {
  // Commencer le match
}

这种方法看起来很优雅：使用感叹号（！）是为了确保异步变量为 false。然而，我很快发现这个方法隐藏着一个微妙的陷阱。

布尔求值陷阱

启示录

当我意识到我的代码没有按预期运行时，问题就出现了。经过进一步调查，我意识到我忽略了 TypeScript 中布尔求值的一个关键方面。

技术说明

在 TypeScript 中，有几个值被认为是“falsy”，也就是说，它们在布尔上下文中被评估为 false。这些值包括：

• 错误的
• 0
• ""（空字符串）
• 无效的
• 不明确的
• 没有

就我而言，异步变量在从后端接收值之前可能是未定义的。因此，例如，条件 !equipeLocaleAbsente 不仅在变量为 false 时为 true，而且在变量未定义时也为 true。

解决方案：明确

纠正的方法

为了解决这个问题，我必须更明确地表达我的情况：

if (terrainPret && arbitreArrive && 
    equipeLocaleAbsente === false && equipeVisiteuseAbsente === false) {
  // Commencer le match
}

这种方法确保异步变量明确为假，而不仅仅是“假”值。

精度的好处

该解决方案有几个优点：

1. 它消除了条件评估中的歧义。
2. 它使代码更具可读性并且其意图更明确。
3. 它可以防止与“虚假”值评估相关的意外行为。

结论

这段经历提醒我代码中精确性和清晰度的重要性，尤其是在处理异步操作和布尔求值时。它还强调需要了解我们使用的语言的细微差别。