TS + React：有条件地使用基于道具的界面

Question

我正在构建一个组件，该组件应该接收称为text的道具或子对象-既不接收，也不接收。

✓允许

<NotificationBar text="Demo"/>
<NotificationBar>Demo</NotificationBar>

✗禁止

<NotificationBar/>
<NotificationBar text="Demo">Demo</NotificationBar>

---

来源

interface IWithChildren {
    children: ReactNode;
    text?: never;
}

interface IWithText {
    text: JSX.Element | string;
    children?: never;
}

type TNotification = (IWithChildren | IWithText);

export const NotificationBar = ({ text, children }: TNotification) => {}

它在TypeScript方面有效，但是当仅使用text prop时，React会发出警告：

<NotificationBar text="Demo"/>

  

元素NotificationBar没有必需的属性子元素

除此之外，它可以正常工作。

我还能如何建立我的React组件的接口，使其与基于给定道具的接口匹配，而不会收到警告？

Answer 1

诀窍是在有条件的接口键上使用never。

https://codesandbox.io/s/admiring-almeida-o4wxj