Is it possible for a class that implements an interface to have additional fields not defined in the parent interface?

Question

Is it possible for a class that implements an interface to have additional fields not defined in the parent interface?

Looking at the code snippet below, my aim is to ensure that all classes which implement InterfaceParent must have a method called add that takes an instance of either InterfaceParent or its implementing class as input and returns an instance of InterfaceParent or its implementing class. However, due to the fact that InterfaceChild introduces a new field called randomVariable which is not part of the interface it implements, I encounter the following error message:

    Property 'add' in type 'InterfaceChild' is not assignable to the same property in base type 'InterfaceParent'.
  Type '(n: InterfaceChild) => InterfaceChild' is not assignable to type '(n: InterfaceParent) => InterfaceParent'.
    Types of parameters 'n' and 'n' are incompatible.
      Property 'randomVariable' is missing in type 'InterfaceParent' but required in type 'InterfaceChild'.ts(2416)
InterfaceParentChild.ts(6, 3): 'randomVariable' is declared here.

What seems to be the issue? Here is the code I am currently working with:

interface InterfaceParent {
  add: (n: InterfaceParent) => InterfaceParent
}

class InterfaceChild implements InterfaceParent {
  randomVariable: number = 1

  add = (n: InterfaceChild): InterfaceChild => new InterfaceChild()
}

export default InterfaceChild

typescript

Answer 1

Answer №1

The error message provides a clear explanation:

The type

(n: InterfaceChild) => InterfaceChild

cannot be assigned to the type

(n: InterfaceParent) => InterfaceParent

. The parameters 'n' in both types are incompatible.

Your class InterfaceChild does not correctly implement InterfaceParent because the add function must accept any InterfaceChild as its argument. You are not allowed to impose stricter constraints on inputs when implementing an interface.

However, you can enforce stricter rules for the output type of the function. Therefore, the return type of InterfaceChild is acceptable since all types of InterfaceChild will implement InterfaceParent.

interface InterfaceParent {
  add: (n: InterfaceParent) => InterfaceParent
}

class InterfaceChild implements InterfaceParent {
  randomVariable: number = 1

  add = (n: InterfaceParent): InterfaceChild => new InterfaceChild()
}

export default InterfaceChild

Answer 2

The error message provides a clear explanation:

The type

(n: InterfaceChild) => InterfaceChild

cannot be assigned to the type

(n: InterfaceParent) => InterfaceParent

. The parameters 'n' in both types are incompatible.

Your class InterfaceChild does not correctly implement InterfaceParent because the add function must accept any InterfaceChild as its argument. You are not allowed to impose stricter constraints on inputs when implementing an interface.

However, you can enforce stricter rules for the output type of the function. Therefore, the return type of InterfaceChild is acceptable since all types of InterfaceChild will implement InterfaceParent.

interface InterfaceParent {
  add: (n: InterfaceParent) => InterfaceParent
}

class InterfaceChild implements InterfaceParent {
  randomVariable: number = 1

  add = (n: InterfaceParent): InterfaceChild => new InterfaceChild()
}

export default InterfaceChild

Answer 3

Answer №2

Instead of following Paul's answer, you have the option to utilize Generics in TypeScript to specify which class your method will use as a parameter:

interface InterfaceParent<T extends InterfaceParent<any>> {
  add: (n: T) => T
}

class InterfaceChild implements InterfaceParent<InterfaceChild> {
  randomVariable: number = 1

   add = (n: InterfaceChild) => new InterfaceChild() 
}

In this scenario, a generic T is declared which must extend InterfaceParent, and when implementing it, it's specified that your function will utilize InterfaceChild.

Answer 4

Instead of following Paul's answer, you have the option to utilize Generics in TypeScript to specify which class your method will use as a parameter:

interface InterfaceParent<T extends InterfaceParent<any>> {
  add: (n: T) => T
}

class InterfaceChild implements InterfaceParent<InterfaceChild> {
  randomVariable: number = 1

   add = (n: InterfaceChild) => new InterfaceChild() 
}

In this scenario, a generic T is declared which must extend InterfaceParent, and when implementing it, it's specified that your function will utilize InterfaceChild.

Is it possible for a class that implements an interface to have additional fields not defined in the parent interface?

Answer №1

Answer №2

Similar questions

Develop an extensive Typescript and React shared library

Issue with readonly is preventing the ability to alter the font color of the input

Utilizing AWS Websockets with lambda triggers to bypass incoming messages and instead resend the most recent message received

Setting the "status" of a queue: A step-by-step guide

Utilize Sequelize's cascade feature within your application

Code in Javascript to calculate the number of likes using Typescript/Angular

Remove the Prisma self-referencing relationship (one-to-many)

Getting the id of a single object in a MatTable

The JSX component cannot be utilized as `ToastContainer`

Unable to utilize MUI Dialog within a ReactDOMServer.renderToStaticMarkup() call

Utilizing variables for Protractor command line parameters

Is it possible to designate a Typescript generic type as a tuple with equal length to that of another tuple?

What is the syntax for accessing elements from an iterable?

Guide on validating multiple preselected checkboxes using Angular 8 reactive forms

Creating a TypeScript definition file that exports a class after instantiation

Retrieve the status callback function from the service

Challenges with variable scopes and passing variables in Ionic 2 (Typescript)

Karma Test Requirement: make sure to incorporate either "BrowserAnimationsModule" or "NoopAnimationsModule" when using the synthetic property @transitionMessages within your application

Issue: React cannot render Objects as children (received: [object Promise]). If you intended to display multiple children, please use an array instead. (Next)

Adding Typescript to a Nativescript-Vue project: A step-by-step guide