如何实现TypeScript中isEdit为true时menuOpenId为number，否则为boolean？

要让isEdit和menuOpenId的类型严格绑定（isEdit为true时menuOpenId必须是number，为false时必须是boolean），可以通过联合类型绑定属性关系或泛型条件类型实现，两种方案如下：

方案一：联合类型（推荐，直观易读） #

直接定义两种状态的props类型并组成联合，TypeScript会自动进行类型窄化：

type IProps = 
  | { isEdit: true; menuOpenId: number }
  | { isEdit: false; menuOpenId: boolean };

function useMenuForm({ isEdit, menuOpenId }: IProps) {
  // 函数内部判断isEdit后，menuOpenId类型自动推断
  if (isEdit) {
    // 此处menuOpenId为number类型
    console.log(menuOpenId.toFixed(2));
  } else {
    // 此处menuOpenId为boolean类型
    console.log(menuOpenId.toString());
  }
}

// 调用示例：类型不匹配会直接报错
useMenuForm({ isEdit: true, menuOpenId: 123 }); // 合法
useMenuForm({ isEdit: false, menuOpenId: false }); // 合法
useMenuForm({ isEdit: true, menuOpenId: false }); // 类型错误

方案二：泛型条件类型 #

通过泛型参数和条件类型动态推导menuOpenId的类型：

type IProps<T extends boolean> = {
  isEdit: T;
  menuOpenId: T extends true ? number : boolean;
};

function useMenuForm<T extends boolean>({ isEdit, menuOpenId }: IProps<T>) {
  if (isEdit) {
    // menuOpenId 推断为number
  } else {
    // menuOpenId 推断为boolean
  }
}

// 调用时可显式指定泛型，也可让TS自动推断
useMenuForm<true>({ isEdit: true, menuOpenId: 456 });
useMenuForm({ isEdit: false, menuOpenId: true });

两种方案都能实现属性间的类型约束，避免出现isEdit为true但menuOpenId传布尔值这类不合法的情况。

内容的提问来源于stack exchange，提问作者Lokesh Bajracharya