querySelector wrapper

[yukulele]

I have a wrapper for document.querySelector():

function qs(selector: string) {
  const elm = document.querySelector(selector)
  if (!elm) throw new Error(`'${sel}' is not in dom`)
  return elm
}

const canvas = qs('canvas')

canvas.getContext('2d')

Of course I get error TS2339: Property 'getContext' does not exist on type 'Element' on last line

Is there a way to make qr() return type depends of the selector argument like querySelector() does?

I tried this:

function qs<T extends Parameters<typeof document.querySelector>[0]>(
  selector: T
): ReturnType<typeof document.querySelector<typeof selector>> {
  return document.querySelector(selector)
}

But I get these errors:

error TS2344 Type 'T' does not satisfy the constraint 'Element'.
error TS2344 Type 'T' does not satisfy the constraint 'HTMLElementTagNameMap'.
error TS2344 Type 'T' does not satisfy the constraint 'SVGElementTagNameMap'.

In others words, I want the variable canvas to be of type HTMLCanvasElement without to have to do:

const canvas = qs('canvas') as HTMLCanvasElement

[JonghwanWon]

hello, @yukulele

I hope this solution help you.

function qs<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
function qs<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
function qs<E extends Element = Element>(selectors: string): E | null;
function qs(selectors: Parameters<typeof document['querySelector']>[0]) {
  const elm = document.querySelector(selectors);
  if (!elm) throw new Error(`'${selectors}' is not in dom.`);
  return elm;
}