TypeScript中如何避免no-nested-ternary嵌套三元运算符报错？

下面是几种在TypeScript中彻底解决嵌套三元运算符触发ESLint报错的实用方法，按推荐优先级排序：

1. 使用对象映射（最推荐） #

把条件判断转化为键值对映射，可读性和可维护性远高于嵌套三元，后续新增单位类型只需扩展对象即可：

// 定义映射关系
const unitValuesMap = {
  mm: valuesMm,
  km: valueskm,
  ls: valuesls // 默认匹配的单位
};

// 组件中直接使用
options={ unitValuesMap[units as keyof typeof unitValuesMap] || valuesls }

如果是多层级判断（比如先判断units，再判断slumpUnit），可以用嵌套对象映射：

const unitValuesMap = {
  mm: valuesMm,
  default: {
    cm: valuesCm,
    in: valuesIn
  }
};

options={ 
  units === "mm" 
    ? unitValuesMap.mm 
    : unitValuesMap.default[units.slumpUnit as keyof typeof unitValuesMap.default] 
}

2. 提取为独立函数 #

把判断逻辑封装到单独函数中，组件里只调用函数，彻底消除嵌套三元：

const getOptionsByUnit = (units: string, slumpUnit?: string) => {
  if (units === "mm") return valuesMm;
  if (units === "km") return valueskm;
  if (slumpUnit === "cm") return valuesCm;
  return valuesIn; // 默认值
};

// 组件中使用
options={ getOptionsByUnit(units, units.slumpUnit) }

函数写法逻辑清晰，调试更方便，复杂判断场景下优势明显。

3. 调整ESLint规则（仅团队允许时使用） #

如果场景确实需要少量嵌套三元且团队认可，可以修改ESLint配置允许特定层级的嵌套：

// .eslintrc.json
{
  "rules": {
    "no-nested-ternary": ["error", { "maxDepth": 1 }] // 允许1层嵌套（最多两个三元运算符）
  }
}

或者仅在特定代码块临时禁用（仅建议在逻辑极简单且无法重构时使用）：

options={
  // eslint-disable-next-line no-nested-ternary
  units === "mm" ? valuesMm : units === "km" ? valueskm : valuesls
}

为什么数组包裹的方法无效？ #

你尝试把内层三元放进数组，但数组内部依然存在嵌套三元运算符，ESLint会遍历代码中所有三元结构，所以还是会触发报错——这种写法只是改变了代码结构，并没有消除嵌套三元。

内容的提问来源于stack exchange，提问作者Tanu