Need at least one of two methods, or both, in an abstract class

Question

Need at least one of two methods, or both, in an abstract class

Consider the following scenario:

export abstract class AbstractButton {
    // Must always provide this method
    abstract someRequiredMethod(): void;

    // The successor must implement one of these (or both)
    abstract setInnerText?(): void;
    abstract setInnerHTML?(): void;
}

It is necessary for a successor to implement either setInnerText() or setInnerHTML(), or even both.

Is there a way to achieve this utilizing the most powerful type system created by humanity?

typescript oop inheritance methods abstract-class

Answer 1

Answer №1

If you want to distinguish between different implementations, you can create a type alias that utilizes a generic type parameter:

For a practical example and more detailed exploration, head over to the TS Playground

type AbstractButton<T extends 'both' |  'html' | 'text' = 'both'> =
  & { someRequiredMethod(): void }
  & (
    T extends 'html' ? { setInnerHTML(): void }
    : T extends 'text' ? { setInnerText(): void }
    :  {
      setInnerText(): void;
      setInnerHTML(): void;
    }
  );

To ensure adherence to the specified implementation, utilize the implements clause. Here are a few illustrative examples from the TypeScript playground link above - for a comprehensive overview, be sure to check out the provided resources:

class B5 implements AbstractButton<'html'> { /* Error
      ~~
Class 'B5' incorrectly implements interface 'AbstractButton<"html">'.
  Type 'B5' is not assignable to type '{ setInnerHTML(): void; }'.
    Property 'setInnerHTML' is missing in type 'B5' but required in type '{ setInnerHTML(): void; }'.(2420) */
  someRequiredMethod(): void {}
}

class B6 implements AbstractButton<'html'> { // ok
  someRequiredMethod(): void {}
  setInnerHTML(): void {}
}

class B7 implements AbstractButton<'text'> { /* Error
      ~~
Class 'B7' incorrectly implements interface 'AbstractButton<"text">'.
  Type 'B7' is not assignable to type '{ setInnerText(): void; }'.
    Property 'setInnerText' is missing in type 'B7' but required in type '{ setInnerText(): void; }'.(2420) */
  someRequiredMethod(): void {}
}

class B10 implements AbstractButton { /* Error
      ~~
Class 'B10' incorrectly implements interface 'AbstractButton<"both">'.
  Type 'B10' is not assignable to type '{ setInnerText(): void; setInnerHTML(): void; }'.
    Property 'setInnerText' is missing in type 'B10' but required in type '{ setInnerText(): void; setInnerHTML(): void; }'.(2420)
input.tsx(7, 7): 'setInnerText' is declared here. */
  someRequiredMethod(): void {}
  setInnerHTML(): void {}
}

class B12 implements AbstractButton { // ok
  someRequiredMethod(): void {}
  setInnerHTML(): void {}
  setInnerText(): void {}
}

Answer 2

If you want to distinguish between different implementations, you can create a type alias that utilizes a generic type parameter:

For a practical example and more detailed exploration, head over to the TS Playground

type AbstractButton<T extends 'both' |  'html' | 'text' = 'both'> =
  & { someRequiredMethod(): void }
  & (
    T extends 'html' ? { setInnerHTML(): void }
    : T extends 'text' ? { setInnerText(): void }
    :  {
      setInnerText(): void;
      setInnerHTML(): void;
    }
  );

To ensure adherence to the specified implementation, utilize the implements clause. Here are a few illustrative examples from the TypeScript playground link above - for a comprehensive overview, be sure to check out the provided resources:

class B5 implements AbstractButton<'html'> { /* Error
      ~~
Class 'B5' incorrectly implements interface 'AbstractButton<"html">'.
  Type 'B5' is not assignable to type '{ setInnerHTML(): void; }'.
    Property 'setInnerHTML' is missing in type 'B5' but required in type '{ setInnerHTML(): void; }'.(2420) */
  someRequiredMethod(): void {}
}

class B6 implements AbstractButton<'html'> { // ok
  someRequiredMethod(): void {}
  setInnerHTML(): void {}
}

class B7 implements AbstractButton<'text'> { /* Error
      ~~
Class 'B7' incorrectly implements interface 'AbstractButton<"text">'.
  Type 'B7' is not assignable to type '{ setInnerText(): void; }'.
    Property 'setInnerText' is missing in type 'B7' but required in type '{ setInnerText(): void; }'.(2420) */
  someRequiredMethod(): void {}
}

class B10 implements AbstractButton { /* Error
      ~~
Class 'B10' incorrectly implements interface 'AbstractButton<"both">'.
  Type 'B10' is not assignable to type '{ setInnerText(): void; setInnerHTML(): void; }'.
    Property 'setInnerText' is missing in type 'B10' but required in type '{ setInnerText(): void; setInnerHTML(): void; }'.(2420)
input.tsx(7, 7): 'setInnerText' is declared here. */
  someRequiredMethod(): void {}
  setInnerHTML(): void {}
}

class B12 implements AbstractButton { // ok
  someRequiredMethod(): void {}
  setInnerHTML(): void {}
  setInnerText(): void {}
}

Answer 3

Answer №2

Discovering a method to trigger a compile-time error is possible, but the approach may not be ideal due to its complexity. It might be better to opt for requiring a mixin or accept only a runtime test (triggered from the AbstractButton constructor), which would flag the issue very early on in the subclass development process.

I will explain how I achieved the compile-time error and why defining optional abstract methods in a certain way won't work as expected. The workaround involves setting up the base class without these optional methods and then ensuring that subclasses adhere to at least one of them.

abstract class AbstractButton {
    // This method must always be implemented
    abstract someRequiredMethod(): void;
}

Implementing this requirement solely using `class ___ extends AbstractButton` proved challenging. However, a strategy involving an empty function can generate a type error during compilation if the subclass doesn't implement one of the required methods.

... (remaining text remains unchanged)

Finally: Why do we check [Ctor] against [{ prototype: { ___ } }] instead of directly testing Ctor against { prototype: ____ }? To prevent the generic type argument from being distributed, which would disrupt the tests. Wrapping it in a tuple disables distribution.

In conclusion, although the elaborate method with mapped types serves its purpose, a simpler runtime check within the AbstractButton constructor could serve as a more straightforward alternative, catching issues early in subclass development.

Answer 4

Discovering a method to trigger a compile-time error is possible, but the approach may not be ideal due to its complexity. It might be better to opt for requiring a mixin or accept only a runtime test (triggered from the AbstractButton constructor), which would flag the issue very early on in the subclass development process.

I will explain how I achieved the compile-time error and why defining optional abstract methods in a certain way won't work as expected. The workaround involves setting up the base class without these optional methods and then ensuring that subclasses adhere to at least one of them.

abstract class AbstractButton {
    // This method must always be implemented
    abstract someRequiredMethod(): void;
}

Implementing this requirement solely using `class ___ extends AbstractButton` proved challenging. However, a strategy involving an empty function can generate a type error during compilation if the subclass doesn't implement one of the required methods.

... (remaining text remains unchanged)

Finally: Why do we check [Ctor] against [{ prototype: { ___ } }] instead of directly testing Ctor against { prototype: ____ }? To prevent the generic type argument from being distributed, which would disrupt the tests. Wrapping it in a tuple disables distribution.

In conclusion, although the elaborate method with mapped types serves its purpose, a simpler runtime check within the AbstractButton constructor could serve as a more straightforward alternative, catching issues early in subclass development.

Need at least one of two methods, or both, in an abstract class

Answer №1

Answer №2

Similar questions

Unraveling the intricacies of the relationship between `extends` and function types in TypeScript

How can methods from another class be accessed in a TypeScript constructor?

Using a Component as a Property in Angular

Is it possible to pass additional arguments to setState other than prevState and props?

Empty initial value of a number type input element in React using TSX

How can a child component trigger an event in its parent component?

Passing by value doesn't result in the tree being deleted

Caution in NEXTJS: Make sure the server HTML includes a corresponding <div> within a <div> tag

Is there a way to identify legitimate contacts and phone numbers within an Android application using Javascript or Typescript?

Definition of generic with recursive immutability

The C# private property is inaccessible during a TypeScript callback as it is not contained within the

SolidJS directives utilizing use:___ result in TypeScript errors when used in JSX

Tips for managing server data and dynamically binding values in Ionic 3

"Experiencing issues retrieving user-modified values in NativeScript's TimePicker component

Is it recommended for TypeScript to automatically resolve the index.ts file as the default module file?

What impact does nesting components have on performance and rendering capabilities?

Tips for correctly specifying the theme as a prop in the styled() function of Material UI using TypeScript

Converting Abstract Type Members from Scala to TypeScript: A Handy Snippet

How to Retrieve Observable<Record<string, boolean>> Value with the Help of AsyncPipe

Conceal the header on signup and login pages using Material UI