TypeScript如何从传入参数或默认参数推断类型

要让MenuLink组件的params类型根据fallbackScreen的传入值或默认值自动匹配ParamList中对应类型，同时在指定必填param的页面（比如ResetOrCreatePassword）时触发TS的缺失参数警告，你需要用泛型+条件类型来绑定两个参数的类型关系，具体实现如下：

第一步：修正类型定义与泛型Props #

用泛型参数S关联fallbackScreen和params的类型，同时通过条件类型判断params是否为必填项：

export type ParamList = {
  SignIn: { warningMessage?: string } | undefined;
  ResetOrCreatePassword: { email: string; hasPasswordAssociated: boolean };
};

// 泛型Props，默认泛型参数为'SignIn'对应组件默认值
type MenuLinkProps<S extends keyof ParamList = 'SignIn'> = {
  text: string;
  fallbackScreen?: S;
} & (ParamList[S] extends undefined 
  ? { params?: ParamList[S] }  // 对应param允许undefined时，params设为可选
  : { params: ParamList[S] }); // 对应param不允许undefined时，params设为必填

第二步：实现泛型组件函数 #

在组件函数中指定泛型默认值，并将默认的fallbackScreen断言为泛型类型，确保默认值的类型匹配：

function MenuLink<S extends keyof ParamList = 'SignIn'>({
  fallbackScreen = 'SignIn' as S,
  params,
  ...rest
}: MenuLinkProps<S>) {
  // 组件实现逻辑
}

验证效果 #

现在三个测试案例会得到预期的TS校验结果：

1. ✅ 正常运行（默认fallbackScreen为SignIn，params可选）

MenuLink({ text: "Go to sign in" });

2. ✅ 正常运行（指定ResetOrCreatePassword，params符合类型要求）

MenuLink({
  text: "Reset password",
  fallbackScreen: 'ResetOrCreatePassword', 
  params: {
    email: 'some@email.com',
    hasPasswordAssociated: true
  }
});

3. ❌ TS会警告缺失必填的params参数

MenuLink({
  text: "Create password",
  fallbackScreen: 'ResetOrCreatePassword'
});

原写法的问题分析 #

你原来的写法无法实现需求的核心原因：

• ParamList[keyof typeof fallbackScreen]是错误的类型推导逻辑，typeof fallbackScreen得到的是keyof ParamList的联合类型，最终params会变成所有param类型的混合，无法和具体的fallbackScreen值关联。
• 无法区分不同页面的params是否为必填项，TS无法自动检测缺失的必填参数。

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