DOM: `Element#matches()` incorrectly narrows types

🔎 Search Terms

element matches narrow never

🕗 Version & Regression Information

• This changed between versions 5.9.3 and 6.0.3

⏯ Playground Link

https://www.typescriptlang.org/play/?ts=6.0.3#code/CYUwxgNghgTiAEEQBd4iQWxAO2QLngAkAVAWQBkBRTHZAbgCgBCdELXAOgymTAAsQAZwAU8AOTBkY+AEp4AMnloanbrwEjxwYNJlA

💻 Code

declare let element: HTMLElement;
!element.matches( 'dt' ) && element.matches( 'dd' )

🙁 Actual behavior

element.matches( 'dd' ) throws a Property 'matches' does not exist on type 'never' compilation error.

🙂 Expected behavior

element.matches( 'dd' ) does not throw any error.

Additional information about the issue

element.matches( 'dt' ) uses the following overload:

matches<K extends keyof HTMLElementTagNameMap>(selectors: K): this is HTMLElementTagNameMap[K];

The return type of element.matches( 'dt' ) is then this is HTMLElementTagNameMap['dt'] that maps to this is HTMLElement.

Since this is HTMLElement:

• When false, the type of element is HTMLElement (not narrowed further).
• When false, the type of element is never.

Beginne mit dem verlinkten TypeScript Playground-Beispiel und untersuche den im Issue gezeigten Element#matches-Overload. Verfolge anschließend, wie das Typprädikat HTMLElement nach einer negierten Prüfung eingrenzt. Das Issue ist abgeschlossen, wenn der zweite Aufruf von element.matches('dd') ohne den Fehler Property 'matches' does not exist on type 'never' kompiliert.