159

Seeking confirmation or clarification

If I have two interfaces. What is the "proper" way to create a merge of those two interfaces?

IFoo {
  // some stuff
}


IBar {
  // some stuff
}


IFooBar extends IFoo, IBar {
 // Empty
}

It works but it feels weird, like I am doing it wrong with the empty IFooBar.

Am I doing this correctly?

I also noticed that this also works:

type IFooBar = IFoo & IBar;

I have an illogical aversion to using type yet, it is much cleaner.

3 Answers 3

285

This article explains the relation between interfaces and type aliases very well, this part is focused on small differences between them.

Both

interface IFooBar extends IFoo, IBar {}

and

type IFooBar = IFoo & IBar;

are common ways to do this and will behave identically in most cases. Since type takes less characters to type, it could be chosen for that reason.

The inconsistency that is caused by mixed interface and type shouldn't be a problem; they are just suitable features to achieve the goal. If const BarClass = FooClass does the job, class BarClass extends FooClass {} shouldn't be preferred just because its consistently uses class everywhere (this example is used for illustrative purposes, there's a considerable difference between these approaches).

Even though interface and type can behave similarly, there is a difference in case of merged interface (also covered in linked article). This will work:

interface FooBar extends IFoo, IBar {}
class FooBar { ... }

And this will cause type error:

type FooBar = IFoo & IBar;
class FooBar { ... }
5
  • 1
    Definitely agree, probably the most immediate thing that initially stands out between intersections and interface extensions is how the types of properties, and especially methods, are merged. Apr 8, 2018 at 23:07
  • The first approach now gives error while compiling, TS 3.4.3 Sep 21, 2019 at 10:24
  • @Musa Which one? Can you provide an example? Sep 21, 2019 at 11:08
  • @EstusFlask I think I made a mistake, they both are still supported, my confusion resulted from below error. ERROR in src/app/pages/requests/details/details.types.ts(82,18): error TS2320: Interface 'IRequestDetailsForm' cannot simultaneously extend types 'IRequestContractPartial' and 'IAVRCSVendor'. Named property 'contractor_license_number' of types 'IRequestContractPartial' and 'IAVRCSVendor' are not identical. Sep 22, 2019 at 3:50
  • 1
    @Musa Yes, it seems that these two interfaces are incompatible. Sep 22, 2019 at 6:19
17

If you're wanting to merge 2 interfaces which contain members more than 1 level deep:

export interface TypeOne  {
  one: {
    two: {
      hello: string;
    }[]
  }
}

export type TypeTwo = {
  one: {
    two: {
      world: string;
    }[]
  }
} & TypeOne;

const x: TypeTwo;
x.one.two[0]. // autocomplete options are 'hello' / 'world'
1
  • Thank you, this is working fine, is there a way for this to be done with interface somehow? Aug 30, 2022 at 7:00
0

I think there it is ok, or not ok relating to what meaning of the merged interface. If IFooBar is a new entity from perspective of object-oriented design, then empty interface is all right. But if there is no such entity, but you want just merge some unrelated interfaces (for some hacky code) - then just use IFoo & IBar in variable type definition, or type for shortening this.

It's just my opinion as programmer, that came from object oriented languages like C++ and C#.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.