Implementing a conditional chaining function in TypeScript

Question

Implementing a conditional chaining function in TypeScript

I'm currently facing an issue while implementing a set of chained functions.

interface IAdvancedCalculator {
  add(value: number): this;
  subtract(value: number): this;
  divideBy(value: number): this;
  multiplyBy(value: number): this;
  calculate(): void
}

interface ISpecialAdvancedCalculator extends IAdvancedCalculator {
  specialAdd(value: number): IAdvancedCalculator;
  specialSubtract(value: number): IAdvancedCalculator;
}

let myCalculator: ISpecialAdvancedCalculator;
myCalculator
  .add(20)
  .multiplyBy(2)
  .specialAdd(40)
  .subtract(5)
  .specialSubtract(20) //<-- Error! Property 'specialSubtract' does not exist on type 'IAdvancedCalculator'.
  .calculate()

I am aiming to ensure type checking for the functions in the chain. Specifically, I want specialAdd and specialSubtract functions defined in ISpecialAdvancedCalculator to be used only once each, while IAdvancedCalculator functions can be used multiple times. As a TypeScript beginner, I have tried various approaches like Advanced types (Pick & Omit) without any success. Are there any other solutions I can explore to address this scenario?

typescript chaining

Answer 1

Answer №1

Eliminating certain functions can be done easily by using Omit<this, 'specialPlus'>. Testing this approach shows that it mostly works, unless you try to call specialPlus right after another call to it, in which case an error will occur. However, calling it after a call to specialMinus does not produce any issues.

interface ISpecialCalculator extends ISimpleCalculator {
  specialPlus(value: number): Omit<this, 'specialPlus'>;
  specialMinus(value: number): Omit<this, 'specialMinus'>;
}

declare let testCalculator: ISpecialCalculator;
testCalculator  
  .specialPlus(40)
   // .specialPlus(40) // error 🎉
  .specialMinus(20)
  .specialPlus(40) //ok 😢
  .sum()

Playground Link

The reason for this behavior is because Omit acts on the type of this when the testCalculator variable is declared. Consequently, the specialMinus function will actually return

Omit<ISpecialCalculator, 'specialMinus'>

, which still includes specialPlus even if it was previously omitted. To address this issue, we need to apply Omit based on the type returned by the preceding function, rather than on polymorphic this.

interface ISimpleCalculator {
  plus<TThis>(this: TThis,value: number): TThis;
  minus<TThis>(this: TThis,value: number): TThis;
  divide<TThis>(this: TThis,value: number): TThis;
  multiply<TThis>(this: TThis,value: number): TThis;
  sum(): void
}

interface ISpecialCalculator extends ISimpleCalculator {
  specialPlus<TThis>(this: TThis, value: number): Omit<TThis, 'specialPlus'>;
  specialMinus<TThis>(this: TThis, value: number): Omit<TThis, 'specialMinus'>;
}

declare let testCalculator: ISpecialCalculator;
testCalculator
  .specialPlus(40)
  // .specialPlus(40) // error 🎉
  .specialMinus(20)
  .plus(10)
  .specialPlus(40) // also error 🎉
  .plus(10)
  .sum()

Playground Link

Answer 2

Eliminating certain functions can be done easily by using Omit<this, 'specialPlus'>. Testing this approach shows that it mostly works, unless you try to call specialPlus right after another call to it, in which case an error will occur. However, calling it after a call to specialMinus does not produce any issues.

interface ISpecialCalculator extends ISimpleCalculator {
  specialPlus(value: number): Omit<this, 'specialPlus'>;
  specialMinus(value: number): Omit<this, 'specialMinus'>;
}

declare let testCalculator: ISpecialCalculator;
testCalculator  
  .specialPlus(40)
   // .specialPlus(40) // error 🎉
  .specialMinus(20)
  .specialPlus(40) //ok 😢
  .sum()

Playground Link

The reason for this behavior is because Omit acts on the type of this when the testCalculator variable is declared. Consequently, the specialMinus function will actually return

Omit<ISpecialCalculator, 'specialMinus'>

, which still includes specialPlus even if it was previously omitted. To address this issue, we need to apply Omit based on the type returned by the preceding function, rather than on polymorphic this.

interface ISimpleCalculator {
  plus<TThis>(this: TThis,value: number): TThis;
  minus<TThis>(this: TThis,value: number): TThis;
  divide<TThis>(this: TThis,value: number): TThis;
  multiply<TThis>(this: TThis,value: number): TThis;
  sum(): void
}

interface ISpecialCalculator extends ISimpleCalculator {
  specialPlus<TThis>(this: TThis, value: number): Omit<TThis, 'specialPlus'>;
  specialMinus<TThis>(this: TThis, value: number): Omit<TThis, 'specialMinus'>;
}

declare let testCalculator: ISpecialCalculator;
testCalculator
  .specialPlus(40)
  // .specialPlus(40) // error 🎉
  .specialMinus(20)
  .plus(10)
  .specialPlus(40) // also error 🎉
  .plus(10)
  .sum()

Playground Link

Answer 3

Answer №2

customAddition(value: number): IAdvancedCalculator;

Upon invoking this method, you will receive an advanced calculator that no longer includes the special features. The customized interface must also return this and remain operational:

interface ICustomizedCalculator extends IAdvancedCalculator {  
   customAddition(value: number): this;
   customSubtraction(value: number): this;
}

Answer 4

customAddition(value: number): IAdvancedCalculator;

Upon invoking this method, you will receive an advanced calculator that no longer includes the special features. The customized interface must also return this and remain operational:

interface ICustomizedCalculator extends IAdvancedCalculator {  
   customAddition(value: number): this;
   customSubtraction(value: number): this;
}

Answer 5

Answer №3

Check out the complete code snippet tested according to the question:

interface ISimpleCalculation {
  add(value: number): this
  subtract(value: number): this
  divide(value: number): this
  multiply(value: number): this
  calculateSum(): void
}

interface ISpecializedCalculation extends ISimpleCalculation {
  specialAddition(value: number): this
  specialSubtraction(value: number): this
}

let exampleCalculator: ISpecializedCalculation
exampleCalculator
  .add(10)
  .multiply(3)
  .specialAddition(15)
  .subtract(5)
  .specialSubtraction(8) 
  .calculateSum()

If you wish to restrict the use of special[Addition|Subtraction], you can implement that in the concrete class that follows the ISpecializedCalculation interface.

The given code snippet below could provide some inspiration:

class CustomCalculator implements ISpecializedCalculation {
  hasUsedSpecialAddition = false
  hasUsedSpecialSubtraction = false

  specialAddition(value: number): this {
    if (this.hasUsedSpecialAddition) throw new Error("Special Addition can only be used once!")

    this.hasUsedSpecialAddition = true
    // Perform relevant calculations here...
    return this
  }

  specialSubtraction(value: number): this {
    if (this.hasUsedSpecialSubtraction) throw new Error("Special Subtraction can only be used once!")
    this.hasUsedSpecialSubtraction = true
    // Perform relevant calculations here...
    return this
  }

  add(value: number): this {
    // Perform relevant calculations here...
    return this
  }

  subtract(value: number): this {
    // Perform relevant calculations here...
    return this
  }

  divide(value: number): this {
    // Perform relevant calculations here...
    return this
  }

  multiply(value: number): this {
    // Perform relevant calculations here...
    return this
  }

  calculateSum(): void {
    // Perform relevant calculations here...
  }
}

Answer 6

Check out the complete code snippet tested according to the question:

interface ISimpleCalculation {
  add(value: number): this
  subtract(value: number): this
  divide(value: number): this
  multiply(value: number): this
  calculateSum(): void
}

interface ISpecializedCalculation extends ISimpleCalculation {
  specialAddition(value: number): this
  specialSubtraction(value: number): this
}

let exampleCalculator: ISpecializedCalculation
exampleCalculator
  .add(10)
  .multiply(3)
  .specialAddition(15)
  .subtract(5)
  .specialSubtraction(8) 
  .calculateSum()

If you wish to restrict the use of special[Addition|Subtraction], you can implement that in the concrete class that follows the ISpecializedCalculation interface.

The given code snippet below could provide some inspiration:

class CustomCalculator implements ISpecializedCalculation {
  hasUsedSpecialAddition = false
  hasUsedSpecialSubtraction = false

  specialAddition(value: number): this {
    if (this.hasUsedSpecialAddition) throw new Error("Special Addition can only be used once!")

    this.hasUsedSpecialAddition = true
    // Perform relevant calculations here...
    return this
  }

  specialSubtraction(value: number): this {
    if (this.hasUsedSpecialSubtraction) throw new Error("Special Subtraction can only be used once!")
    this.hasUsedSpecialSubtraction = true
    // Perform relevant calculations here...
    return this
  }

  add(value: number): this {
    // Perform relevant calculations here...
    return this
  }

  subtract(value: number): this {
    // Perform relevant calculations here...
    return this
  }

  divide(value: number): this {
    // Perform relevant calculations here...
    return this
  }

  multiply(value: number): this {
    // Perform relevant calculations here...
    return this
  }

  calculateSum(): void {
    // Perform relevant calculations here...
  }
}

Implementing a conditional chaining function in TypeScript

Answer №1

Answer №2

Answer №3

Similar questions

What is the process of extracting an observable from another observable using the pipe method?

React-leaflet with TypeScript is failing to display GeoJSON Points on the map

Tips for choosing a specific quantity and adjusting its value

Mismatched non-intersecting categories with TypeScript

What are the Typescript object types where the keys are functions that take a single generic argument consistently?

Establishing the types of object properties prior to performing a destructuring assignment

Unit testing component in Ionic 2 with Ionic's specific markup and elements

Issue with event.stopPropagation() in Angular 6 directive when using a template-driven form that already takes event.data

Retrieve functions with varying signatures from another function with precise typing requirements

Having trouble executing the project using Gulp

Tips for integrating Typescript into a pre-existing Vue 3 project

The onClick function for a button is not functioning properly when using the useToggle hook

Is there an equivalent concept to Java's `Class<T>` in TypeScript which allows extracting the type of a class constructor?

Encountering an issue with PrimeNG's <p-calendar> component: the error message "date

Stopping the subscription to an observable within the component while adjusting parameters dynamically

Determining the output type by considering the presence of optional parameters

Can anyone explain why the Splice function is removing the element at index 1 instead of index 0 as I specified?

Is there a way to search for text and highlight it within an HTML string using Ionic

Utilizing a Function's Parameter Type in TypeScript: A Beginner's Guide

Incorporating a sidemenu into a DOM using Ionic2 and Angular2 Typescript