在 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. 它可以防止與「虛假」值評估相關的意外行為。

結論

這段經歷提醒我程式碼中精確性和清晰度的重要性，尤其是在處理非同步操作和布林求值時。它還強調需要了解我們使用的語言的細微差別。