Design Pattern: Adapter Pattern in TypeScript

Adapter pattern is used to create a bridge between two incompatible interfaces. Due to some change in the system, or new implementation if we need to enable any existing interface to use the new interface. In that case Adapter pattern can help.

Implementation

Follow the steps below to implement the Adapter pattern in TypeScript-

Prerequisite-

For this adaption requirement we can create the adapter following the steps below-

Here is a simple implementation of Adapter pattern in TypeScript-

// Old interface
interface OldInterface {
    operation1(): void;
    operation2(): void;
}

// Old interface implementation
class OldExample implements OldInterface {
    operation1(): void {
        console.log("Operation 1 of Old Example")
    }

    operation2(): void {
        console.log("Operation 2 of Old Example");
    }
}

// New interface
interface NewInterface {
    newOperation1(): void;
    newOperation2(): void;
    newOperation3(): void;
}

// New interface implementation
class NewExample implements NewInterface {
    newOperation1(): void {
        console.log("New Operation 1 of New Example");
    }

    newOperation2(): void {
        console.log("New Operation 2 of New Example");
    }

    newOperation3(): void {
        console.log("New Operation 3 of New Example");
    }
}

// Adapter
class Adater implements NewInterface {
    private oldInterface: OldInterface;

    constructor(oldInterface: OldInterface) {
        this.oldInterface = oldInterface;
    }

    newOperation1(): void {
        console.log("Inside New Operation 1 of Adapter");

        this.oldInterface.operation1();
    }

    newOperation2(): void {
        console.log("Inside New Operation 2 of Adapter");

        this.oldInterface.operation2();
    }

    newOperation3(): void {
        throw new Error("Operation not available in Adapter");
    }
}


// Demo
const oldExample = new OldExample();
const adapter = new Adater(oldExample);

adapter.newOperation1();
adapter.newOperation2();

This will generate following output.

Inside New Operation 1 of Adapter
Operation 1 of Old Example

Inside New Operation 2 of Adapter
Operation 2 of Old Example

Examples

Here are a few examples of Adapter pattern implementation in TypeScript.

Example #1: API with File Adapter

In this example, we have a file interface and a class that implements the interface. This class performs file read/write operations.

On the other hand, we have some API classes, which performs operations on native or 3rd-party endpoints.

We want to include the file operations in the API, and we want to use the file operations just like an API, so that we don’t have to treat the file operations separately.

File Interface

// file-op.ts

interface FileOp {
    readFile(): string;
    writeFile(input: string): void;
}

export default FileOp;

FileOperation Class [implements File Interface]

// file-operation.ts

import FileOp from './file-op';

class FileOperation implements FileOp {
    readFile(): string {
        console.log("Reading from file");
        return "some dummy response read from file";
    }

    writeFile(input: string): void {
        console.log("Writing to file: " + input);
    }
}

export default FileOperation;

API Interface

// api.ts

interface Api {
    fetchData(): string;
    sendData(data: string): void;
}

export default Api;

Native API Class [implements Api interface]

// native-api.ts

import Api from "./api";

class NativeApi implements Api {
    fetchData(): string {
        console.log("Fetching data from Native API");
        return "Data read from Native Api";
    }

    sendData(data: string): void {
        console.log("Sending data to Native API: " + data);
    }
}

export default NativeApi;

Third-Party API Class [implements Api interface]

// third-party-api.ts

import Api from "./api";

class ThirdPartyApi implements Api {
    fetchData(): string {
        console.log("Fetching data from Third Party API");
        return "Data read from Third Party Api";
    }

    sendData(data: string): void {
        console.log("Sending data to Third Party API: " + data);
    }
}

export default ThirdPartyApi;

New Requirement

As per new requirements, the file operation class needs to adapt to the functionality of API. We have to create an adapter for file operation for that.

File Adapter

Here are a few key things to notice here in the file adapter-

// file-adapter.ts

import Api from "./api";
import FileOp from "./file-op";


class FileAdapter implements Api {
    private fileOp: FileOp;

    constructor(fileOp: FileOp) {
        this.fileOp = fileOp;
    }

    fetchData(): string {
        return this.fileOp.readFile();
    }

    public sendData(data: string) {
        this.fileOp.writeFile(data);
    }
}

export default FileAdapter;

Demo

We can use the File adapter by passing a “FileOperation” object while adapter object creation.

// demo.ts

import FileAdapter from "./file-adapter";
import FileOperation from "./file-operation";
import ThirdPartyApi from "./third-party-api";

// make a call to third part API for testing
const thirdPartyApi = new ThirdPartyApi();
thirdPartyApi.fetchData();
thirdPartyApi.sendData("1234");


// Make a call to the file via FileAdapter
const file = new FileOperation();
const fileAdapter = new FileAdapter(file);
fileAdapter.fetchData();
fileAdapter.sendData("ABCDEF");

Output

The following output will be generated.

Fetching data from Third Party API
Sending data to Third Party API: 1234

Reading from file
Writing to file: ABCDEF

Example #2: Transport

Here in this example, we have some initial implementation of air transports, like Plane and Helicopter.

Later we have a general transport implementation, and we want the air transport classes (interface) to adapt to the general transport implementation.

Here is how we can do that-

AirTransport Interface

// air-transport.ts

interface AirTransport {
    getNumberOfWheels(): number;
    getNumberOfEngines(): number;
    getWeight(): number;
    getDistanceTravelled(): number;
    getTravelCostTotal(): number;
}

export default AirTransport;

Plane Class [implements AirTransport]

// plane.ts

import AirTransport from "./air-transport";

class Plane implements AirTransport {
    getNumberOfWheels(): number {
        return 3;
    }
    
    getNumberOfEngines(): number {
        return 2;
    }

    getWeight(): number {
        return 127000;
    }

    getDistanceTravelled(): number {
        return 500;
    }

    getTravelCostTotal(): number {
        return 3000;
    }
}

export default Plane;

Helicopter Class [implements AirTransport]

// helicopter.ts

import AirTransport from "./air-transport";

class Helicopter implements AirTransport {
    getNumberOfWheels(): number {
        return 0;
    }

    getNumberOfEngines(): number {
        return 1;
    }

    getWeight(): number {
        return 12000;
    }

    getDistanceTravelled(): number {
        return 180;
    }
    
    getTravelCostTotal(): number {
        return 20000;
    }
}

export default Helicopter;

Now as a new implementation, we have a generate transport implementation, like below-

Transport Interface

// transport.ts

interface Transport {
    getNumberOfWheels(): number;
    getWeight(): number;
    getDistanceTravelled(): number;
    getTravelCostPerMile(): number;
}

export default Transport;

Bus Class [implements Transport]

// bus.ts

import Transport from "./transport";

class Bus implements Transport {
    getNumberOfWheels(): number {
        return 4;
    }

    getWeight(): number {
        return 10000;
    }

    getDistanceTravelled(): number {
        return 1000;
    }
    
    getTravelCostPerMile(): number {
        return 5;
    }
}

export default Bus;

Bike Class [implements Transport]

// bike.ts

import Transport from "./transport";

class Bike implements Transport {
    getNumberOfWheels(): number {
        return 2;
    }

    getWeight(): number {
        return 700;
    }

    getDistanceTravelled(): number {
        return 80;
    }

    getTravelCostPerMile(): number {
        return 4;
    }
}

export default Bike;

Now we want the air transport to adapt to the general transport implementation. We need to create an adapter like below, for that-

AirTransportAdapter Class [implements Transport]

// air-transport-adapter.ts

import AirTransport from "./air-transport";
import Transport from "./transport";

class AirTransportAdapter implements Transport {
    private airTransport: AirTransport;

    constructor(airTransport: AirTransport) {
        this.airTransport = airTransport;
    }

    getNumberOfWheels(): number {
        return this.airTransport.getNumberOfWheels();
    }

    getWeight(): number {
        return this.airTransport.getWeight();
    }

    getDistanceTravelled(): number {
        var distanceInNauticalMile = this.airTransport.getDistanceTravelled();
        return distanceInNauticalMile * 1.151;
    }
    
    getTravelCostPerMile(): number {
        var totalCost = this.airTransport.getTravelCostTotal();
        return totalCost / this.getDistanceTravelled();
    }
}

export default AirTransportAdapter;

Demo

Now we can create a air transport object (Plane or Helicopter), and then pass that to the adapter. Like below-

// demo.ts

import AirTransportAdapter from "./air-transport-adapter";
import Bus from "./bus";
import Plane from "./plane";


console.log("Get information of Bus travel...");

const bus = new Bus();
console.log("nNumber of wheels: " + bus.getNumberOfWheels());
console.log("Weight(kg): " + bus.getWeight());
console.log("Distance(miles): " + bus.getDistanceTravelled());
console.log("Cost per mile: " + bus.getTravelCostPerMile());


console.log("Get information of Plane travel...");

const planeTransport = new AirTransportAdapter(new Plane());
console.log("nNumber of wheels: " + planeTransport.getNumberOfWheels());
console.log("Weight(kg): " + planeTransport.getWeight());
console.log("Distance(miles): " + planeTransport.getDistanceTravelled());
console.log("Cost per mile: " + planeTransport.getTravelCostPerMile());

Output

Output will be as below-

Get information of Bus travel...

Number of wheels: 4
Weight(kg): 10000
Distance(miles): 1000
Cost per mile: 5


Get information of Plane travel...

Number of wheels: 3
Weight(kg): 127000
Distance(miles): 575.5
Cost per mile: 5.212858384013901

Source Code

Use the following link to get the source code:

Example	Source Code Link
Example #1: API with File Adapter	GitHub
Example #2: Transport	GitHub

Other Code Implementations

Use the following links to check the implementation of adapter patterns in other programming languages.