基于函数入参的TypeScript条件类型：导航函数返回类型优化

你遇到的核心问题是TypeScript无法自动关联navigationKey和params的对应关系，导致返回类型变成了松散的联合类型。下面提供两种可行的解决方案：

方法1：使用函数重载 #

函数重载可以直接为不同的输入参数指定精准的返回类型，写法直观易读：

// 定义对外可见的重载签名，明确输入与输出的绑定关系
function navigateOptions(currentScreenRoute: 'addGroup', group: GroupEngagement): {
  navigationKey: 'addGroupPeople',
  params: { group: GroupEngagement, inviteCode: string, showGroupCreatedToast: boolean }
};
function navigateOptions(currentScreenRoute: 'addGroupOnboarding', group: GroupEngagement): {
  navigationKey: 'addGroupQR',
  params: { inviteCode: string }
};

// 内部实现签名（仅用于逻辑编写，对外不可见）
function navigateOptions(currentScreenRoute: 'addGroup' | 'addGroupOnboarding', group: GroupEngagement) {
  if (currentScreenRoute === 'addGroup') {
    return {
      navigationKey: 'addGroupPeople' as const,
      params: {
        group,
        inviteCode: group.inviteCode,
        showGroupCreatedToast: true,
      }
    };
  } else {
    return {
      navigationKey: 'addGroupQR' as const,
      params: {
        inviteCode: group.invite_code!,
      }
    };
  }
}

这里用as const将字符串字面量固定，避免被TypeScript拓宽为string类型，确保返回值的类型能被精准识别。

方法2：使用泛型+条件类型 #

如果你倾向于用条件类型实现，可以通过泛型参数绑定输入路由，再用条件类型映射到对应的返回类型：

// 定义条件类型，根据路由参数映射返回类型
type NavigateOptionsReturn<T extends 'addGroup' | 'addGroupOnboarding'> = 
  T extends 'addGroup' 
    ? {
        navigationKey: 'addGroupPeople',
        params: { group: GroupEngagement, inviteCode: string, showGroupCreatedToast: boolean }
      }
    : {
        navigationKey: 'addGroupQR',
        params: { inviteCode: string }
      };

function navigateOptions<T extends 'addGroup' | 'addGroupOnboarding'>(
  currentScreenRoute: T,
  group: GroupEngagement
): NavigateOptionsReturn<T> {
  if (currentScreenRoute === 'addGroup') {
    return {
      navigationKey: 'addGroupPeople' as const,
      params: {
        group,
        inviteCode: group.inviteCode,
        showGroupCreatedToast: true,
      }
    } as NavigateOptionsReturn<T>;
  } else {
    return {
      navigationKey: 'addGroupQR' as const,
      params: {
        inviteCode: group.invite_code!,
      }
    } as NavigateOptionsReturn<T>;
  }
}

这里的条件类型NavigateOptionsReturn会根据泛型T的具体取值，动态返回对应的确定类型。内部返回时需要用类型断言告知TypeScript当前分支的返回值符合泛型对应的类型。

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