如何合并React组件Props类型定义？根据isEdit值关联obj类型

当然可以合并，通过联合类型结合字面量类型就能实现让obj的类型依赖于isEdit的取值，具体实现如下：

1. 先定义基础类型（假设你已有ICustom类型） #

type ICustom = {
  // 这里是你的自定义类型属性，示例如下
  id: number;
  name: string;
};

2. 合并后的DialogProps类型 #

type DialogProps = 
  | { isEdit: true; obj: ICustom }
  | { isEdit: false; obj: null };

3. 组件使用示例 #

const Dialog = (props: DialogProps) => {
  return (
    <div>
      {props.isEdit ? (
        <p>编辑模式：{props.obj.name}</p>
      ) : (
        <p>非编辑模式</p>
      )}
    </div>
  );
};

// 合法调用
<Dialog isEdit={true} obj={{ id: 1, name: "测试内容" }} />
<Dialog isEdit={false} obj={null} />

// 非法调用（TypeScript会直接报错）
<Dialog isEdit={true} obj={null} />
<Dialog isEdit={false} obj={{ id: 2, name: "错误示例" }} />

这种写法的核心是把isEdit的类型从宽泛的boolean限定为具体的字面量true/false，让TypeScript能根据isEdit的取值自动推断obj的类型，实现两个Prop之间的类型依赖关联。

内容的提问来源于stack exchange，提问作者Victor Mog