What is the best approach to have a method in the parent class identify the type based on a method in the child class using TypeScript?

Question

What is the best approach to have a method in the parent class identify the type based on a method in the child class using TypeScript?

I'm faced with a code snippet that looks like this.

class Base{
   private getData(): Data | undefined{
        return undefined
   }
   public get output(): Data | undefined {
        return {
             data: this.getData()
        }
   }
}
class A extends Base{
    private getData(){
        return getDatasFromOutside()
    }
    //......
}
class B extends Base{
   //......
}
let x = new A()
let x2 = new B()
x.output.data // I want this to be considered as type Data
x2.output.data // but in this case, it should remain undefined

In the current setup, typescript interprets x.output.data as Data | undefined when it is actually just Data.

Is there a way to correct this issue?

Or would it be more appropriate to avoid having A and B share the same base class altogether?

javascript typescript class

Answer 1

Answer №1

To represent this concept, you can utilize generics in the following way:

abstract class Base {
  public getData(): Data | undefined {
    return undefined
  }
  getOutput<D>(this: {getData(): D}): { data: D } {
    return {
      // ... other outputs
      data: this.getData()
    };
  }
}
class A extends Base {
  public getData(): Data {
    return getDatasFromOutside()
  }
}
let x = new A()
x.getOutput().data // getOutput<Data>(this: A): Data

^(playground)

Nevertheless, there are certain limitations to this approach:

The getData method must be declared as public to be considered part of the type.
The output getter needs to be a method since TypeScript does not support generics or this types on accessor property declarations.

An improved alternative would involve an abstract base class with two different implementations:

abstract class Base<D = undefined> {
  protected abstract getData(): D;
  public get output(): { data: D } {
    return {
      // ... other outputs
      data: this.getData()
    };
  }
}
class A extends Base<undefined> {
  protected getData() {
    return undefined;
  }
}
class B extends Base<Data> {
  protected getData() {
    return getDatasFromOutside()
  }
}
let x = new B()
x.output.data // Data

^(playground)

Answer 2

To represent this concept, you can utilize generics in the following way:

abstract class Base {
  public getData(): Data | undefined {
    return undefined
  }
  getOutput<D>(this: {getData(): D}): { data: D } {
    return {
      // ... other outputs
      data: this.getData()
    };
  }
}
class A extends Base {
  public getData(): Data {
    return getDatasFromOutside()
  }
}
let x = new A()
x.getOutput().data // getOutput<Data>(this: A): Data

^(playground)

Nevertheless, there are certain limitations to this approach:

The getData method must be declared as public to be considered part of the type.
The output getter needs to be a method since TypeScript does not support generics or this types on accessor property declarations.

An improved alternative would involve an abstract base class with two different implementations:

abstract class Base<D = undefined> {
  protected abstract getData(): D;
  public get output(): { data: D } {
    return {
      // ... other outputs
      data: this.getData()
    };
  }
}
class A extends Base<undefined> {
  protected getData() {
    return undefined;
  }
}
class B extends Base<Data> {
  protected getData() {
    return getDatasFromOutside()
  }
}
let x = new B()
x.output.data // Data

^(playground)

Answer 3

Answer №2

To properly define the method, consider declaring it like this:

protected abstract fetchData(): Data;

Within the Primary class, ensure that the result getter always returns a valid Data instead of null.

Answer 4

To properly define the method, consider declaring it like this:

protected abstract fetchData(): Data;

Within the Primary class, ensure that the result getter always returns a valid Data instead of null.

What is the best approach to have a method in the parent class identify the type based on a method in the child class using TypeScript?

Answer №1

Answer №2

Similar questions

What is the best way to handle this unconventional JSON structure?

Ways to incorporate external JavaScript files into a React component

Dealing with multiple occurrences of forward slashes in a URL

Responsive images in CSS3/HTML5 are designed to adapt to different

What are some ways to adjust the size of the option field in a select menu?

Guide to separating the bytes of a number and placing them into an Uint8Array

"Identify the protocol name (string) based on a specific port number in TCP/UDP communication

What is the best way to load a component every time the function is called?

Tips for retrieving user input and displaying it on an HTML page

Limit function parameter types to object keys

Convert the numerical values from an array into an input field format

Consistently encountering incorrect values during onClick events

Turn off choices by utilizing data type attribute values within select2 version 4

Determine the category of a container based on the enclosed function

I am attempting to update the URL of an iframe dynamically, but I am encountering an issue: the Error message stating that an Unsafe value is being

Inconsistent behavior of transform scale() between Chrome and Safari upon page refresh

Update image source dynamically using AJAX and jQuery

The most efficient method for retrieving data in React

Using jQuery to include the value of an array index in the output

Iterating through an array of objects and performing reduction based on various key-value pairs