types update

src/dc-base-component.ts

@@ -1,10 +1,10 @@
 import {
     getElementOptions,
-    getElementRefs, ReferencesCollection,
+    getElementRefs, IDCRefsCollection,
 } from './dc-dom';
 
 /**
- * @typedef {Object.<string, {(HTMLElement|HTMLElement[]|Object.<string, HTMLElement>)}>} ReferencesCollection
+ * @typedef {Object.<string, {(HTMLElement|HTMLElement[]|Object.<string, HTMLElement>)}>} IDCRefsCollection
  */
 
 /**
@@ -47,16 +47,19 @@ interface DcListener {
  * @implements {DcBaseComponent}
  */
 
+type IDCOptions = {
+    [key in string | number]: any;
+};
 
-class DcBaseComponent {
-    public readonly element: HTMLElement;
+class DcBaseComponent<Root extends HTMLElement = HTMLElement, Options extends (IDCOptions | void) = void, Refs extends (IDCRefsCollection | void) = void> {
+    public readonly element: Root;
     private _listenersList: DcListener[] = [];
-    protected readonly options: object;
-    protected readonly refs: ReferencesCollection;
+    protected readonly options: Options;
+    protected readonly refs: Refs;
     public static namespace: string = '';
     public static requiredRefs: string[] = [];
 
-    public constructor(element: HTMLElement, namespace: string, requiredRefs: string[]) {
+    public constructor(element: Root, namespace: string, requiredRefs: string[]) {
         Object.freeze(this.addListener);
         Object.freeze(this.destroy);
         /**
@@ -69,12 +72,12 @@ class DcBaseComponent {
          * Store an object with any data/settings which is provided by backend side
          * @type {Object}
          */
-        this.options = getElementOptions(element, namespace);
+        this.options = getElementOptions<Options>(element, namespace);
 
         /**
-         * @type {ReferencesCollection}
+         * @type {IDCRefsCollection}
          */
-        this.refs = getElementRefs(
+        this.refs = getElementRefs<Refs>(
             element,
             namespace,
         );
@@ -84,7 +87,7 @@ class DcBaseComponent {
 
     private _checkRequiredRefs = (refs: string[], namespace: string): void => {
         refs.forEach(name => {
-            if (!this.refs[name]) {
+            if (!(this.refs as IDCRefsCollection)[name]) {
                 throw new Error(
                     `required ref "${name}" not found in ${namespace}`
                 );

src/dc-dom.ts

@@ -74,22 +74,22 @@ const isElementWithinLazyParent = (element: HTMLElement): boolean => {
 /**
  * @param {HTMLElement} element
  * @param {string} namespace
- * @return {ReferencesCollection}
+ * @return {IDCRefsCollection}
  */
 
-interface ReferencesCollection {
+interface IDCRefsCollection {
     [key: string]: HTMLElement | HTMLElement[] | {
         [_key: string]: HTMLElement
     };
 }
 
-const getElementRefs = (element: HTMLElement, namespace: string): ReferencesCollection => {
+const getElementRefs = <T extends (IDCRefsCollection | void)>(element: HTMLElement, namespace: string): T => {
     const refAttribute = `${DC_NAMESPACE}-${namespace}-${DC_NAMESPACED_ATTRIBUTE_REFERENCE}`;
     const refSelector = `[${refAttribute}]`;
     const componentSelector = `[${getNamespacedAnchorAttribute(namespace)}]`;
     const nestedComponents = scopedQuerySelectorAll(element, componentSelector);
 
-    const refs: ReferencesCollection = {};
+    const refs: IDCRefsCollection = {};
     scopedQuerySelectorAll(element, refSelector)
         ?.filter((ref) => !nestedComponents.some((nested) => nested.contains(ref)))
         ?.forEach((ref) => {
@@ -116,7 +116,7 @@ const getElementRefs = (element: HTMLElement, namespace: string): ReferencesColl
             }
         });
 
-    return refs;
+    return refs as T;
 };
 
 /**
@@ -125,7 +125,7 @@ const getElementRefs = (element: HTMLElement, namespace: string): ReferencesColl
  * @return {?Object}
  */
 
-const getElementOptions = (element: HTMLElement, namespace: string) => {
+const getElementOptions = <T>(element: HTMLElement, namespace: string): T => {
     const attribute = getNamespacedAnchorAttribute(namespace);
     let result = {};
     const attributeValue = element.getAttribute(attribute);
@@ -138,19 +138,19 @@ const getElementOptions = (element: HTMLElement, namespace: string) => {
         }
     }
 
-    return result;
+    return result as T;
 };
 
 const getNamespacedAnchorAttribute = (namespace: string): string => {
     return `${DC_NAMESPACE}-${namespace}`;
 };
 
 export {
-    ReferencesCollection,
     scopedQuerySelectorAll,
     getElementRefs,
     findElementsForInit,
     isElementWithinLazyParent,
     matches,
     getElementOptions,
+    IDCRefsCollection,
 };

src/dc-factory.ts

@@ -1,5 +1,5 @@
 import { findElementsForInit, isElementWithinLazyParent } from './dc-dom';
-import { DcBaseComponent } from 'src/dc-base-component'
+import { DcBaseComponent } from './dc-base-component'
 import { states } from "./enums";
 
 interface StatedComponent {

src/index.ts

@@ -1,5 +1,6 @@
 import { DcBaseComponent } from './dc-base-component';
 import { dcFactory } from './dc-factory';
 import { dcAsync } from './dc-async';
+import { IDCRefsCollection } from './dc-dom';
 
-export { DcBaseComponent, dcFactory, dcAsync };
+export { DcBaseComponent, dcFactory, dcAsync, IDCRefsCollection };