Extend interface in types in Typescript

Question

interface IType {
    name: string;
    label: string;
    checked?: boolean;
    disabled?: boolean;
}
interface Category {
    name: string;
    label: string;
    description: string;
}
type Data = Array<{
    name: string;
    label: string;
    description: string;
    types: IType[];
}>;

I have the above type descriptions. If you see the interface Category has same three keys as in type Data. How can I refer the interface Category inside my type Data without duplicating as I am doing above. Please note that I do not want additional key in my type Data.

Thanks

JB Nizet · Accepted Answer · 2019-12-28 15:56:19Z

3

Introduce a named interface for the content of the array, which extends Category:

interface IType {
    name: string;
    label: string;
    checked?: boolean;
    disabled?: boolean;
}
interface Category {
    name: string;
    label: string;
    description: string;
}

interface DataItem extends Category {
    types: IType[];
}

type Data = Array<DataItem>;

answered Dec 28, 2019 at 15:56

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

1 Comment

T.J. Crowder Over a year ago

Definitely this, not least because it makes Data largely unnecessary; the OP could just use DataItem[].

T.J. Crowder · Accepted Answer · 2019-12-28 15:55:04Z

3

The minimal change is to use an intersection type:

type Data = Array<Category & {
// −−−−−−−−−−−−−−−^^^^^^^^^^
    types: IType[];
}>;

Live Example

...but I'd suggest following JB's advice and creating a type for the contents of that array.

I'd also probably shy away from having a Data type at all, but that's a matter of style. If you use a type for the content, you can just use ThatType[] where you're currently using Data.

answered Dec 28, 2019 at 15:55

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

4 Comments

JB Nizet Over a year ago

I was going to ask you if you preferred your solution to mine. Except maybe simplicity, is there any advantage or drawback with your/my suggestion?

T.J. Crowder Over a year ago

@JBNizet - I'm not a TS expert, but for me your solution is better because it means the OP can just use DataItem[] and not even bother with a Data type (unless they prefer it for style reasons). I'm sure both have a place, but without more info, I'd go your way. :-)

JB Nizet Over a year ago

Thanks a lot @T.J. I'm not a TS expert either. I like it a lot more than JavaScript, but its type system is way more complex than anything else I've used.

Raheel Over a year ago

I just wanted to look fancy lol using type. Thanks both solution works.

Collectives™ on Stack Overflow

Extend interface in types in Typescript

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related