some more tweaks to TS

jsconfig.json

···
     "exactOptionalPropertyTypes": true,
     "useUnknownInCatchVariables": false
   },
-  "include": ["*.js", "*.d.ts", "lib/**/*.d.ts"]
+  "include": ["*.js", "*.d.ts", "lib/**/*.d.ts", "test/**/*.js"]
 }

test/ts_test.js

···
+// @ts-nocheck
+
+// "Test suite" for TypeScript checking in $(), $id() and $tag()
+
+function test() {
+
+  let panel = $(document.querySelector('.panel'));  // HTMLElement
+  panel.style.display = 'none';
+
+  /** @type {never} */ let x1 = panel;
+
+  let link = $(document.querySelector('a.more'), HTMLLinkElement);  // HTMLLinkElement
+  link.href = 'about:blank';
+
+  /** @type {never} */ let x2 = link;
+
+  let html = $(document.parentNode);
+
+  /** @type {never} */ let x3 = html;
+
+  document.addEventListener('click', (e) => {
+    let target = $(e.target);  
+    /** @type {never} */ let x4 = target;
+  });
+
+  let text = $(link.innerText);
+
+  /** @type {never} */ let x5 = text;
+
+  let login = $id('login');  // HTMLElement
+  login.remove();
+
+  /** @type {never} */ let x6 = login;
+
+  let loginField = $id('login_field', HTMLInputElement);  // HTMLInputElement
+  loginField.value = '';
+
+  /** @type {never} */ let x7 = loginField;
+
+  let p = $tag('p.details');  // HTMLElement
+  p.innerText = 'About';
+
+  /** @type {never} */ let x8 = p;
+
+  let p2 = $tag('p.details', { text: 'Info' });  // HTMLElement
+  p2.innerText = 'About';
+
+  /** @type {never} */ let x9 = p2;
+
+  let img = $tag('img.icon', HTMLImageElement);  // HTMLImageElement
+  img.loading = 'lazy';
+
+  /** @type {never} */ let x10 = img;
+
+  let img2 = $tag('img.icon', { src: accountAPI.user.avatar }, HTMLImageElement);  // HTMLImageElement
+  img2.loading = 'lazy';
+
+  /** @type {never} */ let x11 = img2;
+
+}

types.d.ts

···
 type json = Record<string, any>;
 
 function $tag(tag: string): HTMLElement;
-function $tag<T>(tag: string, type: new (...args: any[]) => T): T;
+function $tag<T extends HTMLElement>(tag: string, type: new (...args: any[]) => T): T;
 function $tag(tag: string, params: string | object): HTMLElement;
-function $tag<T>(tag: string, params: string | object, type: new (...args: any[]) => T): T;
-
-function $id(id: string): HTMLElement;
-function $id<T>(id: string, type: new (...args: any[]) => T): T;
-
-function $(element: Node | EventTarget | null): HTMLElement;
-function $<T>(element: Node | EventTarget | null, type: new (...args: any[]) => T): T;
+function $tag<T extends HTMLElement>(tag: string, params: string | object, type: new (...args: any[]) => T): T;

utils.js

···
   return /** @type {T} */ (element);
 }
 
+/**
+ * @template {HTMLElement} T
+ * @param {string} name
+ * @param {new (...args: any[]) => T} [type]
+ * @returns {T}
+ */
+
 function $id(name, type) {
-  return (document.getElementById(name));
+  return /** @type {T} */ (document.getElementById(name));
 }
 
 /**
- * @template T
+ * @template {HTMLElement} T
  * @param {Node | EventTarget | null} element
- * @param {new (...args: any[]) => T} type
+ * @param {new (...args: any[]) => T} [type]
  * @returns {T}
  */