types: how to get more specific returns than just "Element"?

[coolaj86]

Problem

let input = $("input");
if (!input) {
  throw new Error('no input element selected');
}
input.value = "foo"; // E: Property 'value' does not exist on type 'Element'.

Here's a basic type definition that's unfortunately quite wrong:

/**
 * Select first matching element, just like console $
 * @param {String} cssSelector
 * @param {ParentNode} [$parent=document]
 */
function $(cssSelector, $parent = document) {
  let $child = $parent.querySelector(cssSelector);
  return $child;
}

/**
 * Select all matching child elements as a JS Array, just like console $$
 * @param {String} cssSelector
 * @param {ParentNode} [$parent=document]
 */
function $$(cssSelector, $parent = document) {
  let $children = $parent.querySelectorAll(cssSelector);
  let children = Array.from($children);
  return children;
}