reactjs - TS + React: Sử dụng interface có điều kiện dựa trên props

Tôi đang xây dựng một thành phần mà hoặc nên nhận một prop gọi là text hoặc nhận children - không được cả hai cũng không được cả không.

✓ Cho phép

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

✗ Không cho phép

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

Nguồn

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

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

type TNotification = (IWithChildren | IWithText);

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

Về mặt TypeScript thì nó hoạt động, nhưng React lại đưa ra cảnh báo khi chỉ sử dụng prop text:

<NotificationBar text="Demo"/>

Phần tử NotificationBar không có thuộc tính bắt buộc children

Ngoài ra, nó hoạt động như mong đợi.

Làm thế nào tôi có thể tạo một giao diện cho thành phần React của mình, sao cho khớp với giao diện dựa trên các props được cung cấp, mà không bị cảnh báo?

Câu trả lời #1

Mánh khóe là sử dụng never trên các khóa giao diện có điều kiện.

type VariantA = {
    a: string
    b?: never
}

type VariantB = {
    a?: never
    b: number

}

Bây giờ bạn có thể có { a: 1 } hoặc { b: "test" } nhưng không bao giờ cả hai khóa cùng lúc.