Typescript feature allowing for the return of objects that adhere to a specified interface using wildcard return types

Question

Typescript feature allowing for the return of objects that adhere to a specified interface using wildcard return types

Within my coding framework, I have developed the following interface within an abstract base class:

interface MyInterface {
   field1: string
}

abstract class BaseClass {
   // some fields here...
   abstract serialize(): Array<MyInterface>
}

As I progress, I find myself creating multiple subclasses that inherit from BaseClass, each with unique additional fields. For example:

class Subclass1 extends BaseClass {
   // some additional fields that are not in BaseClass
   serialize(): Array<MyInterface> {
      return [{field1: "test", field2: "test2"}];
   }
}

At this point, I am seeking the appropriate return type for the serialize function, which should adhere to the idea of:

"return any object that implements MyInterface, including all fields required by MyInterface and possibly more"

While reviewing this setup, I encounter an error in Typescript due to the return type failing to comply with MyInterface. This is logical, as field2 is not part of the interface.

In essence, I believe I require something akin to a Java unbounded wildcard in Typescript, such as:

List<? extends MyInterface>

This signifies any object implementing MyInterface.

typescript typescript-generics

Answer 1

Answer №1

The main issue in your example is the absence of an array being returned.

On the other hand, if you attempt to explicitly return the array:

return [{field1: "test", field2: "test2"}];

You will encounter problems with excess property checks. (more information here).

Excess property checking occurs when assigning object literals to variables or passing them as arguments. If an object literal contains properties not found in the target type, errors will arise.

While it is acceptable to return an object with additional properties that match the return type, generating such objects ad hoc is discouraged by TypeScript because excess properties are deemed unnecessary and inaccessible.

Hence, instead of returning an directly instantiated object with unmatched properties, consider storing the object in an intermediate variable and returning that.

// Avoiding
// excess property checks by using an intermediate value.
const returnValue = [{field1: "test", field2: "test2"}];
return returnValue;

In practice, the data you wish to return likely already exists in a variable or field, making this problem more common in simple test scenarios.

Creating an object of mismatched shape solely for conforming to a narrower interface raises red flags, prompting TypeScript to intervene.

Access Playground Link

Answer 2

The main issue in your example is the absence of an array being returned.

On the other hand, if you attempt to explicitly return the array:

return [{field1: "test", field2: "test2"}];

You will encounter problems with excess property checks. (more information here).

Excess property checking occurs when assigning object literals to variables or passing them as arguments. If an object literal contains properties not found in the target type, errors will arise.

While it is acceptable to return an object with additional properties that match the return type, generating such objects ad hoc is discouraged by TypeScript because excess properties are deemed unnecessary and inaccessible.

Hence, instead of returning an directly instantiated object with unmatched properties, consider storing the object in an intermediate variable and returning that.

// Avoiding
// excess property checks by using an intermediate value.
const returnValue = [{field1: "test", field2: "test2"}];
return returnValue;

In practice, the data you wish to return likely already exists in a variable or field, making this problem more common in simple test scenarios.

Creating an object of mismatched shape solely for conforming to a narrower interface raises red flags, prompting TypeScript to intervene.

Access Playground Link

Answer 3

Answer №2

It appears that the solution lies in intersecting MyInterface with any additional fields you wish to include. By refining methods' return types in subclasses, it ensures that the return type still adheres to the base class.

class Subclass1 extends BaseClass {
   serialize(): Array<MyInterface & { field2: string }> {
      return [{field1: "test", field2: "test2"}]
   }
}

const foo = new Subclass1().serialize()
// (MyInterface & { field2: string })[]

View playground demo

If you prefer BaseClass to enforce this behavior, you can introduce generics and merge the extra props type within the class itself. This approach enhances clarity at the top level of the class regarding the additional data it may handle.

The return type annotation can now be eliminated as it is entirely enforced by BaseClass.

interface MyInterface { field1: string }

abstract class BaseClass<Extra = Record<string, never>> {
   abstract serialize(): Array<MyInterface & Extra>
}

class Subclass1 extends BaseClass<{ field2: string }> {
   serialize() {
      return [{field1: "test", field2: "test2"}]
   }
}

const foo = new Subclass1().serialize()
// { field1: string, field2: string }[]

NOTE: Record<string, never> may seem odd, but it essentially denotes an empty object which serves as a reasonable default for this generic type parameter.

Explore Playground

Answer 4

It appears that the solution lies in intersecting MyInterface with any additional fields you wish to include. By refining methods' return types in subclasses, it ensures that the return type still adheres to the base class.

class Subclass1 extends BaseClass {
   serialize(): Array<MyInterface & { field2: string }> {
      return [{field1: "test", field2: "test2"}]
   }
}

const foo = new Subclass1().serialize()
// (MyInterface & { field2: string })[]

View playground demo

If you prefer BaseClass to enforce this behavior, you can introduce generics and merge the extra props type within the class itself. This approach enhances clarity at the top level of the class regarding the additional data it may handle.

The return type annotation can now be eliminated as it is entirely enforced by BaseClass.

interface MyInterface { field1: string }

abstract class BaseClass<Extra = Record<string, never>> {
   abstract serialize(): Array<MyInterface & Extra>
}

class Subclass1 extends BaseClass<{ field2: string }> {
   serialize() {
      return [{field1: "test", field2: "test2"}]
   }
}

const foo = new Subclass1().serialize()
// { field1: string, field2: string }[]

NOTE: Record<string, never> may seem odd, but it essentially denotes an empty object which serves as a reasonable default for this generic type parameter.

Explore Playground

Typescript feature allowing for the return of objects that adhere to a specified interface using wildcard return types

Answer №1

Answer №2

Similar questions

Issue with accessing undefined property in Angular 2+ using Typescript

What are the steps to implement the `serialport` library in `deno`?

Merging Promises in Typescript

Improved ergonomics for enhancing TypeScript union-narrowing typeguard function

The function is not defined for this.X in TypeScript

How to turn off automatic password suggestions in Chrome and Firefox

Run a function from an alternate element

Beautiful parentheses for Typescript constructors

Matching packages with mismatched @types in Webpack 2: A comprehensive guide

The type 'xxxx' is not compatible with the parameter type 'JSXElementConstructor<never>'

Sharing parameters between pages in Angular IonicPassing parameters between pages within an Angular Ionic application

TypeScript compiler encountering issue with locating immutable.js Map iterator within for of loop

Tips for sending a parameter to an onClick handler function in a component generated using array.map()

How can we implement type guarding for a generic class in TypeScript?

Can the tooltip placement be adjusted in ng-bootstrap when it reaches a specific y-axis point?

Utilizing vue-property-decorator: Customizing the attributes of @Emit

ReactJS Error: The property 'hubConnection' is not defined on type 'JQueryStatic'

Converting nested arrays to objects via JSON transformation

Waiting for asynchronous subscriptions with RxJS Subjects in TypeScript is essential for handling data streams efficiently

Angular 5 experiencing issues with external navigation functionality