The Decorator Pattern is a structural design pattern that allows behavior to be
added to individual objects dynamically without modifying their class. This
pattern promotes flexibility and reusability by enabling the extension of object
functionality at runtime. It is particularly useful when you need to adhere to
the open/closed principle in software design.
typeComponent={add(key: string,value: any):void;get():Record<string,any>;process():void;};classConcreteComponentimplementsComponent{privateprops: Record<string,any>={};// Initialize props
add(key: string,value: any):void{// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
this.props[key]=value;}get():Record<string,any>{returnthis.props;}process():void{console.log("ConcreteComponent processing");// Or any actual processing logic
}}classDecoratorimplementsComponent{constructor(protectedcomponent: Component){}add(key: string,value: any):void{this.component.add(key,value);// Delegate to the wrapped component
}get():Record<string,any>{returnthis.component.get();// Delegate to the wrapped component
}process():void{this.component.process();// Delegate to the wrapped component
}}classConcreteDecoratorAextendsDecorator{process():void{this.add("concreteDecoratorAProcess",true);super.process();// Call the wrapped component's process after decoration
console.log("ConcreteDecoratorA processing");}}classConcreteDecoratorBextendsDecorator{process():void{this.add("concreteDecoratorBProcess",true);super.process();// Call the wrapped component's process after decoration
console.log("ConcreteDecoratorB processing");}}constexample={run():void{constcomponent: Component=newConcreteDecoratorA(newConcreteDecoratorB(newConcreteComponent()));component.process();console.log(component.get());}};example.run();