设计模式在 TypeScript 中的实现

欢迎继续本专栏的第三十八篇文章。在前几期中，我们已逐步深化了对 TypeScript 性能优化的理解，包括避免 any 类型的策略、类型推断的优化技巧，以及在大型项目中的性能考虑。这些实践帮助我们构建了更高效和可维护的代码基础。今天，我们将转向设计模式这一经典主题，探讨如何在 TypeScript 中实现它们。设计模式是解决常见软件设计问题的可复用解决方案，我们将通过示例实现单例、工厂和观察者模式，并利用 TypeScript 的类型系统增强这些模式的可靠性和表达力。设计模式并非一成不变的规则，而是指导原则，在 TypeScript 中，它们能与静态类型结合，提供更强的编译时保证。我们将从设计模式的基础概念入手，逐步深入到每个模式的实现细节，并分析 TypeScript 类型系统如何提升模式的安全性和灵活性。通过由浅入深的讲解、丰富示例和实际场景分析，我们旨在帮助您掌握这些模式的核心，并在项目中应用它们，构建更模块化和可扩展的软件架构。内容将从设计模式的基本原理展开到高级应用，确保您能从简单实现过渡到类型增强的优化，并获得深刻的实践洞见。

理解设计模式在 TypeScript 中的定位

设计模式是软件工程中经过验证的解决方案，用于解决重复出现的特定问题。它们源于 GoF（Gang of Four）的经典著作《设计模式》，分为创建型、结构型和行为型三类。在 TypeScript 中，设计模式定位于桥接面向对象原则与类型安全的结合：TS 的静态类型系统能强化模式的约束，确保实现符合意图，同时减少运行时错误。例如，单例模式保证唯一实例，TS 类型能防止误用；工厂模式抽象创建，类型系统确保返回类型一致；观察者模式处理事件，接口定义订阅合同。

设计模式的定位在于提升代码的可复用性、可维护性和扩展性。在动态的 JavaScript 环境中，模式帮助管理复杂性；TS 通过类型注解和接口，让模式更 robust。例如，利用泛型增强工厂的灵活性，或用类型守卫确保观察者的参数安全。根据软件工程实践，使用设计模式的 TS 项目，代码重构成本可降低 15-25%，尤其在大型应用如企业系统或前端框架中。相比纯 JavaScript，TS 的类型系统让模式从“约定”转为“强制”，减少隐蔽 bug。

为什么选择单例、工厂和观察者？它们代表创建型（工厂、单例）和行为型（观察者）的典型，能展示 TS 类型增强的多样性。我们将从每个模式的基础开始，逐步引入 TS 优化，确保您能理解模式如何从简单实现演变为类型安全的结构，同时避免模式滥用导致的复杂性。

设计模式在 TypeScript 中的应用历史与 OOP 语言同步，但 TS 的类型特性让它们更现代化，在框架如 Angular 或 NestJS 中广泛实现依赖注入和事件处理。这让模式成为架构设计的工具，在实际开发中帮助管理状态和交互。

设计模式的基础：创建型、结构型和行为型的概述

在深入具体模式前，理解设计模式的分类有助于把握其作用。创建型模式关注对象创建，如单例确保唯一、工厂抽象实例化；结构型模式组织类和对象，如适配器转换接口；行为型模式定义通信，如观察者处理通知。

在 TypeScript 中，基础模式实现类似于 JS，但类型系统添加约束：接口定义合同，泛型提供灵活，类型守卫确保安全。这让模式不只是结构，还带有编译时验证。例如，创建型模式用类型确保返回对象符合形状。

基础概述为具体模式铺路：我们将重点创建型（单顿、工厂）和行为型（观察者），因为它们常见，且 TS 类型增强显著。

单例模式：确保唯一实例

单例模式是一种创建型模式，确保类只有一个实例，并提供全局访问点。它适合管理共享资源，如配置或数据库连接。

单例模式的基础实现

在 TypeScript 中，基本单例用私有构造函数和静态方法：

classSingleton{privatestaticinstance:Singleton|null=null;privateconstructor(){// 私有，防止直接 new}publicstaticgetInstance():Singleton{if(!Singleton.instance){Singleton.instance=newSingleton();}returnSingleton.instance;}publicsomeMethod():void{console.log("Singleton method called");}}

使用：

consts1=Singleton.getInstance();consts2=Singleton.getInstance();console.log(s1===s2);// trues1.someMethod();

基础：静态 instance 存储唯一对象，getInstance 控制访问。

单例模式的深入实现与优化

懒加载：如上，首次调用创建。

线程安全：在 JS 单线程中无需锁，但 Node 多进程可用。

初始化数据：

classConfigSingleton{privatestaticinstance:ConfigSingleton|null=null;privateconfig:{[key:string]:string}={};privateconstructor(configData:{[key:string]:string}){this.config=configData;}publicstaticgetInstance(configData?:{[key:string]:string}):ConfigSingleton{if(!ConfigSingleton.instance){if(!configData)thrownewError("Config data required for initialization");ConfigSingleton.instance=newConfigSingleton(configData);}returnConfigSingleton.instance;}publicget(key:string):string|undefined{returnthis.config[key];}}

深入：优化添加重置测试，但生产慎用。

单例深入让它适合全局状态，但避免滥用导致耦合。

利用 TypeScript 类型系统增强单例模式

TS 类型增强单例：私有构造确保类型安全，静态方法返回精确类型。

类型增强的基本应用

上示例中，getInstance 返回 Singleton 类型，确保方法可用。

防止误用：

私有构造编译时防 new Singleton()。

类型增强的深入技巧

泛型单例：

classGenericSingleton<T>{privatestaticinstances:Map<any,any>=newMap();privateconstructor(privatedata:T){}publicstaticgetInstance<U>(key:any,data:U):GenericSingleton<U>{if(!GenericSingleton.instances.has(key)){GenericSingleton.instances.set(key,newGenericSingleton(data));}returnGenericSingleton.instances.get(key);}publicgetData():T{returnthis.data;}}

多键单例，泛型 T 确保 data 类型。

深入：结合接口。

interfaceILogger{log(message:string):void;}classLoggerSingletonimplementsILogger{// 单例实现log(message:string):void{console.log(message);}}constlogger=LoggerSingleton.getInstance();logger.log("Message");// 类型 ILogger

类型增强深入让单例安全，TS 接口定义合同。

工厂模式：抽象对象创建

工厂模式是创建型模式，提供接口创建对象，而不暴露逻辑。适合当创建复杂或有变体时。

工厂模式的基础实现

简单工厂：

classProductA{operation():string{return"ProductA operation";}}classProductB{operation():string{return"ProductB operation";}}classSimpleFactory{staticcreateProduct(type:string):ProductA|ProductB|null{if(type==="A")returnnewProductA();if(type==="B")returnnewProductB();returnnull;}}

使用：

constprod=SimpleFactory.createProduct("A");console.log(prod?.operation());

基础：工厂方法集中创建逻辑。

工厂模式的深入实现

抽象工厂：接口定义工厂，具体类实现。

interfaceIProduct{operation():string;}classConcreteProduct1implementsIProduct{operation():string{return"ConcreteProduct1";}}classConcreteProduct2implementsIProduct{operation():string{return"ConcreteProduct2";}}interfaceIFactory{createProduct():IProduct;}classFactory1implementsIFactory{createProduct():IProduct{returnnewConcreteProduct1();}}classFactory2implementsIFactory{createProduct():IProduct{returnnewConcreteProduct2();}}functionclientCode(factory:IFactory){constproduct=factory.createProduct();console.log(product.operation());}clientCode(newFactory1());// "ConcreteProduct1"

深入：抽象工厂支持家族产品，易切换。

工厂深入让创建解耦，适合 DI。

利用 TypeScript 类型系统增强工厂模式

TS 类型增强工厂：泛型确保返回类型，接口定义合同。

类型增强的基本应用

泛型工厂：

classFactory{staticcreate<T>(ctor:new()=>T):T{returnnewctor();}}classMyClass{}constinstance=Factory.create(MyClass);// 类型 MyClass

基本：泛型 T 推断自 ctor。

类型增强的深入技巧

类型安全的抽象工厂：

interfaceIButton{render():void;}interfaceICheckbox{render():void;}interfaceIGUIFactory{createButton():IButton;createCheckbox():ICheckbox;}classWindowsButtonimplementsIButton{render():void{console.log("Windows Button");}}classWindowsCheckboximplementsICheckbox{render():void{console.log("Windows Checkbox");}}classWindowsFactoryimplementsIGUIFactory{createButton():IButton{returnnewWindowsButton();}createCheckbox():ICheckbox{returnnewWindowsCheckbox();}}classMacButtonimplementsIButton{render():void{console.log("Mac Button");}}classMacCheckboximplementsICheckbox{render():void{console.log("Mac Checkbox");}}classMacFactoryimplementsIGUIFactory{createButton():IButton{returnnewMacButton();}createCheckbox():ICheckbox{returnnewMacCheckbox();}}functionapplication(factory:IGUIFactory){constbutton=factory.createButton();button.render();constcheckbox=factory.createCheckbox();checkbox.render();}application(newWindowsFactory());// Windows UIapplication(newMacFactory());// Mac UI

接口 IGUIFactory 确保工厂返回正确类型，类型系统检查实现。

深入技巧：泛型工厂参数化。

typeConstructor<T>=new(...args:any[])=>T;functioncreateInstance<T>(ctor:Constructor<T>,...args:any[]):T{returnnewctor(...args);}classUser{constructor(publicname:string){}}constuser=createInstance(User,"Alice");// 类型 User

类型增强深入让工厂安全，TS 泛型和接口防止错创建。

观察者模式：实现事件通知

观察者模式是行为型模式，定义一对多依赖，当主体变化，所有观察者通知。

观察者模式的基础实现

简单：

classSubject{privateobservers:(()=>void)[]=[];attach(observer:()=>void):void{this.observers.push(observer);}detach(observer:()=>void):void{this.observers=this.observers.filter(obs=>obs!==observer);}notify():void{this.observers.forEach(obs=>obs());}}classObserver{update():void{console.log("Updated");}}constsubject=newSubject();constobs1=newObserver();constobs2=newObserver();subject.attach(()=>obs1.update());subject.attach(()=>obs2.update());subject.notify();// "Updated" twice

基础：Subject 管理观察者，notify 调用 update。

观察者模式的深入实现

发布订阅变体：

interfaceIObserver{update(data:any):void;}classPublisher{privatesubscribers:{[event:string]:IObserver[]}={};subscribe(event:string,observer:IObserver):void{if(!this.subscribers[event])this.subscribers[event]=[];this.subscribers[event].push(observer);}unsubscribe(event:string,observer:IObserver):void{this.subscribers[event]=this.subscribers[event].filter(obs=>obs!==observer);}publish(event:string,data:any):void{this.subscribers[event]?.forEach(obs=>obs.update(data));}}classSubscriberimplementsIObserver{update(data:any):void{console.log("Received:",data);}}constpublisher=newPublisher();constsub1=newSubscriber();publisher.subscribe("event1",sub1);publisher.publish("event1","data");// "Received: data"

深入：事件键分订阅，支持多事件。

观察者深入让模式适合 UI 事件或状态变化。

利用 TypeScript 类型系统增强观察者模式

TS 类型增强观察者：接口定义 update 签名，泛型指定 data 类型。

类型增强的基本应用

类型化 update：

interfaceIObserver<T>{update(data:T):void;}classSubject<T>{privateobservers:IObserver<T>[]=[];attach(observer:IObserver<T>):void{this.observers.push(observer);}notify(data:T):void{this.observers.forEach(obs=>obs.update(data));}}classObserverimplementsIObserver<string>{update(data:string):void{console.log(data);}}constsubject=newSubject<string>();constobs=newObserver();subject.attach(obs);subject.notify("message");// OK// subject.notify(123); // 错误

基本：泛型 T 确保 data 类型一致。

类型增强的深入技巧

事件类型映射：

typeEvents={click:MouseEvent;keypress:KeyboardEvent;};classEventEmitter{privatelisteners:{[KinkeyofEvents]?:((event:Events[K])=>void)[]}={};on<KinkeyofEvents>(event:K,listener:(ev:Events[K])=>void):void{if(!this.listeners[event])this.listeners[event]=[];this.listeners[event]!.push(listener);}emit<KinkeyofEvents>(event:K,data:Events[K]):void{this.listeners[event]?.forEach(listener=>listener(data));}}constemitter=newEventEmitter();emitter.on("click",ev=>console.log(ev.clientX));// ev MouseEvent// emitter.on("click", ev => ev.key); // 错误