TS: 6 Techniques For Combining Interfaces and Types

Typescript offers numerous ways of combing interfaces and types together to create a whole new interface based off of two other ones. That sentenced had two redundant thoughts, should have combined it into a one thought. Maybe this short article will help.

Let's say we have these two interfaces to work with:

interface Parent {
  foo: string;
  bar: string;
  baz: string;
}

interface Uncle {
  foo: string;
  peanuts: string;
  peas: string;
}

We want to combine and re-use them in various ways to create new and interesting interfaces. First something simple.

// Here we extend off of Parent
// Then add carrots property to Sibling
interface Sibling extends Parent {
  carrots: string;
}

In Sibling all Parent properties are required, what if I don't want that?

// we can use Partial<> to define Parent properties as all optional
interface Sibling extends Partial<Parent> {
  carrots: string;
}

What if I only want certain properties from Parent in Sibling?

// will only accept foo and bar from Parent
// foo and bar are required props
interface Sibling extends Pick<Parent, 'foo' | 'bar'> {
  carrots: string;
}

One step further, I want those selected properties from Parent to be optional

// lets combine Partial<> and Pick<> together
// foo and bar are now optional inside of Sibling
interface Sibling extends Partial<Pick<Parent, 'foo' | 'bar'>> {
  carrots: string;
}

Now let's flip all this on its head and do the reverse of Pick<> with Omit<>.

// Omit<> does the oposite of Pick<>
// here we define which props to exclude from the interface/type
// only 'baz' is allowed as a prop
type NewParent = Omit<Parent, 'foo' | 'bar'>;

One more and a little bit different, Extract<> will take the similar properties and a new interface with those

// Extract<> will find the commonalities between types
// Only the props shared between two types will be made into a new type
// only 'foo' is allowed as a prop
type LikeType = Extract<keyof Parent, keyof Uncle>

These are a selection of different built-in tools available in Typescript we can make use of to combine and create new interfaces based off of current ones.

Thanks for reading!

Blog

TS: 6 Techniques For Combining Interfaces and Types

ben hultin

Join Our Newsletter. No Spam, Only the good stuff.

Related