Merge pull request #1536 from exadel-inc/feat/constructor-type-proposal

feat(esl-core): make this.constructor strictly typed for `ESLBaseElement` and `ESLMixinElement`
exadel-inc · Mar 13, 2023 · f840fbe · f840fbe
2 parents 313ffe0 + 87524f0
commit f840fbe
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 10 deletions.
diff --git a/src/modules/esl-base-element/core/esl-base-element.ts b/src/modules/esl-base-element/core/esl-base-element.ts
@@ -19,14 +19,18 @@ export abstract class ESLBaseElement extends HTMLElement {
   /** Custom element tag name */
   public static is = '';
 
+  // @see https://github.com/Microsoft/TypeScript/issues/3841#issuecomment-337560146
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  override ['constructor']!: typeof ESLBaseElement & Function;
+
   /** Event to indicate component significant state change that may affect other components state */
   @prop('esl:refresh') public REFRESH_EVENT: string;
 
   protected _connected: boolean = false;
 
   protected connectedCallback(): void {
     this._connected = true;
-    this.classList.add((this.constructor as typeof ESLBaseElement).is);
+    this.classList.add(this.constructor.is);
 
     ESLEventUtils.subscribe(this);
   }

diff --git a/src/modules/esl-footnotes/core/esl-note.ts b/src/modules/esl-footnotes/core/esl-note.ts
@@ -127,8 +127,7 @@ export class ESLNote extends ESLBaseElement {
 
   /** Gets attribute value from the closest element with group behavior settings */
   protected getClosestRelatedAttr(attrName: string): string | null {
-    const tagName = (this.constructor as typeof ESLBaseElement).is;
-    const relatedAttrName = `${tagName}-${attrName}`;
+    const relatedAttrName = `${this.constructor.is}-${attrName}`;
     const $closest = this.closest(`[${relatedAttrName}]`);
     return $closest ? $closest.getAttribute(relatedAttrName) : null;
   }

diff --git a/src/modules/esl-mixin-element/ui/esl-mixin-element.ts b/src/modules/esl-mixin-element/ui/esl-mixin-element.ts
@@ -24,6 +24,10 @@ export class ESLMixinElement implements ESLDomElementRelated {
   /** Additional observed attributes */
   static observedAttributes: string[] = [];
 
+  // @see https://github.com/Microsoft/TypeScript/issues/3841#issuecomment-337560146
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  ['constructor']!: typeof ESLMixinElement & Function;
+
   /** Event to indicate component significant state change that may affect other components state */
   @prop('esl:refresh') public REFRESH_EVENT: string;
 
@@ -36,12 +40,12 @@ export class ESLMixinElement implements ESLDomElementRelated {
 
   /** Callback of mixin instance initialization */
   public connectedCallback(): void {
-    const constructor = this.constructor as typeof ESLMixinElement;
-    if (constructor.observedAttributes.length) {
+    const {observedAttributes} = this.constructor;
+    if (observedAttributes.length) {
       this._attr$$ = new MutationObserver(this._onAttrMutation.bind(this));
       this._attr$$.observe(this.$host, {
         attributes: true,
-        attributeFilter: constructor.observedAttributes,
+        attributeFilter: observedAttributes,
         attributeOldValue: true
       });
     }

diff --git a/src/modules/esl-toggleable/core/esl-toggleable.ts b/src/modules/esl-toggleable/core/esl-toggleable.ts
@@ -121,8 +121,7 @@ export class ESLToggleable extends ESLBaseElement {
   protected override connectedCallback(): void {
     super.connectedCallback();
     if (!this.id && !this.noAutoId) {
-      const tag = (this.constructor as typeof ESLToggleable).is;
-      this.id = sequentialUID(tag, tag + '-');
+      this.id = sequentialUID(this.constructor.is, this.constructor.is + '-');
     }
     this.initiallyOpened = this.hasAttribute('open');
     this.setInitialState();

diff --git a/src/modules/esl-trigger/test/esl-trigger.a11y.test.ts b/src/modules/esl-trigger/test/esl-trigger.a11y.test.ts
@@ -1,10 +1,12 @@
 import '../../../polyfills/es5-target-shim';
+
 import {SyntheticEventTarget} from '../../esl-utils/dom/events/target';
 import {ESLEventUtils} from '../../esl-utils/dom/events';
 import {ESLTrigger} from '../core/esl-trigger';
+
 import type {ESLToggleable} from '../../esl-toggleable/core/esl-toggleable';
 
-function createTargetMock(init: Partial<ESLToggleable> = {}): ESLToggleable {
+function createTargetMock(init: any = {}): ESLToggleable {
   const et = new SyntheticEventTarget();
   return Object.assign(et, {
     show: jest.fn(function () {
@@ -16,7 +18,7 @@ function createTargetMock(init: Partial<ESLToggleable> = {}): ESLToggleable {
       ESLEventUtils.dispatch(this, 'esl:hide');
     }),
     open: false
-  }, init) as any;
+  }, init);
 }
 
 describe('esl-trigger a11y attributes test', () => {