Bug报告

🔎 搜索关键词

• liskov
• addEventListener
• overload

🕗 版本与回归信息

• 在我尝试的每个版本中，这种行为都是正常的，我已经查阅了关于所有问题的常见问题解答。我已经检查了完整的常见问题解答。

⏯ Playground链接

带有相关代码的Playground链接

💻 代码

interface FooBarEventMap {
  click: CustomEvent;
}

class FooBarElement extends HTMLElement {

}

interface FooBarElement extends HTMLElement {
  addEventListener<T extends keyof FooBarEventMap>(
    type: T,
    listener: (this: FooBarElement, ev: FooBarEventMap[T]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
}

interface HTMLElementTagNameMap {
    "foo-bar": FooBarElement;
}

let one: NodeListOf<Node> = document.querySelectorAll('foo-bar')!;

one.forEach(el => el.addEventListener('click', null));

let two: NodeListOf<Node> = document.querySelectorAll('div')!;

two.forEach(el => el.addEventListener('click', null));

let three: NodeListOf<FooBarElement> = document.querySelectorAll('foo-bar')!;

three.forEach(el => el.addEventListener('click', null));

let four: NodeListOf<HTMLDivElement> = document.querySelectorAll('div')!;

four.forEach(el => el.addEventListener('click', null));

🙁 实际行为

对于 one 的赋值报告了一个错误。
从技术上讲，这是正确的： FooBarElement 是 HTMLElement 的子类型，而 HTMLElement 又是一个 Node 的子类型。FooBarElement.addEventListener() 不接受 Node.addEventListener() 所接受的所有参数，因此这是一个 LSP 违规。
然而，对于 HTMLDivElement 也是如此。对 two 的赋值被接受，但正如对 four 的赋值所证明的那样，一个 HTMLDivElement 实际上并不接受 null。
当我将 addEventListener 的重载复制到：

interface FooBarElement extends HTMLElement {
  addEventListener<T extends keyof FooBarEventMap>(
    type: T,
    listener: (this: FooBarElement, ev: FooBarEventMap[T]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener<T extends keyof FooBarEventMap>(
    type: T,
    listener: (this: FooBarElement, ev: FooBarEventMap[T]) => any,
    options?: boolean | AddEventListenerOptions,
  ): void;
}

... 这两个重载完全相同。然后对 one 的赋值不再报告为错误。

🙂 预期行为

我不希望看到这种不一致的行为：

• 当将 NodeListOf<Node> 分配给 HTMLDivElement 和 FooBarElement 时，应该报告错误，或者两者都不应该报告错误。
• 添加一个相同的额外重载不应该使错误消失。

其他上下文

实际世界的应用场景是使用具有 strict: true 配置的 tsconfig.json 来消费 WoltLab/d.ts 仓库。
在该仓库中有一个元素具有不兼容的重载：
https://github.com/WoltLab/d.ts/blob/57f923f03e37885885326bbd622d15b554feb9b5/WoltLabSuite/Core/Element/woltlab-core-dialog.d.ts#L40
并且它在 global.d.ts 中的注册位置是：
https://github.com/WoltLab/d.ts/blob/57f923f03e37885885326bbd622d15b554feb9b5/global.d.ts#L122
现在，当尝试编译一个将该仓库作为依赖项的项目时，会报告以下错误：

node_modules/typescript/lib/lib.dom.d.ts:10535:87 - error TS2344: Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Node'.
  Type 'HTMLInputElement | HTMLElement | WoltlabCoreDialogElement | HTMLDialogElement | WoltlabCoreDialogControlElement | ... 66 more ... | HTMLVideoElement' is not assignable to type 'Node'.
    Type 'WoltlabCoreDialogElement' is not assignable to type 'Node'.
      Types of property 'addEventListener' are incompatible.
        Type '<T extends keyof WoltlabCoreDialogEventMap>(type: T, listener: (this: WoltlabCoreDialogElement, ev: WoltlabCoreDialogEventMap[T]) => any, options?: boolean | ... 1 more ... | undefined) => void' is not assignable to type '(type: string, callback: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions | undefined) => void'.
          Types of parameters 'listener' and 'callback' are incompatible.
            Type 'EventListenerOrEventListenerObject | null' is not assignable to type '(this: WoltlabCoreDialogElement, ev: CustomEvent<any> | CustomEvent<ValidateCallback[]>) => any'.
              Type 'null' is not assignable to type '(this: WoltlabCoreDialogElement, ev: CustomEvent<any> | CustomEvent<ValidateCallback[]>) => any'.

10535     querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;