Design Pattern: Decorator Pattern in TypeScript

Decorator pattern adds new functionality to existing implementation, without changing the existing implementation. The additional functionality is added to individual objects (not to the entire class).

This article demonstrates Decorator pattern implementations in TypeScript. Check the implementation steps and examples.

Implementation

Here are the steps to implement Decorator pattern-

Pre-existing implementations-

We need to have subject classes, and an interface that the class implements.

We want to add new functionality to this class and all classes that implement the interface.

Decorator implementation-

While using the operation, we can create a new subject type object, then pass that object to the decorator, which initializing the decorator.

Here is a simple example of Decorator pattern implementation-

// Decorator pattern implementation in TypeScript

// Subject
interface Subject {
    operationOne(): void;
    operationTwo(): void;
}

// Concrete subject
class ConcreteSubject implements Subject {
    operationOne(): void {
        console.log("Performing Operation One(1) in Subject");
    }

    operationTwo(): void {
        console.log("Performing Operation Two(2) in Subject");
    }
}

// Decorator
abstract class Decorator implements Subject {
    protected subject: Subject;

    constructor(subject: Subject) {
        this.subject = subject;
    }

    operationOne(): void {
        this.subject.operationOne();
    }

    operationTwo(): void {
        this.subject.operationTwo();
    }
}

// Concrete decorator
class ConcreteDecorator extends Decorator {
    constructor(subject: Subject) {
        super(subject);
    }

    public operationOne(): void {
        this.subject.operationOne();
        console.log("Performing additional operation in Concrete Decorator");
    }
}


// Demo
const someDecorator = new ConcreteDecorator(new ConcreteSubject());
someDecorator.operationOne();

Output of the above code will be as below-

Performing Operation One(1) in Subject
Performing additional operation in Concrete Decorator

Examples

Here are a few examples of Decorator pattern implementation in TypeScript-

Example #1: Data Export

Here we have a simple data importer implementation. This exporter is used to export data, with no formatting or process, just simple export.

We want to add export to specific formats like – CSV, JSON, Excel, etc. That’s why we will create a decorator for each type of format.

DataExport Interface [Existing]

// data-export.ts

interface DataExport {
    processData(): void;
}

export default DataExport;

SimpleExport Class [Existing]

// simple-data-export.ts

import DataExport from "./data-export";


class SimpleDataExport implements DataExport {
    processData(): void {
        console.log("Processing Data");
    }
}

export default SimpleDataExport;

Main Decorator Class [Decorator]

// data-export-decorator.ts

import DataExport from "./data-export";


class DataExportDecorator implements DataExport {
    protected dataExporter: DataExport;

    constructor(dataExporter: DataExport) {
        this.dataExporter = dataExporter;
    }

    public processData() {
        this.dataExporter.processData();
    }
}

export default DataExportDecorator;

CSV Decorator Class [Decorator]

// csv-data-export-decorator.ts

import DataExport from "./data-export";
import DataExportDecorator from "./data-export-decorator";

class CsvDataExportDecorator extends DataExportDecorator {
    constructor(dataExporter: DataExport) {
        super(dataExporter);
    }

    processData(): void {
        this.dataExporter.processData();
        this.processCsv();
    }

    processCsv(): void {
        console.log("Processed data to CSV");
    }
}

export default CsvDataExportDecorator;

Excel Decorator Class [Decorator]

// excel-data-export-decorator.ts

import DataExport from "./data-export";
import DataExportDecorator from "./data-export-decorator";

class ExcelDataExportDecorator extends DataExportDecorator {
    constructor(dataExporter: DataExport) {
        super(dataExporter);
    }

    processData(): void {
        this.dataExporter.processData();
        this.processExcel();
    }

    processExcel() {
        console.log("Processed data to Excel");
    }
}

export default ExcelDataExportDecorator;

JSON Decorator Class [Decorator]

// json-data-export-decorator.ts

import DataExport from "./data-export";
import DataExportDecorator from "./data-export-decorator";


class JsonDataExportDecorator extends DataExportDecorator {
    constructor(dataExporter: DataExport) {
        super(dataExporter);
    }

    processData(): void {
        this.dataExporter.processData();
        this.processJson();
    }

    processJson(): void {
        console.log("Processed data to JSON");
    }
}

export default JsonDataExportDecorator;

Demo

To use any specific operator pass an object of “SimpleDataExport” to the decorator.

// demo.ts

import CsvDataExportDecorator from "./csv-data-export-decoraor";
import ExcelDataExportDecorator from "./excel-data-export-decorator";
import JsonDataExportDecorator from "./json-data-export-decorator";
import SimpleDataExport from "./simple-data-export";

const csvDataExport = new CsvDataExportDecorator(new SimpleDataExport());
csvDataExport.processData();

const excelDataExport = new ExcelDataExportDecorator(new SimpleDataExport());
excelDataExport.processData();

const jsonDataExport = new JsonDataExportDecorator(new SimpleDataExport());
jsonDataExport.processData();

Output

The output of the demo above will be like below.

Processing Data
Processed data to CSV

Processing Data
Processed data to Excel

Processing Data
Processed data to JSON

Example #2: UI Elements

In this example we have some UI elements, like – Button, Input Box, and Table. We want to implement some decorators, like – margin, border, and background.

UI Element Interface

// ui-element.ts

interface UIElement {
    draw(): void;
}

export default UIElement;

Button UI Element Class

// button.ts

import UIElement from "./ui-element";

class Button implements UIElement {
    draw(): void {
        console.log("Drawing Button");
    }
}

export default Button;

Input Box UI Element Class

// input-box.ts

import UIElement from "./ui-element";

class InputBox implements UIElement {
    draw(): void {
        console.log("Drawing Input Box");
    }
}

export default InputBox;

Table UI Element Class

// table.ts

import UIElement from "./ui-element";

class Table implements UIElement {
    draw(): void {
        console.log("Drawing Table");
    }
}

export default Table;

Abstract UI Decorator [Decorator]

// ui-decorator.ts

import UIElement from "./ui-element";

abstract class UIDecorator implements UIElement {
    protected readonly uiElement: UIElement;

    protected constructor(uiElement: UIElement) {
        this.uiElement = uiElement;
    }

    draw(): void {
        this.uiElement.draw();
    }
}

export default UIDecorator;

Border Decorator Class [Decorator]

// border-decorator.ts

import UIDecorator from "./ui-decorator";
import UIElement from "./ui-element";

class BorderDecorator extends UIDecorator {
    constructor(uiElement: UIElement) {
        super(uiElement);
    }

    draw(): void {
        super.draw();
        console.log("Adding Border to the element");
    }
}

export default BorderDecorator;

Background Decorator Class [Decorator]

// background-decorator.ts

import UIDecorator from "./ui-decorator";
import UIElement from "./ui-element";


class BackgroundDecorator extends UIDecorator {
    constructor(uiElement: UIElement) {
        super(uiElement);
    }

    draw(): void {
        super.draw();
        console.log("Adding Background to the element");
    }
}

export default BackgroundDecorator;

Margin Decorator Class [Decorator]

// margin-decorator.ts

import UIDecorator from "./ui-decorator";
import UIElement from "./ui-element";

class MarginDecorator extends UIDecorator {
    constructor(uiElement: UIElement) {
        super(uiElement);
    }

    public draw() {
        super.draw();
        console.log("Adding margin to the element");
    }
}

export default MarginDecorator;

Demo

The following code demonstrates how we can use multiple decorators on a single UI Element, by chaining the decorator calls.

// demo.ts

import BackgroundDecorator from "./background-decorator";
import BorderDecorator from "./border-decorator";
import Button from "./button";
import InputBox from "./input-box";
import MarginDecorator from "./margin-decorator";
import Table from "./table";

const tableWithBorder = new BorderDecorator(new Table());
tableWithBorder.draw();

const inputWithBorderAndBackground = new BackgroundDecorator(new BorderDecorator(new InputBox()));
inputWithBorderAndBackground.draw();

const buttonWithAllDecorator = new MarginDecorator(new BackgroundDecorator(new BorderDecorator(new Button())));
buttonWithAllDecorator.draw();

Output

Drawing Table
Adding Border to the element

Drawing Input Box
Adding Border to the element
Adding Background to the element

Drawing Button
Adding Border to the element
Adding Background to the element
Adding margin to the element

Source Code

Use the following link to get the source code:

Example	Source Code Link
Example #1: Data Export	GitHub
Example #2: UI Elements	GitHub

Other Code Implementations

Use the following links to check Decorator pattern implementation in other programming languages.