Can I extend part of an Interface in Typescript? [duplicate]

Question

Lets say I have an interface:

// I get this from an external library so I have no control over it
interface Balloon {
  diameter: number;
  color: "red" | "blue" | "green";
}

And I want to create my own interface that looks like this:

interface Shirt {
  size: "m" | "l" | "xl";
  color: "red" | "blue" | "green";
}

My question is whether it is possible to 'take' the color part from Balloon and inject it into Shirt, so I get something like this:

interface Shirt {
  size: "m" | "l" | "xl";
  color: Balloon.color; // I know this is wrong but it is to illustrate what I want to achieve
}

Yes, very simple and elegant solution and very fast response, thank you! — tvanbeek
– tvanbeek, Commented Mar 3, 2021 at 10:57

Mr.Manhattan · Accepted Answer · 2021-03-03 10:39:36Z

0

You could use a base interface:

interface WithColor {
    color: "red" | "blue" | "green";
}

interface Shirt extends WithColor {
  size: "m" | "l" | "xl";
}

Or you could make Color an enum:

enum Color {
    RED = "red",
    BLUE = "blue",
    GREEN = "green",
}

interface Shirt {
  size: "m" | "l" | "xl";
  color: Color;
}

...or even a combination of these two.

while i'd not advise to use types of other interfaces, because that poses a maintainability risk, if you happen to change it on the source interface, this is also a possible way:

interface Shirt {
  size: "m" | "l" | "xl";
  color: "red" | "blue" | "green";
}

interface Balloon {
  size: "m" | "l" | "xl";
  color: Shirt["color"];
}

edited Mar 3, 2021 at 10:39

answered Mar 3, 2021 at 10:32

Mr.Manhattan

5,5543 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roberto Zvjerković Over a year ago

The question was about using property type from an existing interface

Mr.Manhattan Over a year ago

@ritaj while that is true, that would not be a very good idea to do, as it would reduce maintainability. however, i added the requested solution to the answer.

captain-yossarian from Ukraine · Accepted Answer · 2021-03-03 10:49:21Z

0

interface Balloon {
    diameter: number;
    color: "red" | "blue" | "green";
}


type Shirt = {
    size: "m" | "l" | "xl";
} & Pick<Balloon, 'color'>

type Check = Shirt['color'] // "red" | "blue" | "green"

Playground

Here you can find more utility types

answered Mar 3, 2021 at 10:49

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

Collectives™ on Stack Overflow

Can I extend part of an Interface in Typescript? [duplicate]

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related