Completed work on 08

Author: mattpocock

exercises/08-nonNullQuerySelector.exercise.ts

@@ -286,3 +286,48 @@ const bodyElem = document.querySelector("body");
  *
  * Solution #5
  */
+
+/**
+ * 🛠 Add an overload to nonNullQuerySelector which matches
+ * document.querySelector.
+ *
+ * You'll need to use HTMLElementTagNameMap, and you'll need a
+ * generic.
+ *
+ * Docs: https://www.typescriptlang.org/docs/handbook/2/functions.html#function-overloads
+ *
+ * Solution #6
+ *
+ * ✅ Incredibly, the error disappeared.
+ */
+
+/**
+ * 🚁 Hover result:
+ *
+ * const result = nonNullQuerySelector("body");
+ *       ^ 🚁
+ *
+ * The result is HTMLBodyElement! Which means that:
+ *
+ * console.log(e.gamepad);
+ *             ^ 🚁
+ *
+ * e is GamepadEvent! Which, as we know, has the gamepad
+ * property on it.
+ */
+
+/**
+ * 💡 Sometimes, type errors are not as they appear. This one
+ * took us through function overloads, a deep dive into
+ * lib.dom.d.ts, and generics. It turned out that the fix
+ * was in a whole other section than the highlighted error.
+ */
+
+/**
+ * 🕵️‍♂️ Stretch goal 1: Add another overload which uses
+ * SVGElementTagNameMap to handle SVG elements, and test
+ * that it works using:
+ *
+ * const clipPathElement = nonNullQuerySelector('clipPath');
+ *       ^ 🚁 Should be SVGClipPathElement
+ */

exercises/08-nonNullQuerySelector.solutions.ts

@@ -75,4 +75,18 @@
  * widest third overload of document.querySelector, meaning that
  * the elements we return will always be Element, never
  * HTMLBodyElement.
+ *
+ * querySelector<E extends Element = Element>(selectors: string): E | null;
+ *
+ * 💡 In order to overcome this problem, we're going to need to
+ * mirror document.querySelector's overloads with
+ * nonNullQuerySelector. Otherwise, we'll always just trigger
+ * that last overload and our inference won't work.
+ *
+ * #6
+ *
+ * export function nonNullQuerySelector<K extends keyof HTMLElementTagNameMap>(
+ *   tag: K,
+ * ): HTMLElementTagNameMap[K];
+ * export function nonNullQuerySelector(tag: string) {
  */