conditional types for nav item - reactjs

Question

I would like to define my interface so that when you give a nav that is a navigationItem, you can optionally give childs for a dropdown. when the childs property is given I would like to enforce the icon property of the navigationItem.
When no childs property are given the icon property should not be given.
Any idea on how I could achieve that ?
this is my current interface
interface dropdown {
name: string;
href: string;
icon: IconDefinition;
}
interface navigationItem {
name: string;
href: string;
icon: IconDefinition; // only needed if the childs is given
childs?: dropdown[];
}

Answer 1

You should be able to do this using two different Interfaces like this.
Have one with
interface Type1 {
name: string;
href: string;
childs: never;
}
The second one will be
interface Type2 {
name: string;
href: string;
childs: dropdown[];
icon: IconDefinition;
}
Then you can use both the types using a conditional like this
value: Type1 | Type2
Why this works is, when you add icon: never to Type1, you can only have name and href keys.
So if someone adds the childs key, then the type becomes Type2 which needs to have icon given as well.
So, if const a: Type1 | Type2 = { name: '', href: '', childs: [] };, it throws
Type '{ name: string; href: string; childs: []; }' is not assignable to type 'Type1 | Type2'.
Property 'icon' is missing in type '{ name: string; href: string; childs: dropdown[]; }' but required in type 'Type2'.
If you want to use a single type instead, define a new type like this.
type Type3 = Type1 | Type2;
Then use it like this
const a: Type3;