一个TypeScript改造小实例
公司项目留下的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动态生成实例(见代码中注释掉的部分),一种是直接生成实例。