What is the best way to implement function chaining in TypeScript?

Question

What is the best way to implement function chaining in TypeScript?

I'm interested in implementing function chaining in typescript.

Let's consider a sample class:

export class NumberOperator {
  private num;

  constructor(initialNum) {
    this.num = initialNum;
  }

  public add(inc = 1) {
    this.num += inc;
  }
}

Using the class as (1):

let finalNumber = new NumberOperator(3);
console.log(finalNumber); // Output: 3

Using the class as (2):

let finalNumber = new NumberOperator(3).add();
console.log(finalNumber); // Output: 4

Using the class as (3):

let finalNumber = new NumberOperator(3).add().add();
console.log(finalNumber); // Output: 5

Using the class as (4):

let finalNumber = new NumberOperator(3).add().add(2).toString();
console.log(finalNumber); // Output: "6"

I would appreciate any guidance on achieving this. Thanks in advance :)

javascript function typescript

Answer 1

Answer №1

To create a chainable function, simply return this from the functions you wish to chain together.

class numbOp {
    private n: number;
    constructor(num: number) {
        this.n = num;
    }

    public add(inc = 1) : this { // annotation not necessary added to address comments
        this.n = this.n + inc;
        return this;
    }
    toString() { 
        return this.n;
    }

}
let finalNumber = new numbOp(3);
console.log(finalNumber + "") // Output: 3

// How to use it with one addition
let finalNumber2 = new numbOp(3).add();
console.log(finalNumber2 + "") // Output: 4

// Using it with two additions
let finalNumber3 = new numbOp(3).add().add();
console.log(finalNumber3 + "") // Output: 5

// Using it with three additions and converting to string
let finalNumber4 = new numbOp(3).add().add(2).toString();
console.log(finalNumber4) // Output: "6"

Edit

For better output in the console:

Override toString method for string representation of the object
Always call toString at the end of the chain
Override valueOf method and use unary + operator (for binary operations)

Example for the last option:

class numbOp {
    private n: number;
    constructor(num: number) {
        this.n = num;
    }

    public add(inc = 1): this { 
        this.n = this.n + inc;
        return this;
    }
    valueOf() { 
        return this.n;
    }

}

let finalNumber2 = new numbOp(3).add();
console.log(+finalNumber2) // Output: 4
console.log(1 + (+finalNumber2)) // Output: 5
console.log(1+(finalNumber2 as any as number)) // Output: 5

Answer 2

To create a chainable function, simply return this from the functions you wish to chain together.

class numbOp {
    private n: number;
    constructor(num: number) {
        this.n = num;
    }

    public add(inc = 1) : this { // annotation not necessary added to address comments
        this.n = this.n + inc;
        return this;
    }
    toString() { 
        return this.n;
    }

}
let finalNumber = new numbOp(3);
console.log(finalNumber + "") // Output: 3

// How to use it with one addition
let finalNumber2 = new numbOp(3).add();
console.log(finalNumber2 + "") // Output: 4

// Using it with two additions
let finalNumber3 = new numbOp(3).add().add();
console.log(finalNumber3 + "") // Output: 5

// Using it with three additions and converting to string
let finalNumber4 = new numbOp(3).add().add(2).toString();
console.log(finalNumber4) // Output: "6"

Edit

For better output in the console:

Override toString method for string representation of the object
Always call toString at the end of the chain
Override valueOf method and use unary + operator (for binary operations)

Example for the last option:

class numbOp {
    private n: number;
    constructor(num: number) {
        this.n = num;
    }

    public add(inc = 1): this { 
        this.n = this.n + inc;
        return this;
    }
    valueOf() { 
        return this.n;
    }

}

let finalNumber2 = new numbOp(3).add();
console.log(+finalNumber2) // Output: 4
console.log(1 + (+finalNumber2)) // Output: 5
console.log(1+(finalNumber2 as any as number)) // Output: 5

What is the best way to implement function chaining in TypeScript?

Answer №1

Similar questions

Is there a way to determine the remaining time or percentage until document.ready is reached?

I'm new to Angular, so could you please explain this to me? I'm trying to understand the concept of `private todoItems: TodoItem[] = []`. I know `TodoItem` is an array that

How do I specify a unique directory for pages in Next.js that is not within the src or root folders?

In Chrome, it seems like every alternate ajax request is dragging on for ten times longer than usual

Tips for implementing an autoscroll feature in the comments section when there is an abundance of comments

Determine the height of an image using JavaScript

Is it possible to modify the host header within an Angular app?

Tips for showcasing images retrieved from a REST API on the frontend, with the condition that only one image should be displayed using multer

Is there a method I can use to transform this PHP script so that I can incorporate it in .JS with Ajax?

Selenium on Sauce Labs does not successfully load the page in Firefox after clicking

Bringing in additional elements, ensure that there is only a single main root element

Stop users from saving the page in Next.js

Tips for stopping links in iOS web applications from launching in a new Safari tab

What is the most effective way to identify mobile browsers using javascript/jquery?

Dealing with illegal characters, such as the notorious £ symbol, in JSON data within a JQuery

jQuery click() function fires twice when dealing with dynamic elements

Ways to include x-api-key in Angular API request headers

Disable setTimeout in Node.js triggered by an event

What could be causing the issue where only the latest data is being shown

Why is the imported package not being recognized in the namespace declaration of my Node.js TypeScript file?