Web 開発の世界では、一見単純そうに見えても、すぐに複雑なパズルに変わる可能性のある課題に直面することがよくあります。最近、Angular プロジェクト中に、TypeScript でブール条件を評価する際の精度の重要性を思い出させる興味深い経験をしました。皆さんが同じ落とし穴を避けるのに役立つことを願って、この教訓を皆さんと共有したいと思います。

問題の背景

初期の状況

私の Angular プロジェクトでは、4 つのブール変数が関係する条件に直面しました。これら 4 つのうち 2 つは、オブザーバブルを介してバックエンドから送信される非同期データに依存していました。目標は単純でした。条件は、これら 2 つの特定の変数が false の場合にのみ true になるはずです。

初期のアプローチとその限界

当初、私は論理的で簡潔だと思われるアプローチを選択しました:

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

このアプローチは洗練されているように思えます。感嘆符 (!) を使用すると、非同期変数が false であることが保証されます。しかし、この方法には微妙な罠が隠されていることがすぐにわかりました。

ブール評価のトラップ

啓示

コードが期待どおりに動作していないことに気付いたときに問題が発生しました。さらに調査した結果、TypeScript のブール評価の重要な側面を見落としていたことがわかりました。

技術的な説明

TypeScript では、いくつかの値が「falsy」とみなされます。つまり、ブール値のコンテキストでは false として評価されます。これらの値には次のものが含まれます:

• 間違い
• 0
• "" (空の文字列)
• ヌル
• 未定義
• いいえ

私の場合、バックエンドから値を受け取る前に非同期変数が未定義になる可能性がありました。したがって、たとえば条件 !equipeLocaleAbsente は、変数が false の場合だけでなく、未定義の場合にも true でした。

解決策: 明示的にする

修正されたアプローチ

この問題を解決するには、条件をより明確にする必要がありました:

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

このアプローチでは、非同期変数が単に「偽」の値ではなく、明確に偽であることが保証されます。

精度の利点

このソリューションにはいくつかの利点があります:

1. 条件の評価における曖昧さを排除します。
2. これにより、コードがより読みやすくなり、その意図がより明確になります。
3. 「誤った」値の評価に関連する予期しない動作を防ぎます。

結論

この経験により、特に非同期操作やブール評価を扱う場合、コードの精度と明確さの重要性を思い出しました。また、私たちが使用する言語のニュアンスを理解する必要性も強調しています。