Extending Interfaces in Typescript: Combining Interfaces with Similar Fields

Question

Extending Interfaces in Typescript: Combining Interfaces with Similar Fields

I have encountered an issue where I am attempting to extend two different typescript interfaces, both of which include a classes field that is not compatible.

It seems that Interface 'Props' cannot extend both types '{ classes: Record; innerRef?: ((instance: any) => void) | RefObject | null | undefined; }' and 'TypographyProps' at the same time. The named property 'classes' in these types is not identical.

What approach should I take to extend these interfaces successfully? Should I opt for one over the other, or is it possible to simply rename one of them?

interface Props extends WithStyles<typeof styles>, TypographyProps {
   children: string;
}

typescript typescript-typings

Answer 1

Answer №1

Although it may be a little overdue by about 4 years, I wanted to share my experience just in case anyone else stumbles upon this issue. I found myself diving into numerous stackoverflow threads discussing the same error message as I was trying to achieve the exact same thing. After much searching, I finally stumbled upon a helpful solution using aliases here!

For anyone facing a similar problem, a potential solution could look something like this:

type MultipleTypes = WithStyles<typeof styles> |  TypographyProps;
type Props = MultipleTypes & { children: string };

Answer 2

Although it may be a little overdue by about 4 years, I wanted to share my experience just in case anyone else stumbles upon this issue. I found myself diving into numerous stackoverflow threads discussing the same error message as I was trying to achieve the exact same thing. After much searching, I finally stumbled upon a helpful solution using aliases here!

For anyone facing a similar problem, a potential solution could look something like this:

type MultipleTypes = WithStyles<typeof styles> |  TypographyProps;
type Props = MultipleTypes & { children: string };

Answer 3

Answer №2

If you want to filter out classes of a certain type that are not in line with your interface, you can utilize the Omit<T> function. For example:

interface PageProps extends WithStyles<typeof styles>, Omit<TypographyProps, 'classes'> {
   content: string;
}

Answer 4

If you want to filter out classes of a certain type that are not in line with your interface, you can utilize the Omit<T> function. For example:

interface PageProps extends WithStyles<typeof styles>, Omit<TypographyProps, 'classes'> {
   content: string;
}

Answer 5

Answer №3

One interesting feature that TypeScript offers is the concept of Mixins. This allows you to combine functionality from multiple classes, but it does require defining the properties in multiple places. In the example below, class c implements classes a and b, and you can see how the types need to be defined for both classes.

class a {
    public ax: number
}

class b {
    public bx: string
    public by(): void {
        console.log('by()')
    }
}

class c implements a, b { 
    public ax: number = 123
    public bx: string = 'hello'
    public by: () => void
}

In order to apply the mixin, you need to follow certain steps (as mentioned in the documentation).

applyMixins(c, [a, b])

let myobj = new c()
myobj.by()

According to the documentation:

This process involves copying the properties of each mixin to the target class, so that the properties are properly implemented.

function applyMixins(derivedCtor: any, baseCtors: any[]) {
  baseCtors.forEach(baseCtor => {
    Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
      derivedCtor.prototype[name] = baseCtor.prototype[name]
    });
  });
}

Answer 6

One interesting feature that TypeScript offers is the concept of Mixins. This allows you to combine functionality from multiple classes, but it does require defining the properties in multiple places. In the example below, class c implements classes a and b, and you can see how the types need to be defined for both classes.

class a {
    public ax: number
}

class b {
    public bx: string
    public by(): void {
        console.log('by()')
    }
}

class c implements a, b { 
    public ax: number = 123
    public bx: string = 'hello'
    public by: () => void
}

In order to apply the mixin, you need to follow certain steps (as mentioned in the documentation).

applyMixins(c, [a, b])

let myobj = new c()
myobj.by()

According to the documentation:

This process involves copying the properties of each mixin to the target class, so that the properties are properly implemented.

function applyMixins(derivedCtor: any, baseCtors: any[]) {
  baseCtors.forEach(baseCtor => {
    Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
      derivedCtor.prototype[name] = baseCtor.prototype[name]
    });
  });
}

Extending Interfaces in Typescript: Combining Interfaces with Similar Fields

Answer №1

Answer №2

Answer №3

Similar questions

Issue: Using the command 'typings search' successfully locates a package, however, when attempting to install it using 'typings install', the process fails

No search results found for Mongoose text search query

An issue has occurred: Unable to access the 'seatsavailable' property of an undefined object

Angular child component displaying of table data is not looping properly

The issue with calling a public method from an onchange event triggered by a custom Google Maps control in the Ionic framework has been encountered

`Is there a way to resolve the getStaticProps type issue in Next.js while utilizing InferGetStaticPropsType?`

Encountering the issue: "Property '...' is not found on the type 'typeof "...."'"

React failing to refresh in browser following compiler error when saved

Leverage Typescript to convert string literal types to uppercase

Simulated FTP Connection Setup and Error Event in Node.js using Typescript

Creating a custom data type for the Tanstack table filtering function

Comparing TypeScript's `return;` with `return undefined;`: which is better?

Retrieving attributes from a reactive object in TypeScript

Running the `npm start` command in Angular tends to be quite time-consuming

Leverage the power of angular pipes to effortlessly add new DOM duplicates

Is the regex returning the correct result?

Angular 2 is throwing an error: Unhandled Promise rejection because it cannot find a provider for AuthService. This error is occurring

Using next.js with GraphQL resulted in the following error: "Invariant Violation: Unable to locate the "client" in the context or passed in as an option..."

Creating a loading spinner with the help of an rxjs BehaviorSubject

What could be the cause of this malfunction in the Angular Service?