TypeScript接口select属性语法含义及两种定义方式差异问题

实现该接口的类必须暴露一个名为select的可调用成员，该成员需要支持两种调用方式：

• 传入string类型的选择器字符串时，返回Selection类型结果
• 传入EventTarget类型的DOM对象时，返回Selection类型结果

最小合法实现示例：

class ConcreteSelector implements Selectors {
  // 重载声明
  select(selector: string): Selection;
  select(element: EventTarget): Selection;
  // 实现签名
  select(arg: string | EventTarget): Selection {
    // 内部业务逻辑
    return {} as Selection;
  }
}

这里的select是Selectors接口上定义的一个函数类型属性，它的类型值是一个包含两个独立调用签名的重载函数类型，本质就是拥有两个调用签名的重载成员，只是写法上没有直接在接口层级写方法签名，而是把函数本身的类型单独抽成了一个对象类型结构来描述。

snippet1和snippet2的语义并不完全等价，核心差异如下：

• snippet2是单函数签名设计，参数为联合类型string | EventTarget。TS对这种写法的校验逻辑是“只要传入的参数是联合类型的成员之一即可”，不会根据入参类型做更精细的类型匹配，也无法为不同入参场景关联不同的返回类型，类型收窄精度更低。
• snippet1是标准的重载类型定义，TS会按照重载签名的声明顺序从上到下匹配调用规则：传入字符串时走第一个签名校验，传入EventTarget时走第二个签名校验。这种写法支持为不同入参定义独立的返回值类型、独立的TS注释提示，类型检查的精度更高。

举个扩展场景的差异：如果后续需要让传入字符串时返回ElementSelection，传入DOM对象时返回EventSelection，snippet1只需要修改对应重载的返回值即可实现精准的类型推断，snippet2要么改成重载写法，要么只能返回两个类型的联合，调用后还需要手动做类型收窄。

除此之外，snippet1的写法天然支持给select这个函数本身添加静态属性描述——比如很多JS库的可调用API会附带工具属性（类似select.version = '1.0'、select.util = () => {}），只需要在select对应的类型块里直接加属性声明即可，snippet2的方法签名写法无法直接描述这种“函数+挂载属性”的结构。

这种写法是TS类型声明文件（.d.ts）描述外部JS库的常用写法，核心原因有两个：

1. 更贴合原生JS库的实际形态：很多早期JS库没有TS类型设计，同一个API就是天然支持多种完全不同类型的入参，甚至函数本身还会挂载额外属性，用这种类型字面量的写法可以1:1映射JS的实际结构，不会丢失类型信息。
2. 扩展性更强：不管是后续给不同入参重载不同返回类型，还是给函数本身添加静态属性描述，都不需要改动接口的整体结构，维护成本更低。

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