List: improve TS typing of decorators (DevExpress#30598)

Signed-off-by: Andrei Kharitonov <[email protected]>
Co-authored-by: EugeniyKiyashko <[email protected]>

Author: pharret31

packages/devextreme/js/__internal/ui/collection/collection_widget.async.ts

@@ -3,7 +3,7 @@ import type { dxElementWrapper } from '@js/core/renderer';
 import type { DeferredObj } from '@js/core/utils/deferred';
 import { Deferred, when } from '@js/core/utils/deferred';
 import type { ItemLike } from '@js/ui/collection/ui.collection_widget.base';
-import type { ItemRenderInfo } from '@ts/ui/collection/collection_widget.base';
+import type { CollectionItemKey, ItemRenderInfo } from '@ts/ui/collection/collection_widget.base';
 import type { CollectionWidgetEditProperties } from '@ts/ui/collection/collection_widget.edit';
 import CollectionWidgetEdit from '@ts/ui/collection/collection_widget.edit';
 
@@ -13,7 +13,7 @@ class CollectionWidgetAsync<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   TItem extends ItemLike = any,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  TKey = any,
+  TKey extends CollectionItemKey = any,
 > extends CollectionWidgetEdit<TProperties, TItem, TKey> {
   _asyncTemplateItemsMap!: Record<string, DeferredObj<unknown>>;
 

packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts

@@ -68,20 +68,22 @@ const FOCUS_LAST = 'last';
 const FOCUS_FIRST = 'first';
 
 export type DataChangeType = 'insert' | 'update' | 'remove';
-export interface CollectionItemInfo<TItem, TIndex = number | { group: number; item: number }> {
+export interface CollectionItemInfo<TItem, TIndex = CollectionItemIndex> {
   readonly itemData: TItem;
   readonly itemElement: HTMLElement;
   readonly itemIndex: TIndex;
 }
 
+export type CollectionItemKey = string | number;
+
 export type ActionArgs<TItem> = CollectionItemInfo<TItem> | {
   cancel?: boolean;
   event?: DxEvent;
   fromIndex?: CollectionItemIndex;
   toIndex?: CollectionItemIndex;
   node?: PublicNode;
 };
-export interface DataChange<TItem = CollectionItem, TKey = number | string> {
+export interface DataChange<TItem = CollectionItem, TKey = CollectionItemKey> {
   key: TKey;
   type: DataChangeType;
   data: TItem;
@@ -117,9 +119,10 @@ export interface CollectionWidgetBaseProperties<
     TComponent extends CollectionWidget<any, TItem, TKey> | any,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     TItem extends ItemLike = any,
-    TKey = string | number,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    TKey extends CollectionItemKey = any,
 > extends CollectionWidgetOptions<TComponent, TItem, TKey> {
-  focusedElement?: dxElementWrapper;
+  focusedElement?: Element | null;
 
   encodeNoDataText?: boolean;
 
@@ -142,7 +145,7 @@ class CollectionWidget<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   TItem extends ItemLike = any,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  TKey = any,
+  TKey extends CollectionItemKey = any,
 > extends Widget<TProperties> {
   private _focusedItemId?: string;
 
@@ -217,6 +220,7 @@ class CollectionWidget<
 
   _enterKeyHandler(e: DxEvent<KeyboardEvent>): void {
     const { focusedElement } = this.option();
+
     const $itemElement = $(focusedElement);
 
     if (!$itemElement.length) {
@@ -404,7 +408,6 @@ class CollectionWidget<
     }
 
     const { focusedElement } = this.option();
-
     const $focusedElement = $(focusedElement);
     if ($focusedElement.length) {
       // NOTE: If focusedElement is set, selection was already processed on its focusing.
@@ -434,7 +437,6 @@ class CollectionWidget<
 
   _getActiveItem(last?: boolean): dxElementWrapper {
     const { focusedElement } = this.option();
-
     const $focusedElement = $(focusedElement);
 
     if ($focusedElement.length) {
@@ -1484,7 +1486,7 @@ class CollectionWidget<
 
   _itemEventHandlerByHandler(
     initiator: dxElementWrapper | Element,
-    handler: () => void,
+    handler: () => unknown,
     actionArgs: ActionArgs<TItem>,
     actionConfig?: ActionConfig,
   ): void {

packages/devextreme/js/__internal/ui/collection/collection_widget.edit.strategy.plain.ts

@@ -1,19 +1,20 @@
 import type { dxElementWrapper } from '@js/core/renderer';
 import type { ItemLike } from '@js/ui/collection/ui.collection_widget.base';
+import type { CollectionItemKey } from '@ts/ui/collection/collection_widget.base';
 import type { CollectionItemIndex } from '@ts/ui/collection/collection_widget.edit.strategy';
 import EditStrategy from '@ts/ui/collection/collection_widget.edit.strategy';
 
 class PlainEditStrategy<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   TItem extends ItemLike = any,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  TKey = any,
+  TKey extends CollectionItemKey = any,
 > extends EditStrategy<TItem, TKey> {
   _getPlainItems(): TItem[] {
     return this._getItems() ?? [];
   }
 
-  getIndexByItemData(itemData: TItem): number {
+  getIndexByItemData(itemData: TItem): CollectionItemIndex {
     const keyOf = this._collectionWidget.keyOf.bind(this._collectionWidget);
     if (keyOf) {
       return this.getIndexByKey(keyOf(itemData));
@@ -61,7 +62,7 @@ class PlainEditStrategy<
     return -1;
   }
 
-  getItemsByKeys(keys: TKey[], items?: TItem[]): TItem[] {
+  getItemsByKeys(keys: TKey[], items: TItem[] | undefined): TItem[] {
     return (items ?? keys).slice() as TItem[];
   }
 
@@ -76,8 +77,8 @@ class PlainEditStrategy<
     items.splice(destinationIndex, 0, movedItemData);
   }
 
-  _isItemIndex(index: number | Element | TItem): boolean {
-    return (typeof index === 'number') && Math.round(index) === index;
+  _isItemIndex(index: CollectionItemIndex): index is CollectionItemIndex {
+    return this._isNormalizedItemIndex(index);
   }
 
   _getNormalizedItemIndex(itemElement: Element): number {

packages/devextreme/js/__internal/ui/collection/collection_widget.edit.strategy.ts

@@ -5,15 +5,21 @@ import $ from '@js/core/renderer';
 import { equalByValue } from '@js/core/utils/common';
 import { isRenderer } from '@js/core/utils/type';
 import type { ItemLike } from '@js/ui/collection/ui.collection_widget.base';
+import type { CollectionItemKey } from '@ts/ui/collection/collection_widget.base';
 import type CollectionWidget from '@ts/ui/collection/collection_widget.edit';
 import type { CollectionWidgetEditProperties } from '@ts/ui/collection/collection_widget.edit';
 
-export type CollectionItemIndex = number | { group: number; item: number };
+export interface CollectionGroupedItemIndex {
+  group: number;
+  item: number;
+}
+
+export type CollectionItemIndex = number | CollectionGroupedItemIndex;
 
 export type EditStrategyComponent<
   TItem extends ItemLike = ItemLike,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  TKey = any,
+  TKey extends CollectionItemKey = any,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 > = Pick<CollectionWidget<CollectionWidgetEditProperties<any, TItem, TKey>, TItem, TKey>,
   'keyOf'
@@ -24,16 +30,15 @@ export type EditStrategyComponent<
   | '_dataController'
 >;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-interface KeysCache<TKey = any> {
+interface KeysCache<TKey = CollectionItemKey> {
   [key: string]: unknown;
   keys?: TKey[];
 }
 class EditStrategy<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   TItem extends ItemLike = any,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  TKey = any,
+  TKey extends CollectionItemKey = any,
 > {
   _collectionWidget!: EditStrategyComponent<TItem, TKey>;
 
@@ -49,7 +54,7 @@ class EditStrategy<
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  getIndexByItemData(value: TItem): number {
+  getIndexByItemData(value: TItem): CollectionItemIndex {
     return Class.abstract();
   }
 
@@ -64,15 +69,15 @@ class EditStrategy<
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  getItemsByKeys(keys: TKey[], items?: TItem[]): TItem[] {
+  getItemsByKeys(keys: TKey[], items: TItem[] | undefined): TItem[] {
     return Class.abstract();
   }
 
   itemsGetter(): TItem[] {
     return Class.abstract();
   }
 
-  getKeyByIndex(index: number): TKey {
+  getKeyByIndex(index: CollectionItemIndex): TKey {
     const resultIndex = this._denormalizeItemIndex(index);
 
     return this.getKeysByItems([this.getItemDataByIndex(resultIndex as number)])[0];
@@ -99,57 +104,61 @@ class EditStrategy<
   }
 
   getNormalizedIndex(
-    value: number | Element | TItem,
+    value: CollectionItemIndex | Element | dxElementWrapper | TItem,
   ): number {
-    if (this._isNormalizedItemIndex(value)) {
-      return value as number;
-    }
-
-    if (this._isItemIndex(value)) {
-      return this._normalizeItemIndex(value as number);
-    }
-
     if (this._isNode(value)) {
       return this._getNormalizedItemIndex(value);
     }
 
-    return this._normalizeItemIndex(this.getIndexByItemData(value as TItem));
-  }
-
-  getIndex(value: number | Element | TItem): CollectionItemIndex {
     if (this._isNormalizedItemIndex(value)) {
-      return this._denormalizeItemIndex(value as number);
+      return value;
     }
 
     if (this._isItemIndex(value)) {
-      return value as number;
+      return this._normalizeItemIndex(value);
     }
 
+    return this._normalizeItemIndex(this.getIndexByItemData(value));
+  }
+
+  getIndex(value: CollectionItemIndex | Element | TItem): CollectionItemIndex {
     if (this._isNode(value)) {
       return this._denormalizeItemIndex(this._getNormalizedItemIndex(value));
     }
 
-    return this.getIndexByItemData(value as TItem);
-  }
-
-  getItemElement(value: Element | number | TItem): dxElementWrapper {
     if (this._isNormalizedItemIndex(value)) {
-      return this._getItemByNormalizedIndex(value as number);
+      return this._denormalizeItemIndex(value);
     }
 
     if (this._isItemIndex(value)) {
-      return this._getItemByNormalizedIndex(this._normalizeItemIndex(value as number));
+      return value;
     }
 
+    return this.getIndexByItemData(value);
+  }
+
+  getItemElement(
+    value: Element | dxElementWrapper | CollectionItemIndex | TItem,
+  ): dxElementWrapper {
     if (this._isNode(value)) {
       return $(value);
     }
 
-    const normalizedItemIndex = this._normalizeItemIndex(this.getIndexByItemData(value as TItem));
+    if (this._isNormalizedItemIndex(value)) {
+      return this._getItemByNormalizedIndex(value);
+    }
+
+    if (this._isItemIndex(value)) {
+      return this._getItemByNormalizedIndex(this._normalizeItemIndex(value));
+    }
+
+    const normalizedItemIndex = this._normalizeItemIndex(this.getIndexByItemData(value));
     return this._getItemByNormalizedIndex(normalizedItemIndex);
   }
 
-  _isNode(el: unknown): el is Element {
+  _isNode(
+    el: CollectionItemIndex | TItem | Element | dxElementWrapper,
+  ): el is Element | dxElementWrapper {
     return domAdapter.isNode(el && isRenderer(el) ? (el as dxElementWrapper).get(0) : el);
   }
 
@@ -167,34 +176,37 @@ class EditStrategy<
     return Class.abstract();
   }
 
-  _isNormalizedItemIndex(index: number | Element | TItem): boolean {
+  _isNormalizedItemIndex(
+    index: CollectionItemIndex | TItem,
+  ): index is number {
     return (typeof index === 'number') && Math.round(index) === index;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _isItemIndex(index: number | Element | TItem): boolean {
+  _isItemIndex(
+    index: CollectionItemIndex | TItem,
+  ): index is CollectionItemIndex {
     return Class.abstract();
   }
 
   _getNormalizedItemIndex(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    value: Element,
+    value: Element | dxElementWrapper,
   ): number {
     return Class.abstract();
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _normalizeItemIndex(index: number): number {
+  _normalizeItemIndex(index: CollectionItemIndex): number {
     return Class.abstract();
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _denormalizeItemIndex(index: number): CollectionItemIndex {
+  _denormalizeItemIndex(index: CollectionItemIndex): CollectionItemIndex {
     return Class.abstract();
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _getItemByNormalizedIndex(index: number): dxElementWrapper {
+  _getItemByNormalizedIndex(index: CollectionItemIndex): dxElementWrapper {
     return Class.abstract();
   }