reactjs - Prop 的 TypeScript 条件类型

Question

我有一个组件可以处于两种不同的状态，编辑模式和查看模式。为了适应这一点，我有一个联合类型来完成这项工作，但我仍然在组件的 args 中收到 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

我认为它也应该出现在您的 View 类型中，如下所示:

type View = {
  isEditing: false;
  editHandler?:(id: string) => void;
};

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