TypeScript中能否基于另一类型实现动态参数类型匹配？

首先，我们需要把页面和参数的对应关系用类型映射明确下来，这比你原来的数组形式更适合TypeScript做类型推导：

// 定义每个页面对应的参数类型
type PageParamsMap = {
  login: { isAuthenticated: boolean };
  register: { isRegistered: boolean };
  dashboard: {}; // 如果dashboard不需要参数，就定义为空对象
};

// 从映射类型自动推导页面列表类型（替代你手动定义的PageList）
type PageList = keyof PageParamsMap;

接下来提供两种可行的实现方式，都能让bodyParam的类型随pageName动态变化，编辑器会自动给出参数提示，无需反复查看类型文件：

方案一：函数重载 #

直接为每个页面编写重载签名，TS会根据传入的pageName自动匹配对应的参数类型：

// 重载签名：每个页面单独定义参数类型
function moveTo(pageName: 'login', bodyParam: PageParamsMap['login']): void;
function moveTo(pageName: 'register', bodyParam: PageParamsMap['register']): void;
function moveTo(pageName: 'dashboard', bodyParam: PageParamsMap['dashboard']): void;

// 通用实现签名
function moveTo(pageName: PageList, bodyParam: PageParamsMap[PageList]): void {
  // 你的业务逻辑代码
}

调用示例：

moveTo('login', { isAuthenticated: true }); // 正确，编辑器自动提示isAuthenticated
moveTo('register', { isRegistered: false }); // 正确
moveTo('dashboard', {}); // 正确
moveTo('login', { isRegistered: false }); // TS报错，类型不匹配

方案二：泛型约束 #

用泛型约束pageName的类型，直接从映射类型中推导对应参数，代码更简洁：

function moveTo<T extends PageList>(pageName: T, bodyParam: PageParamsMap[T]): void {
  // 你的业务逻辑代码
}

调用效果和方案一完全一致，同样会自动推导参数类型，错误参数会直接触发TS报错。

为什么不用数组定义参数？ #

你原来的数组形式不利于TypeScript提取类型关系，用对象映射的方式既直观，又能让TS自动维护页面和参数的对应关系，新增页面时只需要在PageParamsMap里新增一行即可，维护成本更低。

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