Improve DOM.create typings (internal-2015)

mapbox · Dec 9, 2024 · e3bc83d · e3bc83d
1 parent 64f660b
commit e3bc83d
Show file tree

Hide file tree

Showing 8 changed files with 4 additions and 11 deletions.
diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts
@@ -56,7 +56,6 @@ class AttributionControl implements IControl {
 
         this._map = map;
         this._container = DOM.create('div', 'mapboxgl-ctrl mapboxgl-ctrl-attrib');
-        // @ts-expect-error - TS2740 - Type 'HTMLElement' is missing the following properties from type 'HTMLButtonElement': disabled, form, formAction, formEnctype, and 15 more.
         this._compactButton = DOM.create('button', 'mapboxgl-ctrl-attrib-button', this._container);
         this._compactButton.type = 'button';
         this._compactButton.addEventListener('click', this._toggleAttribution);

diff --git a/src/ui/control/fullscreen_control.ts b/src/ui/control/fullscreen_control.ts
@@ -77,7 +77,6 @@ class FullscreenControl implements IControl {
     _setupUI() {
         const button = this._fullscreenButton = DOM.create('button', (`mapboxgl-ctrl-fullscreen`), this._controlContainer);
         DOM.create('span', `mapboxgl-ctrl-icon`, button).setAttribute('aria-hidden', 'true');
-        // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'HTMLElement'.
         button.type = 'button';
         this._updateTitle();
         this._fullscreenButton.addEventListener('click', this._onClickFullscreen);

diff --git a/src/ui/control/geolocate_control.ts b/src/ui/control/geolocate_control.ts
@@ -429,7 +429,7 @@ class GeolocateControl extends Evented<GeolocateControlEvents> implements IContr
             return;
         }
         this._container.addEventListener('contextmenu', (e: MouseEvent) => e.preventDefault());
-        this._geolocateButton = DOM.create('button', `mapboxgl-ctrl-geolocate`, this._container) as HTMLButtonElement;
+        this._geolocateButton = DOM.create('button', `mapboxgl-ctrl-geolocate`, this._container);
         DOM.create('span', `mapboxgl-ctrl-icon`, this._geolocateButton).setAttribute('aria-hidden', 'true');
 
         this._geolocateButton.type = 'button';

diff --git a/src/ui/control/logo_control.ts b/src/ui/control/logo_control.ts
@@ -26,11 +26,8 @@ class LogoControl implements IControl {
         this._map = map;
         this._container = DOM.create('div', 'mapboxgl-ctrl');
         const anchor = DOM.create('a', 'mapboxgl-ctrl-logo');
-        // @ts-expect-error - TS2339 - Property 'target' does not exist on type 'HTMLElement'.
         anchor.target = "_blank";
-        // @ts-expect-error - TS2339 - Property 'rel' does not exist on type 'HTMLElement'.
         anchor.rel = "noopener nofollow";
-        // @ts-expect-error - TS2339 - Property 'href' does not exist on type 'HTMLElement'.
         anchor.href = "https://www.mapbox.com/";
         anchor.setAttribute("aria-label", this._map._getUIString('LogoControl.Title'));
         anchor.setAttribute("rel", "noopener nofollow");

diff --git a/src/ui/control/navigation_control.ts b/src/ui/control/navigation_control.ts
@@ -149,7 +149,7 @@ class NavigationControl implements IControl {
     }
 
     _createButton(className: string, fn: (e: Event) => unknown): HTMLButtonElement {
-        const a = DOM.create('button', className, this._container) as HTMLButtonElement;
+        const a = DOM.create('button', className, this._container);
         a.type = 'button';
         a.addEventListener('click', fn);
         return a;

diff --git a/src/ui/map.ts b/src/ui/map.ts
@@ -3914,7 +3914,6 @@ export class Map extends Camera {
         this._detectMissingCSS();
 
         const canvasContainer = this._canvasContainer = DOM.create('div', 'mapboxgl-canvas-container', container);
-        // @ts-expect-error - TS2740 - Type 'HTMLElement' is missing the following properties from type 'HTMLCanvasElement': height, width, captureStream, getContext, and 3 more.
         this._canvas = DOM.create('canvas', 'mapboxgl-canvas', canvasContainer);
 
         if (this._interactive) {

diff --git a/src/ui/popup.ts b/src/ui/popup.ts
@@ -453,7 +453,6 @@ export default class Popup extends Evented<PopupEvents> {
 
         if (this.options.closeButton) {
             const button = this._closeButton = DOM.create('button', 'mapboxgl-popup-close-button', content);
-            // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'HTMLElement'.
             button.type = 'button';
             button.setAttribute('aria-label', 'Close popup');
             button.setAttribute('aria-hidden', 'true');

diff --git a/src/util/dom.ts b/src/util/dom.ts
@@ -2,8 +2,8 @@ import Point from '@mapbox/point-geometry';
 import assert from 'assert';
 
 // refine the return type based on tagName, e.g. 'button' -> HTMLButtonElement
-export function create<T extends string>(tagName: T, className?: string | null, container?: HTMLElement): ReturnType<typeof document.createElement> {
-    const el = document.createElement(tagName);
+export function create<T extends keyof HTMLElementTagNameMap>(tagName: T, className?: string | null, container?: HTMLElement) {
+    const el = document.createElement<T>(tagName);
     if (className !== undefined && className !== null) el.className = className;
     if (container) container.appendChild(el);
     return el;