官方文档中的Typescript接口语法是什么意思?

Question

我是在Typescript命名空间页面上看到这段代码的。

[snippet1]

export interface Selectors {
select: {
(selector: string): Selection;
(element: EventTarget): Selection;
};
}

我知道这个特殊的例子是关于一个用Javascript实现的外部库的，这个声明使Typescript编译器知道这个库。让我们暂时忽略外部库。如果我要写一个实现Selectors接口的类，这个类会是什么样子?

具体来说，代码片段中的select表示什么-它是具有2个可能签名的重载方法吗?如果我把它写在下面，它的意思是一样的吗?那么为什么把它写成上面的snippet1呢?🤔

[snippet2]

export interface Selectors {
select (selectorOrElement: string | EventTarget): Selection;
}

Answer 1

这是一个重载的方法与2个可能的签名?

是的

如果我写它,如下所示,它的意思是相同的吗?

是的，但是你的方法有两个缺点:

• 当使用智能感知时，参数现在不太精确。selector: string或element: EventTarget可能更有意义。这特别有助于功能有过载(诚然看起来不添加太多这样的玩具例子)
重载允许给定不同参数类型的不同类型的返回值。这个例子可以稍微调整为

export interface Selectors {
select: {
(selector: string): number;
(element: EventTarget): string;
};
}

如果将转换为

，则不会提供那么多类型信息。

export interface Selectors {
select (selectorOrElement: string | EventTarget): number | string;
}

，因为它没有指明哪个参数与哪个返回类型相关联。