How to extend Typescript interface with two another interfaces and add 'null' to one property

Question

I have two TS interfaces:

interface Alpha { name: string; login: string; amount: string; }

and

interface Beta { id: number; name: string; login: string; amount: string; }

I would like to create the third interface Gamma which extends those two, add new field to it and make amount field can be null as well as a string:

interface Gamma extends Alpha, Beta { targetAmount: string | null, amount: string | null }

Those amount: string | null is not possible to do without extra actions. I've find a few answers here, but they are about extending types or 'nulling' all properties.

T.J. Crowder · Accepted Answer · 2022-03-19 13:42:52Z

15

You can create a type that combines Alpha and Beta (an intersection type) omitting amount via the Omit utility type, then either extend that using interface syntax or add targetAmount and amount via intersection:

interface Gamma extends Omit<Alpha & Beta, "amount"> {
    targetAmount: string | null;
    amount: string | null;
};

Playground link

Or with type using an intersection instead:

type Gamma = Omit<Alpha & Beta, "amount"> & {
    targetAmount: string | null;
    amount: string | null;
};

Playground link

Either way, Gamma's amount ends up as string | null.

For what it's worth, here are some sections of the handbook contrasting interfaces and type aliases, and extending vs. intersection:

edited Mar 19, 2022 at 13:42

answered Mar 19, 2022 at 13:18

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

TwittorDrive Over a year ago

Exactly! It works for me, thanks.

DarioRega Over a year ago

this answers deserve more upvotes, clean and simple explication ! Thank you

Collectives™ on Stack Overflow

How to extend Typescript interface with two another interfaces and add 'null' to one property

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related