React Navigation：如何基于ParamList键为路由数组添加正确类型？

当然可以基于ParamList的键为数组添加严格的类型约束，确保数组中的元素都是合法的路由名称，具体实现如下：

1. 基于ParamList定义路由数组类型 #

利用TypeScript的keyof操作符，直接提取ParamList的所有键作为数组元素的类型：

export type ParamList = {
  Route1: undefined;
  Route2: undefined;
  Route3: undefined;
};

// 定义路由数组的类型，元素只能是ParamList的合法键
type ValidRouteArray = Array<keyof ParamList>;

2. 创建类型安全的路由数组 #

有两种方式可以确保数组元素符合类型要求：

方式一：使用as const结合satisfies（TypeScript 4.9+） #

这种方式既保留数组元素的字面量类型，又能确保元素属于合法路由：

const routes = ['Route1', 'Route2', 'Route3'] as const satisfies ValidRouteArray;

方式二：用工具函数约束输入 #

通过函数参数的类型约束，强制传入的元素必须是ParamList的键：

function createValidRoutes<T extends keyof ParamList>(...routes: T[]) {
  return routes;
}

// 只能传入ParamList中存在的路由名称，传入非法值会触发TS报错
const routes = createValidRoutes('Route1', 'Route2', 'Route3');

3. 验证导航类型安全 #

当你基于这个数组做导航操作时，TypeScript会自动校验路由名称的合法性，比如：

// 假设导航函数的路由参数被约束为keyof ParamList
function navigate(to: keyof ParamList) {
  // 导航逻辑
}

// 遍历数组导航，所有元素都是合法的，不会报错
routes.forEach(route => navigate(route));

这样处理后，数组中的元素完全匹配ParamList的合法路由键，导航功能就能正常工作了。

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