TypeScript：使用空值合并运算符来防止错误

作为首席技术官，我的目标是提升产品质量。我们每周发现的漏洞数量就是我们得分的衡量标准。今天，我将和大家分享一个典型的漏洞，这个漏洞不止一个人遇到过。

假设你想用之前保存在 localStorage 中的值初始化 React 应用的音频音量，0.5如果没有保存任何值，则使用默认值。你可以这样写：

反面例子

function initializeAudio() {
  let volume = localStorage.volume || 0.5;

  // ...
}

问题在于，如果用户已保存音量值，则该0值会被解释为假值，你的代码将使用默认值而不是正确值。一些开发者喜欢使用 `||` 的简洁性，而不是显式地使用 `if` 语句。而且他们不止一次地证明自己的选择是正确的，因为 0 确实不是一个合理的值。但作为一种标准做法，它太危险了。例如，其他人可能会看到这段代码，并认为 `||` 在任何情况下都是良好的编码标准，这最终会导致 bug。

TypeScript 3.7 提供了一个最佳方案：现在可以使用空值合并运算符来防止这种错误行为，并安全地编写类似这样的代码：

好例子

function initializeAudio() {
  let volume = localStorage.volume ?? 0.5;

  // ...
}

最终结果将汇总在：

function initializeAudio() {
    var _a;
    var volume = (_a = localStorage.volume) !== null && _a !== void 0 ? _a : 0.5;
    // ...
}

为了确保团队成员使用它，您可以使用ESLint 的prefer-nullish-coalescing规则。您还可以将其与 JavaScript 和这个Babel 插件一起使用。如果您想深入了解此运算符，可以访问这里。

我希望这篇文章能帮助你的团队避免这类错误。想了解更多实用的代码质量技巧，请在Twitter上关注我。

你呢？你有什么秘诀来防止应用程序中出现漏洞？