如何获取webext-bridge中onMessage方法第二个参数的类型？

我使用webext-bridge定义监听器时，已在shims.d.ts中声明协议类型：

// shims.d.ts
declare module 'webext-bridge' {
  export interface ProtocolMap {
    'event-name': { helloMessage: string };
  }
}

写内联回调时，TypeScript能正常识别参数类型：

// 内联回调（无TS错误）
onMessage('event-name', (message) => {
    console.log(message.data.helloMessage);
});

但如果将回调单独抽成函数，TypeScript无法自动识别message的类型：

// 单独定义回调（TS无法识别类型）
function onEventName(message: /* 如何动态获取这里的类型？ */) {
    console.log(message.data.helloMessage);
}
onMessage('event-name', onEventName);

请问如何动态获取该message的类型，让TypeScript正确识别？

你可以借助TypeScript的类型工具，从webext-bridge的内置类型和自定义的ProtocolMap中提取对应事件的回调参数类型，以下是两种实用方法：

方法1：直接推导单个事件的参数类型 #

从webext-bridge导出OnMessageCallback类型，结合ProtocolMap和TypeScript内置的Parameters工具类型提取目标类型：

import type { OnMessageCallback, ProtocolMap } from 'webext-bridge';

// 提取"event-name"对应的回调参数类型
type EventNameMessage = Parameters<OnMessageCallback<ProtocolMap, 'event-name'>>[0];

function onEventName(message: EventNameMessage) {
    console.log(message.data.helloMessage); // TS可正确识别类型
}

onMessage('event-name', onEventName);

方法2：封装通用类型工具（多事件场景适用） #

如果有多个事件需要处理，可以封装一个通用类型工具，快速提取任意事件的参数类型：

import type { OnMessageCallback, ProtocolMap } from 'webext-bridge';

// 通用类型：传入事件名，返回对应回调的参数类型
type MessageForEvent<E extends keyof ProtocolMap> = Parameters<OnMessageCallback<ProtocolMap, E>>[0];

// 使用时指定事件名即可
function onEventName(message: MessageForEvent<'event-name'>) {
    console.log(message.data.helloMessage);
}

onMessage('event-name', onEventName);

原理说明 #

• OnMessageCallback<ProtocolMap, E>是webext-bridge提供的类型，用于绑定指定事件E的回调函数类型
• Parameters<T>是TypeScript内置工具，用于提取函数类型T的参数列表
• 通过[0]取出参数列表的第一个元素，就是我们需要的message类型

通过这种方式抽离回调函数，TypeScript依然能准确识别参数类型，保留完整的类型提示。

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