导航项的条件类型

Question

我想定义我的界面，以便当您提供作为导航项的导航时，您可以选择为下拉菜单提供子项。当给定 childs 属性时，我想强制执行 navigationItem 的 icon 属性。 当没有给子属性时，不应该给图标属性。

知道如何实现这一目标吗？

这是我当前的界面

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

您应该能够使用两个不同的接口来做到这一点。

有一个

interface Type1 {
    name: string;
    href: string;
    childs: never;
}

第二个是

interface Type2 {
    name: string;
    href: string;
    childs: dropdown[];
    icon: IconDefinition;
}

然后你可以使用这样的条件来使用这两种类型

value: Type1 | Type2

为什么会这样，当您将icon: never 添加到Type1 时，您只能拥有name 和href 键。

因此，如果有人添加了 childs 键，那么类型将变为 Type2，这也需要提供 icon。

所以，如果const a: Type1 | Type2 = { name: '', href: '', childs: [] };，它会抛出

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'.

如果您想改用单一类型，请像这样定义一个新类型。

type Type3 = Type1 | Type2;

那就这样用吧

const a: Type3;