TypeScript ESLint 规则：限制模板字符串中的可选链式操作

在 TypeScript 开发中，模板字符串是我们经常使用的特性之一。然而，当我们在模板字符串中使用可选链式操作符(?.)时，可能会遇到一些意料之外的行为。本文将深入探讨这个问题以及如何使用 TypeScript ESLint 的 restrict-template-expressions 规则来避免这类问题。

可选链式操作在模板字符串中的问题

考虑以下代码示例：

const obj = { prop: "value" };
console.log(`属性值为：${obj?.prop}`);

这段代码看起来似乎没有问题，但实际上存在一个潜在陷阱。当 obj 为 null 或 undefined 时，表达式 obj?.prop 会返回 undefined，而模板字符串会将其转换为字符串 "undefined"。这往往不是开发者期望的结果。

解决方案：restrict-template-expressions 规则

TypeScript ESLint 提供的 restrict-template-expressions 规则可以帮助我们避免这类问题。该规则有一个配置选项 allowNullish，当设置为 false 时，会禁止在模板字符串中使用可能产生 null 或 undefined 的表达式。

配置示例

在 .eslintrc 配置文件中，可以这样设置：

{
  "rules": {
    "@typescript-eslint/restrict-template-expressions": [
      "error",
      {
        "allowNullish": false
      }
    ]
  }
}

效果对比

不符合规则的代码：

`${obj?.prop}`  // 错误：使用了可选链式操作符

符合规则的代码：

`${obj.prop}`  // 正确：直接访问属性

为什么推荐这种限制

1. 明确性：强制开发者显式处理可能的 null/undefined 情况，提高代码可读性
2. 减少错误：避免模板字符串中意外出现 "undefined" 字符串
3. 代码质量：促使开发者思考边界条件，编写更健壮的代码

替代方案

如果确实需要在模板字符串中处理可能的 null/undefined 情况，推荐以下更明确的方式：

// 使用默认值
`${obj?.prop ?? "默认值"}`

// 或使用条件判断
`${obj ? obj.prop : "默认值"}`

这些方式都明确表达了开发者的意图，比单纯使用可选链式操作符更加清晰。

总结

通过合理配置 restrict-template-expressions 规则，我们可以避免模板字符串中因可选链式操作符导致的意外行为。这种限制虽然看似严格，但实际上能够帮助开发者编写出更加健壮和易于维护的代码。在 TypeScript 项目中，推荐将 allowNullish 设置为 false 以获得更好的代码质量保障。