一个TypeScript改造小实例

Posted 2021-06-16 老胡Andy

公司项目留下的JS代码，其中有一大段的switch/case (160行)，正巧给组里的同事介绍TypeScript，就顺便拿这段switch/case做了个改造的例子。
原始代码(仅为示例)

var aHelper = {
  init: function() {...}
}

var bHelper = {
  init: function() {...}
}

var cHelper = {
  init: function() {...}
}

var Manager = {
    Step1: 0,
    Step2: 1,
    Step3: 2
    
    initStep: function(stepNumber) {
       case this.Step1: 
            aHelper.init();
            bHelper.init();
            cHelper.init();
            break;
        case this.Step2:
            aHelper.init();
            bHelper.init();
            break;
        case this.Step3:
            bHelper.init();
            cHelper.init();
            break;
   }
}

示例中的switch/case经过简化，仅仅为了说明问题。TypeScript改造的目的是为了去除这些繁琐的switch/case，代码如下：

interface IHelper {
    init: () => void;
}

class BaseHelper {
    color: string;
}

class ColorHelper extends BaseHelper implements IHelper {
    init() {
        console.log(\'init from ColorHelper\');
    }
}

class LensHelper extends BaseHelper implements IHelper {
    init() {
        console.log(\'init from LensHelper\');
    }
}

class RxHelper extends BaseHelper implements IHelper {
    init() {
        console.log(\'init from LensHelper\');
    }
}

enum StepType {
    Step1,
    Step2,
    Step3  
}

type StepTypeMapping = {
    [U in StepType]? : IHelper[]
}

// type StepTypeMapping = {
//     [U in StepType]? : string[]
// }

// const config: StepTypeMapping = {
//     [StepType.Step1] : ["ColorHelper", "LensHelper", "RxHelper" ],
//     [StepType.Step2] : ["ColorHelper", "LensHelper" ],
//     [StepType.Step3] : ["LensHelper", "RxHelper" ],
// }

const config: StepTypeMapping = {
    [StepType.Step1] : [new ColorHelper(), new LensHelper(), new RxHelper() ],
    [StepType.Step2] : [new ColorHelper(), new RxHelper() ],
    [StepType.Step3] : [new ColorHelper() ],
}

class StepManager {
    setStep(stepType: number) {
        config[stepType].forEach( helper => {
            helper.init();
            //(eval("ColorHelper") as IHelper).init();
        } )
    }
}

const manager = new StepManager();
manager.setStep(StepType.Step1);

能想到的Config对象的实现方式有两种，一种是通过String+eval动态生成实例(见代码中注释掉的部分)，一种是直接生成实例。