一个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动态生成实例(见代码中注释掉的部分),一种是直接生成实例。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具