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

Update and verify a collection of objects in real-time

Adding clickable padding to a Draft.js editor can enhance the user experience and make the editing process

Navigating through functions and saving outcomes

How can ngx-modals detect when the modals have been closed?

Are there any benefits to utilizing the Mantra.js architectural framework?

Issues with angular-strap popover's onBeforeShow function not functioning as expected in Angular

Creating a flexible image layout within a container with relative positioning

Exploring the functionality of Angular.js through QUnit testing

Controller data is being successfully returned despite breakpoints not being hit

Issue with hidden sourcemap not loading in Chrome or Firefox during Vite build

Mocha avoids running the test

I'm looking for the Type Definitions Files (*.d.ts) for the Amazon Cognito Identity SDK. Does anyone know where I can find them and how

When using React and React Router v6, make sure to implement a 404 status code response for unmatched routes

Ways to ascertain if a view has completed rendering in JavaScript

Formik Alert: Update depth limit reached

Load the flexslider once the fancybox container is opened

Understanding the use of JSON and JavaScript is proving to be quite a challenge for me

How can I pass a dynamic scope variable to a JavaScript function in AngularJS that is being updated within an ng-repeat loop?

The JavaScript promise remains in limbo, neither resolving nor rejecting, seemingly stuck for unknown reasons

Limit DerbyJS to re-rendering specific DOM elements