如何从Embed类的addEventListener回调参数中提取data类型？

问题 #

我使用的库提供了这样一个TypeScript类：

class Embed {
  // ...
  addEventListener(
    name: "userInterfaceStateChange",
    cb: (data: {
      hiddenElements: string[];
      isFullscreen: boolean;
      isSoftKeyboardVisible: boolean;
    }) => void
  );
  //...
}

我需要把addEventListener监听"userInterfaceStateChange"时，回调函数里data的类型提取出来，做成可复用的CallbackParameter类型，不想手动复制粘贴，这样后续库更新类型时我的代码能同步跟上。

实现方案 #

用TypeScript的内置工具类型组合就能搞定：

分步写法（更易理解） #

1. 先筛选出addEventListener中对应"userInterfaceStateChange"的重载：

type TargetListener = Extract<
  Embed["addEventListener"],
  (name: "userInterfaceStateChange", cb: any) => void
>;

2. 提取该重载里回调函数的参数，取第一个就是data的类型：

type CallbackParameter = Parameters<Parameters<TargetListener>[1]>[0];

合并写法（更简洁） #

把两步合并成一行：

type CallbackParameter = Parameters<
  Extract<Embed["addEventListener"], (name: "userInterfaceStateChange", cb: any) => void>[1]
>[0];

这样定义的CallbackParameter就和手动复制的类型完全等价，而且能自动同步库中的类型变更。

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