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.

Comienza con el ejemplo enlazado de TypeScript Playground e inspecciona la sobrecarga de Element#matches mostrada en el issue; después, sigue cómo el predicado de tipo estrecha HTMLElement tras una comprobación negada. El issue está completo cuando la segunda llamada a element.matches('dd') se compila sin el error Property 'matches' does not exist on type 'never'.