如何使用TypeScript简化JavaScript的if-else逻辑？含代码优化请求

嘿，这问题问得好！咱们来看看怎么用TypeScript的简化技巧改写你这段条件判断代码，让它更简洁清爽，同时完全保留原逻辑：

方式1：利用布尔表达式直接赋值 + 精简分支 #

原代码里isCustomerFunctionSelected的取值完全依赖functionValue是否等于Customer，我们可以直接把这个布尔判断结果赋值给变量，省去多余的if分支：

this.reset = false;
this.isCustomerFunctionSelected = this.functionValue === 'Customer';

if (this.functionValue === 'Dealer') {
  this.selectedCustomerValue = null;
} else if (this.functionValue !== 'Customer') {
  this.reset = true;
}

这里核心是把this.functionValue === 'Customer'这个布尔表达式直接赋值给isCustomerFunctionSelected，避免了冗余的条件判断，逻辑一眼就能看懂。

方式2：对象映射（最适合枚举类条件判断） #

如果functionValue的可能取值是固定的（比如只有Customer、Dealer和其他值），用对象映射的方式会更优雅，后续扩展新值也更方便：

// 定义每个取值对应的处理逻辑
const valueHandlers = {
  Customer: () => {
    this.isCustomerFunctionSelected = true;
    this.reset = false;
    // 原逻辑中Customer分支不修改selectedCustomerValue，所以这里保持原状
  },
  Dealer: () => {
    this.isCustomerFunctionSelected = false;
    this.selectedCustomerValue = null;
    this.reset = false;
  },
  default: () => {
    this.reset = true;
    // 原逻辑中默认分支不修改另外两个变量，保持原状即可
  }
};

// 执行对应逻辑，类型断言确保TypeScript识别键的合法性
(valueHandlers[this.functionValue as keyof typeof valueHandlers] || valueHandlers.default)();

这种方式把每个分支的逻辑封装成独立函数，结构清晰，新增取值时只需要在valueHandlers里加新的键值对就行，TypeScript还能帮你检查键名的拼写错误。

方式3：变量前置判断 + 批量赋值 #

把条件判断提前转换成布尔变量，再一次性给所有目标变量赋值，逻辑更紧凑：

const isCustomer = this.functionValue === 'Customer';
const isDealer = this.functionValue === 'Dealer';

this.reset = !isCustomer && !isDealer;
this.isCustomerFunctionSelected = isCustomer;
this.selectedCustomerValue = isDealer ? null : this.selectedCustomerValue;

这里用isCustomer和isDealer两个变量把条件逻辑抽离出来，后续的赋值操作完全基于这两个变量，可读性拉满，代码也非常简洁。

额外小技巧：给functionValue加类型约束 #

如果functionValue的可能取值是固定的，建议先定义类型，让TypeScript帮你做类型检查，避免拼写错误：

// 定义允许的取值类型
type FunctionValueType = 'Customer' | 'Dealer';

// 给functionValue指定类型（如果还有其他未知值，就加个| string）
this.functionValue: FunctionValueType | string;

这样在编写代码时，TypeScript会自动提示合法的取值，减少低级错误。

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