Element.closest should return specific types for tag selectors

[thw0rted]

TypeScript Version: 2.4.0

Code

let a = document.querySelectorAll("a");
let div = a.closest("div");

Expected behavior:

a is an HTMLAnchorElement, and div is an HTMLDivElement.

Actual behavior:

el2 is actually an Element because Element.closest always returns an Element. This was fixed for querySelector in #8114 and the same behavior should be applied to closest.

[thw0rted]

Would you look at that, a hack-job cut and paste worked on the first try! I'm running a vanilla-JS project in VSCode but when I put this in my globals.d.ts, it fixed the issue:

declare global {
    interface Element extends Node, GlobalEventHandlers, ElementTraversal, NodeSelector, ChildNode, ParentNode {
        closest<K extends keyof ElementTagNameMap>(selector: K): ElementTagNameMap[K] | null;
    }
}

I copied that verbatim from NodeSelector.querySelector in lib.dom.d.ts. Any reason I shouldn't make a PR for this? (I don't really speak TS yet so I'm not sure if I'm doing something dumb here.)

[thw0rted]

Out of curiosity I searched lib.dom.d.ts for "selector" and the only three places where a method takes a "selector" argument are Element.closest, NodeSelector.querySelector, and NodeSelector.querySelectorAll -- the last 2 already implement "intelligent return types", so this improvement to closest would close the gap.

[mhegazy]

quertySelectorAll returns a NodeList of HTMLAnchorElement, and not an HTMLAnchorElement

[jcready]

@mhegazy I believe that was just a typo. Please re-open this issue.

Code:

let a = document.querySelector("a");
if (!a) throw new Error();
let div = a.closest("div");

Expected behavior:

div is HTMLDivElement | null.

Actual behavior:

div is actually Element | null because Element.closest always returns Element | null. This was fixed for querySelector in #8114 and the same behavior should be applied to closest.

[mhegazy]

PRs welcomed. You can find more information about contributing lib.d.ts fixes at https://github.com/Microsoft/TypeScript/blob/master/CONTRIBUTING.md#contributing-libdts-fixes.

[thw0rted]

Yes, sorry, typo -- I had meant querySelector not querySelectorAll in my example code. Obviously both should return the most specific type possible.

[jthoms1]

Seems like it is missing the following line. I can submit a PR if this seems correct. @mhegazy

closest<K extends keyof ElementTagNameMap>(selector: K): ElementTagNameMap[K] | null;