如何简化TypeScript中if分支存在重复调用逻辑的代码？

简化思路 #

你这段代码的重复点在于三次Mutation.mutate调用只有source参数取值不同，其余参数、调用逻辑完全一致，只需要把source的取值逻辑单独抽离即可，不需要重复写整段调用逻辑。

简化写法1：三元表达式（适合分支少的场景） #

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

简化写法2：对象查找表（适合后续可能新增分支的场景，维护更方便） #

利用对象查找不到对应key时默认返回undefined的特性，刚好匹配你原有else分支的逻辑，写法更精简：

onClick={value => {
  const sourceMap = { valA: "sourceA", valB: "sourceB" }
  Mutation.mutate({ filter, source: sourceMap[value] }, { someRepetitiveCode })
}}

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