如何获取TypeScript参数类型？如何判断事件对象具体子类型？

一、如何获取TypeScript中参数的类型 #

TypeScript提供了内置工具类型和类型语法来提取函数参数的类型，常用两种方式：

1. 使用Parameters工具类型
   针对已定义的函数或对象方法，通过Parameters<typeof 函数名>获取参数类型数组，再通过索引提取单个参数类型。比如你的代码里的a.click方法：

   // 获取a.click第一个参数的类型，结果为ClickEvent
   type ClickEventType = Parameters<typeof a.click>[0];
   

2. 结合infer自定义提取逻辑
   若需要更灵活的提取规则，可通过条件类型配合infer关键字手动提取：

   type GetFirstParam<T> = T extends (arg: infer U) => void ? U : never;
   // 同样得到ClickEvent类型
   type ClickEventType = GetFirstParam<typeof a.click>;
   

二、如何检查event的具体类型（避免类型断言） #

TypeScript是结构类型系统，要区分MouseClickEvent和KeyClickEvent，需要通过运行时类型守卫实现，既保证运行安全，又让TypeScript编译时能正确推断类型：

1. 编写类型守卫函数 #

通过返回event is XxxEvent的类型谓词，告诉TypeScript条件成立时参数的具体类型：

// 判断是否为MouseClickEvent
function isMouseClickEvent(event: ClickEvent): event is MouseClickEvent {
  // 同时检查属性存在性和类型，避免误判
  return 'property1' in event && typeof (event as MouseClickEvent).property1 === 'string';
}

// 判断是否为KeyClickEvent
function isKeyClickEvent(event: ClickEvent): event is KeyClickEvent {
  return 'property2' in event && typeof (event as KeyClickEvent).property2 === 'string';
}

2. 在函数中使用类型守卫 #

修改click方法，通过类型守卫判断后，TypeScript会自动推断event的具体类型，无需手动断言：

const a: A = {
  click: function (event) {
    if (isMouseClickEvent(event)) {
      // 此处event自动推断为MouseClickEvent，可直接访问property1
      console.log(event.property1);
    } else if (isKeyClickEvent(event)) {
      // 此处event自动推断为KeyClickEvent，可直接访问property2
      console.log(event.property2);
    } else {
      // 处理未知类型的ClickEvent
      console.log('未知的点击事件类型');
    }
  }
}

为什么不推荐类型断言 #

直接用event as MouseClickEvent会跳过TypeScript的类型检查，即便传入的event没有property1，编译时也不会报错，运行时可能出现undefined或类型错误。而类型守卫通过运行时检查验证类型，同时让编译时的类型推断更可靠。

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