Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Typescript optionally extending interface

I have two interfaces, one of which extends the other. However, I would like to be able to extend the first interface and make all of its types optional. I don't want to have to rewrite all of the definitions of the first interface to be optional in my second interface (because what's the advantage of extending at that point?) or redefine the first interface because it is being used elsewhere.

What it looks like:

interface First {   type1: string   type2: string }  // Seemingly pointless rewrite (why would I even need to extend?) interface Second extends First {   type1?: string   type2?: string   type3: string   type4: string }  // What I imagine the extending should be (but doesn't work) interface Second extends First? {   type3: string   type4: string } 

I did my research and did find this question that answers something very similar, but it's been a year since that question has been touched and I think my problem is not exactly the same because I want to make the entire extended interface optional, not just a few types from it.

Is there any way to do this in Typescript, or do I just need to suck it up and make a long second interface?


Update (to explain why I'd like to have this work):

I am writing a React web app and have a component that displays an entity from my database in a way that allows the user to edit any value of that entity. I would like my React component to handle the case where the user is creating a new entity, as well as the case where the user is editing an existing entity.

To keep with my above example, let's say that my database entity's values are replicated by the First interface and the React component uses two passed props that exist in the Second interface. The React component will always have the two values in the Second, but not necessarily have the values of the First.

In the case of the user creating a new entity, I'd like to construct the React component with only the values of Second, without having to specify null values for everything in First. In the case of the user editing an existing entity, I would pass everything from First and Second.

In both cases, it would be the same UI, but constructed with a different set of values.

like image 653
Louie Bertoncin Avatar asked May 21 '17 20:05

Louie Bertoncin


People also ask

Can you extend an interface TypeScript?

In TypeScript, interfaces can also extend classes, but only in a way that involves inheritance. When an interface extends a class, the interface includes all class members (public and private), but without the class' implementations.

How do I make all properties in a TypeScript interface optional?

Use the Partial utility type to make all of the properties in a type optional, e.g. const emp: Partial<Employee> = {}; . The Partial utility type constructs a new type with all properties of the provided type set to optional. Copied!

How do you extend an interface?

An interface can extend another interface in the same way that a class can extend another class. The extends keyword is used to extend an interface, and the child interface inherits the methods of the parent interface.

How do I combine two TypeScript interfaces?

To merge two interfaces with TypeScript, we can use extends to extend multiple interfaces. to create the IFooBar that extends IFoo and IBar . This means IFooBar has all the members from both interfaces inside.


1 Answers

You can use type aliases along with an intersection on the Partial type:

type First = {     type1: string;     type2: string; }  type Second = Partial<First> & {     type3: string;     type4: string; } 
like image 139
Nitzan Tomer Avatar answered Oct 05 '22 07:10

Nitzan Tomer