RN+TS场景下，如何创建带智能提示的多签名函数映射？

核心问题 #

你当前用Function作为navigationMap的值类型，导致TypeScript无法识别每个屏幕对应函数的具体参数，自然无法提供智能提示。解决方案是为navigationMap定义精准的类型映射，让TypeScript能关联每个屏幕名称与对应函数的参数结构。

方案一：手动定义精准的类型映射 #

1. 先明确每个屏幕对应的处理函数类型

// 假设你的StackScreens是如下联合类型
type StackScreens = "Login" | "Ban" | "Note";

// 定义与屏幕一一对应的处理函数类型映射
type ScreenHandlerMap = {
  Login: (nav: Navigation, action: "withGmail" | "withMail") => void;
  Ban: (nav: Navigation) => void;
  Note: () => void;
};

2. 为navigationMap指定该类型

private handleLogin = (nav: Navigation, action: "withGmail" | "withMail") => {
  // ...你的登录逻辑
};

private handleBan = (nav: Navigation) => {
  // ...你的封禁逻辑
};

public navigationMap: ScreenHandlerMap = {
  Login: this.handleLogin,
  Ban: this.handleBan,
  Note: () => {},
  // 补充其他屏幕的处理函数
};

3. 组件中调用时的类型适配
   在组件中获取处理函数时，确保屏幕名称与navigationMap的键类型匹配，TypeScript会自动推导参数：

// 断言当前路由名称为navigationMap的有效键
const screenName = props.route.name as keyof typeof flowManager.navigationMap;
const onNavigate = flowManager.navigationMap[screenName];

// 调用时自动提示对应参数：
// 若当前是Login页面，需传入nav和action
onNavigate(navigation, "withGmail");
// 若当前是Ban页面，仅需传入nav
onNavigate(navigation);

方案二：自动推导类型（无需手动维护映射） #

如果你不想手动维护ScreenHandlerMap，可以用as const让TypeScript自动保留每个函数的精准类型：

private handleLogin = (nav: Navigation, action: "withGmail" | "withMail") => {
  // ...你的登录逻辑
};

private handleBan = (nav: Navigation) => {
  // ...你的封禁逻辑
};

// 用as const断言让TypeScript记住每个函数的具体参数
private readonly handlers = {
  Login: this.handleLogin,
  Ban: this.handleBan,
  Note: () => {},
  // 补充其他屏幕处理函数
} as const;

// navigationMap直接复用自动推导的类型
public navigationMap = this.handlers;

这种方式下，TypeScript会自动关联每个屏幕名称与对应函数的参数结构，调用时同样能获得精准的智能提示。

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