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

Incorporate a generic type into a React Functional Component

What is the best way to transpile TypeScript within the Astro framework?

Getting started with installing Bootstrap for your Next.Js Typescript application

Creating an interceptor to customize default repository methods in loopback4

Transforming Excel data into JSON format using ReactJS

Error in hook order occurs when rendering various components

The challenges of dealing with duplicate identifiers caused by nesting npm packages in TypeScript

Implementing validation logic on button click using TypeScript

Having trouble implementing types with typescript in Vue-toastification for vuejs 3

What is the best way to trim a string property of an object within an array?

Guide on deactivating the div in angular using ngClass based on a boolean value

React's memo and/or useCallback functions are not functioning as anticipated

How can I utilize Angular services to transfer a count value to the Component?

Navigate to a different page using the A-g Grid router when a row is

If every single item in an array satisfies a specific condition

Disable all typings within a specified namespace for a specific file

What is the role of the "prepare" function in AWS CDK constructs?

Angular Project: Exploring Classes and Interfaces with and without the Export Keyword

Tips for creating a sequelize transaction in TypeScript

The number entered will be incorporated into the API URL key value by passing the variable from page.html to services.ts