props 的 TypeScript 条件类型

Question

我有一个可以处于两种不同状态的组件：编辑模式和查看模式。为了适应这一点，我有一个联合类型来完成这项工作，但我仍然在组件的参数中收到 TypeScript 的抱怨：

type View = {
    isEditing: false;
    viewHandler: () => void;
    someOtherProp: any // this is unique to view mode
};

type Edit = {
    isEditing: true;
    editHandler: (id: string) => void;
};

export type MyProps = View | Edit;

然后它在这里抱怨：

const Item: React.FC<MyProps> = ({
    isEditing = false,
    editHandler,
    ~~~~~~~~~~~
}) => {

Property 'editHandler' does not exist on type 'PropsWithChildren<MyProps>'.

我缺少什么？

Answer 1

所以我现在使用的解决方案是将其添加并输入为never：

type View = {
    isEditing: false;
    viewHandler: () => void;
    editHandler?: never;
};

type Edit = {
    isEditing: true;
    editHandler: (id: string) => void;
    viewHandler?: never;
};

export type MyProps = View | Edit;

在调用或传递事件处理程序时，我使用 a!来确保 TypeScript 这不能是未定义的。感谢纳迪亚在上面的评论中为我指明了正确的方向！