querySelector and querySelectorAll should support generics for "string" selectors

[tomwanzek]

TypeScript Version: 2.2.0-dev.20161129

Code

As of the TS version stated above the NodeSelector in lib.es6.d.ts interface is defined as:

interface NodeSelector {
    querySelector<K extends keyof ElementTagNameMap>(selectors: K): ElementTagNameMap[K] | null;
    querySelector(selectors: string): Element | null;
    querySelectorAll<K extends keyof ElementListTagNameMap>(selectors: K): ElementListTagNameMap[K];
    querySelectorAll(selectors: string): NodeListOf<Element>;
}

Expected behavior:

It should be possible to use a generic to control the return type of the general string-based selection methods, rather than being returned a fixed return type of Element. I.e. assume one uses a class my-svg-shape which one exclusively applies to either an SVG rect or circle.

There should be method signatures to control the return type at the developer's discretion, i.e.

querySelector<E extends Element>(selectors: string): E | null;
querySelectorAll<E extends Element>(selectors: string): NodeListOf<E>;

These would obviously fall back to the current behavior, if used without specifying a type, but could be used as, e.g.

let x = document.querySelectorAll<SVGRectElement | SVGCircleElement>('.my-svg-shape');

Actual behavior:

Return type is fixed to Element

EDIT: Fixed copy-paste typo in application example. Inserted .my-svg-shape as selector string.

[aluanhaddad]

Actually I think this is supposed to work. The purpose of the interface is to enable it to return the correct types as mapped. The problem is that key is not being inferred as a literal.

If you use this definition it works

interface NodeSelector {
    querySelector<K extends string & keyof ElementTagNameMap>(selectors: K): ElementTagNameMap[K] | null;
    querySelector(selectors: string): Element | null;
    querySelectorAll<K extends string & keyof ElementListTagNameMap>(selectors: K): ElementListTagNameMap[K];
    querySelectorAll(selectors: string): NodeListOf<Element>;
}

[tomwanzek]

@aluanhaddad the use case I described, i.e. union types for (possibly) mixed type selection, is not covered by the latest lib.es6.d.ts definitions as far as I see. That's what this issue is aiming to get addressed.

[aluanhaddad]

Sorry I missread the original comment. At the time these declarations were not returning the specific types even for non-unions

[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.

[tomwanzek]

@YuichiNukiyama thanks for tackling this so quickly!

@mhegazy thanks for the link, seems I am too late this time around...

[FranklinWhale]

What is the difference between using generic and type assertion?

let x = document.querySelectorAll('.my-svg-shape') as NodeListOf<SVGRectElement | SVGCircleElement>; seems fine.

[tomwanzek]

@FranklinWhale IMHO as is a last resort when a more targeted approach is not available. It feels a lot more natural to use the generic with extends Element as the base line, the interface already uses generics, so it also seems idiomatically preferable.

[tomwanzek]

Is there any update on whether the PR will be accepted?