Document Query Selector Typed and Simplified. Ex.: `query<'nav'>('.navigation')`

query.ts

export type IdSelector =
  | `#${string}`
  | `#${string} ${string}`
  | `#${string} > ${string}`
  | `${string}#${string}`;

export type ClassSelector =
  | `.${string}`
  | `.${string} .${string}`
  | `.${string} > .${string}`
  | `${string}.${string}`;

export type AttributeSelector =
  | `[${string}]`
  | `[${string}] ${string}`
  | `[${string}] > ${string}`
  | `${string}[${string}]`;

type Selector = AttributeSelector | ClassSelector | IdSelector;

type ElementType = HTMLElement | SVGElement;

type KeyOfElementMap = keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap;

type ElementTagNameMap<TagOrSelector> =
  TagOrSelector extends keyof HTMLElementTagNameMap
    ? HTMLElementTagNameMap[TagOrSelector]
    : TagOrSelector extends keyof SVGElementTagNameMap
    ? SVGElementTagNameMap[TagOrSelector]
    : TagOrSelector extends Selector
    ? HTMLElement
    : null;

export function query<Tag extends KeyOfElementMap>(
  selector: Tag | Selector,
  parentElement: ElementType = document.body
) {
  return parentElement.querySelector(selector) as ElementTagNameMap<Tag>;
}

export function queryAll<Tag extends KeyOfElementMap>(
  selector: Tag | AttributeSelector | ClassSelector | IdSelector,
  parentElement: ElementType = document.body
) {
  return parentElement.querySelectorAll(selector) as NodeListOf<
    ElementTagNameMap<Tag>
  >;
}