如何精简TypeScript中的setSelectedSearchOptions长函数？

我编写了如下TypeScript函数setSelectedSearchOptions(optionLabel: string)：

setSelectedSearchOptions(optionLabel: string) { 
    //this.filterSection.reset(); 
    this.selectedOption = optionLabel; 
    this.selectedSearch = optionLabel; 
    if (optionLabel === 'Registratie') { 
        this.showDatePickerOne = true; 
        this.showDatePickerTwo = false; 
        this.showDatePickerThree = false; 
        this.buttonFilterDisabled = false; 
        this.startDate = undefined; 
        this.selectedValue = ''; 
        this.showDropdownChallenge = false; 
        this.showDropdownVcheqCode = false; 
        this.showDropdownMeasurement = false; 
        this.showDropdownIndicator = false; 
    } 
    if (optionLabel === 'Vcheq') { 
        this.showDatePickerOne = true; 
        this.showDatePickerTwo = false; 
        this.showDatePickerThree = false; 
        this.showDropdownMeasurement = false; 
        this.isButtonVisible = true; 
        this.startDate = undefined; 
        this.showDropdownVcheqCode = true; 
        this.showDropdownChallenge = false; 
        this.showDropdownQrCode = false; 
        this.showDropdownIndicator = false; 
    } 
    if (optionLabel === 'Doelen') { 
        this.showDatePickerOne = true; 
        this.showDatePickerTwo = false; 
        this.showDatePickerThree = false; 
        this.showDropdownMeasurement = false; 
        this.isButtonVisible = false; 
        this.startDate = undefined; 
        this.selectedValue = ','; 
        this.selectedValueOptie = ','; 
        this.selectedValueProgressie = ','; 
        this.showDropdownQrCode = true; 
        this.showDropdownChallenge = false; 
        this.showDropdownVcheqCode = false; 
        this.showDropdownIndicator = false; 
    } 
}

我尝试对该函数进行重构以简化代码，但不清楚具体实现方法，请问如何精简这个函数？

嘿，我来帮你梳理下怎么精简这个函数！你会发现原函数里有大量重复的代码——很多属性在每个分支里都被重复设置成相同的值，这正是我们优化的突破口。下面是两种逐步精简的思路，最终的代码会更简洁、更易维护：

步骤1：提取公共初始化逻辑 #

首先，把所有分支里重复的赋值操作抽出来，放在函数最开头统一设置。这样不用在每个if块里反复写相同的代码：

setSelectedSearchOptions(optionLabel: string) {
    // 公共基础设置：所有选项都需要的统一初始化
    this.selectedOption = optionLabel;
    this.selectedSearch = optionLabel;
    // 日期选择器的统一状态
    this.showDatePickerOne = true;
    this.showDatePickerTwo = false;
    this.showDatePickerThree = false;
    // 下拉框的默认隐藏状态
    this.showDropdownChallenge = false;
    this.showDropdownVcheqCode = false;
    this.showDropdownMeasurement = false;
    this.showDropdownIndicator = false;
    this.showDropdownQrCode = false;
    // 其他公共默认值
    this.startDate = undefined;
    this.buttonFilterDisabled = false;
    this.isButtonVisible = false;
    this.selectedValue = '';
    this.selectedValueOptie = '';
    this.selectedValueProgressie = '';

    // 接下来只处理每个选项独有的属性变化
    if (optionLabel === 'Registratie') {
        // 这里只剩和默认值不同的属性（原分支和默认一致，可根据实际情况调整）
        this.buttonFilterDisabled = false;
        this.selectedValue = '';
    } else if (optionLabel === 'Vcheq') {
        this.showDropdownVcheqCode = true;
        this.isButtonVisible = true;
    } else if (optionLabel === 'Doelen') {
        this.selectedValue = ',';
        this.selectedValueOptie = ',';
        this.selectedValueProgressie = ',';
        this.showDropdownQrCode = true;
    }
}

步骤2：用配置映射替代条件判断 #

如果想进一步精简，还可以用配置对象映射的方式，把每个选项对应的独特属性整理成键值对，这样以后新增选项时，只需要在配置里加一条记录，不用再加新的if分支，更符合开闭原则：

setSelectedSearchOptions(optionLabel: string) {
    // 1. 公共基础设置（和步骤1一致）
    this.selectedOption = optionLabel;
    this.selectedSearch = optionLabel;
    this.showDatePickerOne = true;
    this.showDatePickerTwo = false;
    this.showDatePickerThree = false;
    this.showDropdownChallenge = false;
    this.showDropdownVcheqCode = false;
    this.showDropdownMeasurement = false;
    this.showDropdownIndicator = false;
    this.showDropdownQrCode = false;
    this.startDate = undefined;
    this.buttonFilterDisabled = false;
    this.isButtonVisible = false;
    this.selectedValue = '';
    this.selectedValueOptie = '';
    this.selectedValueProgressie = '';

    // 2. 定义各选项的专属配置：键是选项标签，值是需要覆盖的属性
    const optionConfigs: Record<string, Partial<typeof this>> = {
        Registratie: {
            buttonFilterDisabled: false,
            selectedValue: ''
        },
        Vcheq: {
            showDropdownVcheqCode: true,
            isButtonVisible: true
        },
        Doelen: {
            selectedValue: ',',
            selectedValueOptie: ',',
            selectedValueProgressie: ',',
            showDropdownQrCode: true
        }
    };

    // 3. 应用当前选项的专属配置
    const activeConfig = optionConfigs[optionLabel];
    if (activeConfig) {
        Object.assign(this, activeConfig);
    }
}

优化后的好处 #

• 减少重复代码：公共逻辑只写一次，避免冗余；
• 可读性提升：每个选项的独特配置一目了然；
• 维护成本降低：新增选项时，只需要在optionConfigs里添加新的键值对，不用修改条件判断逻辑；
• 不易出错：避免在多个分支里漏写或写错属性设置。

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