In this article, we will learn how to use and implement the Flyweight Pattern in TypeScript with an example.

Flyweight pattern is primarily used to reduce the number of objects created and to decrease memory footprint and increase performance. This type of design pattern comes under structural pattern as this pattern provides ways to decrease object count thus improving the object structure of an application.

Flyweight pattern tries to reuse already existing similar kind objects by storing them and creates new objects when no matching object is found.

TypeScript Flyweight Design Pattern Example

The below diagram shows the generic structure of the Flyweight Pattern:

Let's refer to the above structure to create an example to demonstrates the usage of the Flyweight Pattern.

Let's create flyweight.ts file and add the following code to it:

export interface Flyweight {
    operation(s: String): void;
}

export class ConcreteFlyweight implements Flyweight {
    private instrinsicState: String;

    constructor(instrinsicState: String) {
        this.instrinsicState = instrinsicState;
    }

    public operation(s: String): void {
        console.log("`operation` of ConcreteFlyweight", s, " is being called!");
    }
}

export class UnsharedConcreteFlyweight implements Flyweight {
    private allState: number;

    constructor(allState: number) {
        this.allState = allState;
    }

    public operation(s: String): void {
        console.log("`operation` of UnsharedConcreteFlyweight", s, " is being called!");
    }
}

export class FlyweightFactory {

    private fliesMap: { [s: string]: Flyweight; } = <any>{};

    constructor() { }

    public getFlyweight(key: string): Flyweight {

        if (this.fliesMap[key] === undefined || null) {
            this.fliesMap[key] = new ConcreteFlyweight(key);
        }
        return this.fliesMap[key];
    }
}

Usage

Let's create demo.ts file and add the following code to it:

import { ConcreteFlyweight, FlyweightFactory } from "./flyweight";

export function show() : void {
 var factory: FlyweightFactory   = new FlyweightFactory(),

 conc1: ConcreteFlyweight    = <ConcreteFlyweight>factory.getFlyweight("conc1"),
 conc2: ConcreteFlyweight    = <ConcreteFlyweight>factory.getFlyweight("conc2");

 conc1.operation("1");
 conc2.operation("2");
}
show();

Run:

• Compile the above code using the TypeScript compiler.
• Above code is compiled to plan JavaScript code
• Run Javascript code using node

design_patterns_in_typescript\flyweight> tsc --target ES5 .\demo.ts
design_patterns_in_typescript\flyweight> node .\demo.js
`operation` of ConcreteFlyweight 1  is being called!
`operation` of ConcreteFlyweight 2  is being called!

Use the Flyweight pattern only when your program must support a huge number of objects which barely fit into available RAM.

All TypeScript Design Patterns

1. Creational Design Patterns

Creational patterns provide various object creation mechanisms, which increase flexibility and reuse of existing code.

1. TypeScript Singleton Pattern Example
2. TypeScript Factory Design Pattern with Example
3. TypeScript Abstract Factory Pattern Example
4. TypeScript Builder Pattern Example
5. TypeScript Prototype Pattern Example

2. Structural Design Patterns

Structural patterns explain how to assemble objects and classes into larger structures while keeping these structures flexible and efficient.

1. TypeScript Bridge Pattern Example
2. TypeScript Adapter Pattern Example
3. TypeScript Decorator Pattern Example
4. TypeScript Composite Pattern Example
5. TypeScript Flyweight Design Pattern Example
6. TypeScript Facade Pattern Example
7. TypeScript Proxy Pattern Example

3. Behavioral Design Patterns

Behavioral design patterns are concerned with algorithms and the assignment of responsibilities between objects.

1. TypeScript Command Pattern Example
2. TypeScript Chain of Responsibility Pattern Example
3. TypeScript Visitor Pattern Example
4. TypeScript Template Method Pattern Example
5. TypeScript Strategy Pattern Example
6. TypeScript State Pattern Example
7. TypeScript Observer Pattern Example
8. TypeScript Memento Pattern Example
9. TypeScript Mediator Pattern Example
10. TypeScript Iterator Pattern Example
11. TypeScript Interpreter Design Pattern Example

Free Spring Boot Tutorial - 5 Hours Full Course

---

Watch this course on YouTube at Spring Boot Tutorial | Fee 5 Hours Full Course