获取方法的第二个参数的类型答案

【问题标题】：Getting type of second param of a method获取方法的第二个参数的类型
【发布时间】：2022-11-01 16:15:38
【问题描述】：

使用 webext-bridge 我可以定义我的听众

// shims.d.ts

declare module 'webext-bridge' {
  export interface ProtocolMap {
    // define message protocol types
    // see https://github.com/antfu/webext-bridge#type-safe-protocols
    'event-name': { helloMessage: string };
  }
}

// code

onMessage('event-name', (message) => {
    // do something strict way
    console.log(message.data.helloMessage); // no ts error
});

我如何定义第二个参数的方法，例如

function onEventName(message: /* How to get message type dynamically here? */) {
    console.log(message.data.helloMessage); // ts not able to get type here
}
onMessage('event-name', onEventName);

【问题讨论】：

标签： typescript

【解决方案1】：

您可以使用infer 创建一个将提取第二个参数类型的泛型类型。

export type SecondArgument<T> = T extends (arg1: any, arg2: infer U, ...args: any[]) => any
  ? U
  : any;

并使用此泛型类型在您的函数中提取和使用第二个参数的类型。

永远不会在这里传递，因为 onMessage 函数需要一个fallback Data type

function onEventName(message: SecondArgument<typeof onMessage<never, 'event-name'>>) {
    console.log(message.data.helloMessage); // ts not able to get type here
}
onMessage('event-name', onEventName);

【讨论】：

不确定它是否适用于您的情况，因为我没有工作示例，但我会尽力提供帮助

【解决方案2】：

它可以定义为：

import { onMessage, ProtocolMap, IBridgeMessage } from 'webext-bridge'

function onEventName(message: IBridgeMessage<ProtocolMap['event-name']>) {
    console.log(message.data.helloMessage); // ts not able to get type here
}
onMessage('event-name', onEventName);

TS play

【讨论】：