🤖 Merge PR DefinitelyTyped#71839 [AFRAME] improve types for query selectors and improve DOM type compatibility by @nyan-left

Author: nyan-left

types/aframe/index.d.ts

@@ -32,7 +32,8 @@ export interface ANode extends HTMLElement {
     // attachedCallback
     // attributeChangedCallback
     closestScene(): Scene;
-    closest(selector: string): ANode;
+    closest(selector: `a-${string}`): Entity | null;
+    closest(selector: string): Element | null;
     // detachedCallback
     hasLoaded: boolean;
     load(cb?: () => void, childFilter?: (el: Element) => boolean): void;
@@ -111,7 +112,7 @@ export interface DefaultComponents {
     scale: Component<Coordinate>;
 }
 
-export interface Entity<C = ObjectMap<Component>> extends ANode {
+export interface Entity<C = ObjectMap<any>> extends ANode {
     components: C & DefaultComponents;
     hasLoaded: boolean;
     isPlaying: boolean;
@@ -475,19 +476,11 @@ declare global {
     /**
      * Custom elements augment document methods to return custom HTML
      */
-    interface Document {
-        createElement(tagName: string): Entity;
-        querySelector(selectors: "a-scene"): Scene;
-        querySelector(selectors: string): Entity<any>;
-        querySelectorAll(selectors: string): NodeListOf<Entity<any> | Element>;
+    interface AFrameElements {
+        "a-scene": Scene;
+        [key: `a-${string}`]: Entity;
     }
 
-    interface HTMLCollection extends HTMLCollectionBase {
-        /**
-         * Retrieves a select object or an object from an options collection.
-         */
-        namedItem(name: string): Element | Entity | null;
-        item(index: number): Element | Entity;
-        [index: number]: Element | Entity;
-    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface HTMLElementTagNameMap extends AFrameElements {}
 }

types/aframe/test/aframe-io-tests.ts

@@ -263,8 +263,8 @@ function getRandomColor() {
 }
 
 // set sky values
-sky.setAttribute("color", `#${getRandomColor()}`);
-sky.setAttribute(
+sky?.setAttribute("color", `#${getRandomColor()}`);
+sky?.setAttribute(
     "animation__color",
     `property: color; dir: alternate; dur: 2000; easing: easeInOutSine; loop: true; to: #${getRandomColor()}`,
 );
@@ -329,7 +329,7 @@ function generateAllElements() {
             );
 
             // append element to main container
-            objectContainer.appendChild(rotateContainer);
+            objectContainer?.appendChild(rotateContainer);
         }
     }
 }

types/aframe/test/aframe-tests.ts

@@ -97,7 +97,7 @@ const Component = registerComponent("test-component", {
 
 // Scene
 const scene = document.querySelector("a-scene");
-scene.hasLoaded;
+scene?.hasLoaded;
 
 // System
 
@@ -126,3 +126,18 @@ AFRAME.registerGeometry("a-test-geometry", {
         temp;
     },
 });
+
+// DOM types unaffected
+
+const div = document.createElement("div");
+
+const height: number = div.clientHeight;
+
+const button = document.querySelector<HTMLButtonElement>("button");
+button?.click();
+
+const div2 = document.createElement("div");
+const height2: number = div2.clientHeight;
+
+const button2 = document.querySelector("button");
+button2?.click();