Typescript 如何精简包含重复if判断表达式的冗余代码

方案1：映射表实现（推荐，易扩展） #

通过预定义value到source的映射关系，完全消除冗余分支判断，后续新增枚举值只需要更新映射表即可：

onClick={value => {
  // 集中管理value和source的对应关系，新增规则仅需修改此处
  const sourceMap = {
    valA: "sourceA",
    valB: "sourceB"
  }
  Mutation.mutate(
    { filter, source: sourceMap[value] }, 
    { someRepetitiveCode }
  )
}}

TypeScript项目可以给映射表加上类型约束进一步提升安全性：

type ValueType = "valA" | "valB" | string;
const sourceMap: Record<ValueType, string | undefined> = {
  valA: "sourceA",
  valB: "sourceB"
}

方案2：三元运算符实现（轻量场景适用） #

如果只有2-3个固定分支、不需要后续扩展，用三元运算符写法更简洁：

onClick={value => {
  const source = value === "valA" ? "sourceA" : value === "valB" ? "sourceB" : undefined;
  Mutation.mutate({ filter, source }, { someRepetitiveCode });
}}

优化收益 #

• 彻底消除重复的Mutation.mutate调用和公共参数，重复代码量大幅降低
• 映射关系集中管理，后续维护不需要修改核心调用逻辑，改出bug的概率更低
• 逻辑层级更浅，可读性更高

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