Collection: improve typing for edit, live_update strategies (DevExpress#30278)

Author: EugeniyKiyashko

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

@@ -72,6 +72,7 @@ export interface DataChange<TItem = CollectionItem, TKey = number | string> {
   key: TKey;
   type: DataChangeType;
   data: DeepPartial<TItem>;
+  index: number;
 }
 
 type ItemTemplate<TItem> = template | (
@@ -99,8 +100,7 @@ export interface CollectionWidgetBaseProperties<
     TComponent extends CollectionWidget<any, TItem, TKey> | any,
     // 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 = string | number,
 > extends CollectionWidgetOptions<TComponent, TItem, TKey> {
   focusedElement?: dxElementWrapper;
 
@@ -1405,7 +1405,7 @@ class CollectionWidget<
     initiator: dxElementWrapper | Element,
     handler: () => void,
     actionArgs: Record<string, unknown>,
-    actionConfig: ActionConfig,
+    actionConfig?: ActionConfig,
   ): void {
     const action = this._createAction(handler, extend({
       validatingTargetName: 'itemElement',
@@ -1437,8 +1437,7 @@ class CollectionWidget<
   }
 
   _getItemData(itemElement: Element | dxElementWrapper): TItem {
-    // @ts-expect-error ts-error
-    return $(itemElement).data(this._itemDataKey());
+    return $(itemElement).data(this._itemDataKey()) as TItem;
   }
 
   _getSummaryItemsSize(

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

@@ -1,12 +1,14 @@
 import type { dxElementWrapper } from '@js/core/renderer';
-import type { CollectionWidgetItem } from '@js/ui/collection/ui.collection_widget.base';
+import type { ItemLike } from '@js/ui/collection/ui.collection_widget.base';
 import type { CollectionItemIndex } from '@ts/ui/collection/m_collection_widget.edit.strategy';
 import EditStrategy from '@ts/ui/collection/m_collection_widget.edit.strategy';
 
 class PlainEditStrategy<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  TItem extends CollectionWidgetItem = any,
-> extends EditStrategy<TItem> {
+  TItem extends ItemLike = any,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  TKey = any,
+> extends EditStrategy<TItem, TKey> {
   _getPlainItems(): TItem[] {
     return this._getItems() ?? [];
   }
@@ -31,16 +33,16 @@ class PlainEditStrategy<
     return this._getPlainItems();
   }
 
-  getKeysByItems(items: TItem[]): (string | number)[] {
+  getKeysByItems(items: TItem[]): TKey[] {
     const keyOf = this._collectionWidget.keyOf.bind(this._collectionWidget);
-    let result: (string | number | TItem)[] = items;
+    let result: (TKey | TItem)[] = items;
     if (keyOf) {
-      result = items.map((item) => keyOf(item) as string | number);
+      result = items.map((item) => keyOf(item));
     }
-    return result as (string | number)[];
+    return result as TKey[];
   }
 
-  getIndexByKey(key: string | number): number {
+  getIndexByKey(key: TKey): number {
     const cache = this._cache;
     const keys = cache?.keys ?? this.getKeysByItems(this._getPlainItems());
 
@@ -60,7 +62,7 @@ class PlainEditStrategy<
   }
 
   // eslint-disable-next-line class-methods-use-this
-  getItemsByKeys(keys: (string | number)[], items?: TItem[]): TItem[] {
+  getItemsByKeys(keys: TKey[], items?: TItem[]): TItem[] {
     return (items ?? keys).slice() as TItem[];
   }
 
@@ -99,7 +101,7 @@ class PlainEditStrategy<
   }
 
   _getItemByNormalizedIndex(index: number): dxElementWrapper {
-    // @ts-expect-error - eq() can return null but we handle it appropriately
+    // @ts-expect-error ts-error
     return index > -1 ? this._collectionWidget._itemElements().eq(index) : null;
   }
 

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

@@ -4,16 +4,18 @@ import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { equalByValue } from '@js/core/utils/common';
 import { isRenderer } from '@js/core/utils/type';
-import type { CollectionWidgetItem } from '@js/ui/collection/ui.collection_widget.base';
+import type { ItemLike } from '@js/ui/collection/ui.collection_widget.base';
 import type CollectionWidget from '@ts/ui/collection/m_collection_widget.edit';
 import type { CollectionWidgetEditProperties } from '@ts/ui/collection/m_collection_widget.edit';
 
 export type CollectionItemIndex = number | { group: number; item: number };
 
 export type EditStrategyComponent<
-  TItem extends CollectionWidgetItem = CollectionWidgetItem,
+  TItem extends ItemLike = ItemLike,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  TKey = any,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-> = Pick<CollectionWidget<CollectionWidgetEditProperties<any, TItem>, TItem>,
+> = Pick<CollectionWidget<CollectionWidgetEditProperties<any, TItem, TKey>, TItem, TKey>,
   'keyOf'
   | '_isKeySpecified'
   | '_itemElements'
@@ -22,19 +24,22 @@ export type EditStrategyComponent<
   | '_dataController'
 >;
 
-interface KeysCache {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+interface KeysCache<TKey = any> {
   [key: string]: unknown;
-  keys?: (string | number)[];
+  keys?: TKey[];
 }
 class EditStrategy<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  TItem extends CollectionWidgetItem = any,
+  TItem extends ItemLike = any,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  TKey = any,
 > {
-  _collectionWidget!: EditStrategyComponent<TItem>;
+  _collectionWidget!: EditStrategyComponent<TItem, TKey>;
 
-  _cache?: KeysCache | null;
+  _cache?: KeysCache<TKey> | null;
 
-  constructor(collectionWidget: EditStrategyComponent<TItem>) {
+  constructor(collectionWidget: EditStrategyComponent<TItem, TKey>) {
     this._collectionWidget = collectionWidget;
   }
 
@@ -54,12 +59,12 @@ class EditStrategy<
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, class-methods-use-this
-  getKeysByItems(items: TItem[]): (string | number)[] {
+  getKeysByItems(items: TItem[]): TKey[] {
     return Class.abstract();
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, class-methods-use-this
-  getItemsByKeys(keys: (string | number)[], items?: TItem[]): TItem[] {
+  getItemsByKeys(keys: TKey[], items?: TItem[]): TItem[] {
     return Class.abstract();
   }
 
@@ -68,13 +73,13 @@ class EditStrategy<
     return Class.abstract();
   }
 
-  getKeyByIndex(index: number): string | number {
+  getKeyByIndex(index: number): TKey {
     const resultIndex = this._denormalizeItemIndex(index);
 
     return this.getKeysByItems([this.getItemDataByIndex(resultIndex as number)])[0];
   }
 
-  _equalKeys(key1: string | number, key2: string | number): boolean {
+  _equalKeys(key1: TKey, key2: TKey): boolean {
     if (this._collectionWidget._isKeySpecified()) {
       return equalByValue(key1, key2);
     }
@@ -90,7 +95,7 @@ class EditStrategy<
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, class-methods-use-this
-  getIndexByKey(key: string | number): number {
+  getIndexByKey(key: TKey): number {
     return Class.abstract();
   }
 
@@ -147,8 +152,7 @@ class EditStrategy<
 
   // eslint-disable-next-line class-methods-use-this
   _isNode(el: unknown): el is Element {
-    // @ts-expect-error Property 'get' does not exist on type 'unknown'
-    return domAdapter.isNode(el && isRenderer(el) ? el.get(0) : el);
+    return domAdapter.isNode(el && isRenderer(el) ? (el as dxElementWrapper).get(0) : el);
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, class-methods-use-this