TypeScript如何在参数类型为undefined时将其设为可选

我们需要实现一个导航函数，要求：

• 不同页面对应固定类型的参数，传入错误参数时TypeScript自动报错
• 当页面参数类型为undefined时，允许只传页面名称，无需显式传undefined
• 其他必须传参数的页面，不能省略参数

直接给params加?会导致所有页面都能省略参数，显然不符合要求。

解决方案1：利用函数重载区分两种路由场景 #

通过定义两个函数重载，分别处理需要参数和无需参数的路由：

type RouteParamMapping1 = {
  Page1: string;
  Page2: number;
};

type RouteParamMapping2 = {
  Page3: boolean;
  Page4: string[];
  Page5: undefined;
};

type AllRouteParamMapping = RouteParamMapping1 & RouteParamMapping2;

// 重载1：仅允许参数类型为undefined的路由调用，无需传params
function navigate<K extends keyof AllRouteParamMapping>(
  name: K,
): AllRouteParamMapping[K] extends undefined ? void : never;

// 重载2：强制要求需要参数的路由传入对应类型的params
function navigate<K extends keyof AllRouteParamMapping>(
  name: K,
  params: AllRouteParamMapping[K],
): void;

// 函数实现（兼容两种重载场景）
function navigate<K extends keyof AllRouteParamMapping>(
  name: K,
  params?: AllRouteParamMapping[K],
) {
  console.log(name, params);
}

// 符合预期的调用
navigate('Page1', 'Joe'); // ✅ 正常
navigate('Page2', 20); // ✅ 正常
navigate('Page3', true); // ✅ 正常
navigate('Page4', ['a', 'b', 'c']); // ✅ 正常
navigate('Page5'); // ✅ 现在可以直接调用，无需传参数

// 以下调用会触发TypeScript错误（符合预期）
// navigate('Page1'); ❌ 必须传string类型参数
// navigate('Page2'); ❌ 必须传number类型参数
// navigate('Page3'); ❌ 必须传boolean类型参数
// navigate('Page4'); ❌ 必须传string[]类型参数

原理说明 #

• 第一个重载通过条件约束AllRouteParamMapping[K] extends undefined，仅对无需参数的路由开放，其他路由调用此重载会返回never触发类型错误
• 第二个重载强制要求传入对应类型的参数，确保需要参数的页面不能省略
• 函数实现里的params用?是为了兼容两种重载场景，但类型检查由前面的重载严格控制，不会出现参数滥用的情况

解决方案2：用条件类型构造参数元组 #

如果不想用重载，也可以通过条件类型动态生成函数的参数列表：

type RouteParamMapping1 = {
  Page1: string;
  Page2: number;
};

type RouteParamMapping2 = {
  Page3: boolean;
  Page4: string[];
  Page5: undefined;
};

type AllRouteParamMapping = RouteParamMapping1 & RouteParamMapping2;

// 根据路由参数类型，动态生成参数元组
type NavigateParams<K extends keyof AllRouteParamMapping> = 
  AllRouteParamMapping[K] extends undefined 
    ? [name: K] 
    : [name: K, params: AllRouteParamMapping[K]];

function navigate<K extends keyof AllRouteParamMapping>(
  ...args: NavigateParams<K>
) {
  const [name, params] = args;
  console.log(name, params);
}

// 同样可以达到预期效果
navigate('Page5'); // ✅ 正常
navigate('Page1', 'Joe'); // ✅ 正常
// navigate('Page1'); ❌ 类型错误

这种方式通过元组类型的条件判断，直接控制函数接收的参数数量和类型，同样能精准实现需求。

内容的提问来源于stack exchange，提问作者Pranav Deshpande