TypeScript中基于泛型扩展的可选参数类型推断问题

你需要实现的是根据第一个参数的类型，动态控制第二个参数是否必填，泛型条件类型的写法没法精准满足这个需求，最适配的方案是使用函数重载，直接针对不同参数组合定义明确的调用规则。

修正后的代码 #

enum Dropups {
  LOGIN,
  ALERT,
}

interface AlertDTO {
  title: string;
  onSend: () => void;
}

// 函数重载：定义两种合法的调用签名
function openDropup(type: "ALERT", options: AlertDTO): void;
function openDropup(type: "LOGIN"): void;

// 函数实现：用联合类型兼容所有重载场景
function openDropup(type: keyof typeof Dropups, options?: AlertDTO) {
  // 业务逻辑示例
  switch(type) {
    case "ALERT":
      options.onSend(); // 重载保证此时options一定存在且符合AlertDTO类型
      console.log(`Alert title: ${options.title}`);
      break;
    case "LOGIN":
      console.log("Opening login dropup");
      break;
  }
}

验证调用场景 #

• ✅ openDropup("ALERT", { title: "Hey", onSend: () => {} });
  类型检查正常，第二个参数必填且符合AlertDTO要求
• ❌ openDropup("ALERT");
  触发报错，提示缺少必填的第二个参数，符合预期
• ✅ openDropup("LOGIN");
  无报错，无需传入第二个参数
• ❌ openDropup("LOGIN", undefined);
  触发报错，直接阻止无意义的undefined传入

为什么原来的写法有问题 #

• 第一种泛型必填参数写法：当type为"LOGIN"时，第二个参数类型被推断为undefined，但因为参数是必填的，必须显式传undefined，没法省略
• 改成可选参数后：type为"ALERT"时第二个参数也变成可选，TypeScript不会强制要求传入，违背了必填的业务规则

函数重载能精准定义每种参数组合的合法性，完美匹配你的需求场景。

内容的提问来源于stack exchange，提问作者Alyson Vilela