TypeScript中无需函数自动推导React Navigation屏幕泛型类型

要直接为你的screens数组配置正确的TypeScript类型，无需借助辅助函数，可以通过映射联合类型实现，让TypeScript根据每个对象的name字段自动推导对应的页面参数类型：

1. 定义屏幕配置的联合类型 #

基于你的RootStackParamList和RootScreenProps，生成包含所有合法页面配置的联合类型：

type RootScreenConfig = {
  [T in keyof RootStackParamList]: RootScreenProps<T>;
}[keyof RootStackParamList];

这个类型的逻辑是：

• 通过映射类型，把RootStackParamList的每个页面名称（键）映射为对应的RootScreenProps<T>类型
• 再通过[keyof RootStackParamList]提取所有映射结果，形成一个联合类型，每个成员对应一个页面的合法配置结构

2. 为数组指定类型 #

直接将screens数组的类型设为RootScreenConfig[]，TypeScript会自动根据每个元素的name字段匹配对应的具体类型：

const screens: RootScreenConfig[] = [
  {
    name: "HomeTab",
    component: HomeTab
  },
  {
    name: "DetailsScreen",
    component: DetailsScreen,
    options: ({ route }) => ({
      // 现在能正确获取route.params的类型提示
      title: route.params.id ? `Details with ${route.params.id}` : "Details"
    })
  }
];

效果验证 #

• 若name字段值写错，TypeScript会直接抛出类型错误
• 在options函数中，route.params会自动匹配对应页面的参数类型（比如DetailsScreen的params会被推导为{id: string}）
• 所有页面配置的必填项、可选项都会得到严格的类型校验

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