List: improve TS typing (DevExpress#30571)

Co-authored-by: EugeniyKiyashko <[email protected]>

Author: pharret31

packages/devextreme/js/__internal/core/widget/widget.ts

@@ -54,7 +54,7 @@ class Widget<
 
   public _feedbackHideTimeout = 400;
 
-  private readonly _feedbackShowTimeout = 30;
+  private readonly _feedbackShowTimeout: number = 30;
 
   _contentReadyAction?: ((event?: Record<string, unknown>) => void) | null;
 
@@ -497,7 +497,7 @@ class Widget<
     $element: dxElementWrapper,
     value: boolean,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    event?: Record<string, unknown>,
+    event?: DxEvent<PointerEvent | MouseEvent | TouchEvent>,
   ): void {
     this.option('isActive', value);
     $element.toggleClass('dx-state-active', value);

packages/devextreme/js/__internal/ui/chat/messagelist.ts

@@ -782,7 +782,7 @@ class MessageList extends Widget<Properties> {
     changes.forEach((change) => {
       switch (change.type) {
         case 'update':
-          this._updateMessageByKey(change.key, change.data as Message ?? {});
+          this._updateMessageByKey(change.key, change.data ?? {});
           break;
         case 'insert': {
           const { items } = this.option();

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

@@ -14,7 +14,7 @@ class CollectionWidgetAsync<
   TItem extends ItemLike = any,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   TKey = any,
-> extends CollectionWidgetEdit<TProperties> {
+> extends CollectionWidgetEdit<TProperties, TItem, TKey> {
   _asyncTemplateItemsMap!: Record<string, DeferredObj<unknown>>;
 
   _initMarkup(): void {

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

@@ -4,14 +4,11 @@ import { name as contextMenuEventName } from '@js/common/core/events/contextmenu
 import eventsEngine from '@js/common/core/events/core/events_engine';
 import holdEvent from '@js/common/core/events/hold';
 import pointerEvents from '@js/common/core/events/pointer';
-import { addNamespace, isCommandKeyPressed } from '@js/common/core/events/utils/index';
+import { addNamespace, isCommandKeyPressed } from '@js/common/core/events/utils';
 import messageLocalization from '@js/common/core/localization/message';
 import Action from '@js/core/action';
 import domAdapter from '@js/core/dom_adapter';
 import Guid from '@js/core/guid';
-import type {
-  DeepPartial,
-} from '@js/core/index';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { BindableTemplate } from '@js/core/templates/bindable_template';
@@ -34,6 +31,7 @@ import type {
   Cancelable, DxEvent, EventInfo, ItemInfo,
 } from '@js/events';
 import type { CollectionWidgetItem as CollectionWidgetItemProperties, CollectionWidgetOptions, ItemLike } from '@js/ui/collection/ui.collection_widget.base';
+import type { ListItemInfo } from '@js/ui/list';
 import { focusable } from '@js/ui/widget/selectors';
 import { getPublicElement } from '@ts/core/m_element';
 import type { ActionConfig } from '@ts/core/widget/component';
@@ -68,10 +66,12 @@ const FOCUS_FIRST = 'first';
 
 export type DataChangeType = 'insert' | 'update' | 'remove';
 
+export type CollectionItemInfo<TItem> = ItemInfo<TItem> | ListItemInfo<TItem>;
+
 export interface DataChange<TItem = CollectionItem, TKey = number | string> {
   key: TKey;
   type: DataChangeType;
-  data: DeepPartial<TItem>;
+  data: TItem;
   index: number;
 }
 
@@ -95,6 +95,9 @@ export interface PostprocessRenderItemInfo<TItem> {
   itemIndex: number;
 }
 
+export type InkRippleEvent = DxEvent<PointerEvent | MouseEvent | TouchEvent>;
+export type Constructor<T> = new (...args: unknown[]) => T;
+
 export interface CollectionWidgetBaseProperties<
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     TComponent extends CollectionWidget<any, TItem, TKey> | any,
@@ -143,11 +146,11 @@ class CollectionWidget<
   _inkRipple?: {
     showWave: (config: {
       element: dxElementWrapper;
-      event: unknown;
+      event: InkRippleEvent;
     }) => void;
     hideWave: (config: {
       element: dxElementWrapper;
-      event: unknown;
+      event: InkRippleEvent;
     }) => void;
   };
 
@@ -1454,7 +1457,7 @@ class CollectionWidget<
     return action(extend(actionArgs, this._extendActionArgs($itemElement), args));
   }
 
-  _extendActionArgs($itemElement: dxElementWrapper): ItemInfo<TItem> {
+  _extendActionArgs($itemElement: dxElementWrapper): CollectionItemInfo<TItem> {
     return {
       itemElement: getPublicElement($itemElement),
       itemIndex: this._itemElements().index($itemElement),
@@ -1507,10 +1510,10 @@ class CollectionWidget<
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(CollectionWidget as any).include(DataHelperMixin);
-
 // @ts-expect-error ts-error
 CollectionWidget.ItemClass = CollectionWidgetItem;
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(CollectionWidget as any).include(DataHelperMixin);
+
 export default CollectionWidget;

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

@@ -22,7 +22,11 @@ import type { ItemLike, SelectionChangeInfo } from '@js/ui/collection/ui.collect
 import errors from '@js/ui/widget/ui.errors';
 import type { ActionConfig } from '@ts/core/widget/component';
 import type { OptionChanged } from '@ts/core/widget/types';
-import type { CollectionWidgetBaseProperties, PostprocessRenderItemInfo } from '@ts/ui/collection/collection_widget.base';
+import type {
+  CollectionItemInfo,
+  CollectionWidgetBaseProperties,
+  PostprocessRenderItemInfo,
+} from '@ts/ui/collection/collection_widget.base';
 import BaseCollectionWidget from '@ts/ui/collection/collection_widget.base';
 import PlainEditStrategy from '@ts/ui/collection/collection_widget.edit.strategy.plain';
 import type DataController from '@ts/ui/collection/m_data_controller';
@@ -53,6 +57,8 @@ export interface CollectionWidgetEditProperties<
   selectionRequired?: boolean;
 
   focusOnSelectedItem?: boolean;
+
+  grouped?: boolean;
 }
 
 class CollectionWidget<
@@ -62,7 +68,7 @@ class CollectionWidget<
   TItem extends ItemLike = any,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   TKey = any,
-> extends BaseCollectionWidget<TProperties> {
+> extends BaseCollectionWidget<TProperties, TItem, TKey> {
   _userOptions?: TProperties;
 
   _selection!: Selection;
@@ -466,7 +472,9 @@ class CollectionWidget<
           normalizedSelection = this._editStrategy.itemsGetter()[0];
         }
 
-        if (this.option('grouped') && normalizedSelection?.items) {
+        const { grouped } = this.option();
+
+        if (grouped && normalizedSelection?.items) {
           normalizedSelection.items = [normalizedSelection.items[0]];
         }
 
@@ -736,7 +744,8 @@ class CollectionWidget<
   _deleteItemFromDS($item: dxElementWrapper): Promise<unknown> | DeferredObj<unknown> {
     const dataController = this._dataController;
     const deferred = Deferred();
-    const disabledState = this.option('disabled');
+    const { disabled } = this.option();
+
     const dataStore = dataController.store();
 
     if (!dataStore) {
@@ -762,16 +771,18 @@ class CollectionWidget<
       });
 
     deferred.always((): void => {
-      this.option('disabled', disabledState);
+      this.option('disabled', disabled);
     });
 
     return deferred;
   }
 
   _tryRefreshLastPage(): Promise<unknown> {
     const deferred = Deferred();
+
+    const { grouped } = this.option();
     // @ts-expect-error mixin method
-    if (this._isLastPage() || this.option('grouped')) {
+    if (this._isLastPage() || grouped) {
       deferred.resolve();
     } else {
       this._refreshLastPage().done(() => {
@@ -871,13 +882,13 @@ class CollectionWidget<
 
   _afterItemElementDeleted(
     $item: dxElementWrapper,
-    deletedActionArgs: ItemInfo<TItem>,
+    deletedActionArgs: CollectionItemInfo<TItem>,
   ): void {
     const changingOption = this._dataController.getDataSource()
       ? 'dataSource'
       : 'items';
     this._simulateOptionChange(changingOption);
-    this._itemEventHandler($item, 'onItemDeleted', deletedActionArgs, {
+    this._itemEventHandler($item, 'onItemDeleted', deletedActionArgs as ItemInfo<TItem>, {
       beforeExecute() {
         $item.remove();
       },
@@ -886,7 +897,7 @@ class CollectionWidget<
     this._renderEmptyMessage();
   }
 
-  deleteItem(itemElement: Element): Promise<unknown> {
+  deleteItem(itemElement: Element): PromiseLike<unknown> {
     const deferred = Deferred();
     const $item = this._editStrategy.getItemElement(itemElement);
     const index = this._editStrategy.getNormalizedIndex(itemElement);

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

@@ -50,7 +50,7 @@ class CollectionWidgetLiveUpdate<
   TItem extends ItemLike = any,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   TKey = any,
-> extends CollectionWidgetAsync<TProperties> {
+> extends CollectionWidgetAsync<TProperties, TItem, TKey> {
   _itemsCache!: CachedItem<TItem>[];
 
   _getDefaultOptions(): TProperties {
@@ -118,7 +118,9 @@ class CollectionWidgetLiveUpdate<
     items: CachedItem<TItem>[],
   ): boolean {
     let result = false;
-    if (this.option('grouped')) {
+    const { grouped } = this.option();
+
+    if (grouped) {
       if (!changes.length) {
         result = true;
       }
@@ -147,7 +149,7 @@ class CollectionWidgetLiveUpdate<
           // eslint-disable-next-line @typescript-eslint/no-unsafe-return
           return data[PRIVATE_KEY_FIELD];
         }
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+
         return this.keyOf(data);
       };
       const result = findChanges({

packages/devextreme/js/__internal/ui/context_menu/menu_base.ts

@@ -13,7 +13,7 @@ import type { dxMenuBaseItem, Item, SubmenuShowMode } from '@js/ui/menu';
 import { render } from '@js/ui/widget/utils.ink_ripple';
 import type { ActionArguments } from '@ts/core/m_action';
 import type { OptionChanged } from '@ts/core/widget/types';
-import type { PostprocessRenderItemInfo } from '@ts/ui/collection/collection_widget.base';
+import type { InkRippleEvent, PostprocessRenderItemInfo } from '@ts/ui/collection/collection_widget.base';
 import MenuItem from '@ts/ui/collection/item';
 import MenuBaseEditStrategy from '@ts/ui/context_menu/menu_base.edit.strategy';
 import type DataAdapter from '@ts/ui/hierarchical_collection/data_adapter';
@@ -307,17 +307,17 @@ class MenuBase<
   _toggleActiveState(
     $element: dxElementWrapper,
     value: boolean,
-    e: Record<string, unknown>,
+    event: InkRippleEvent,
   ): void {
-    super._toggleActiveState($element, value, e);
+    super._toggleActiveState($element, value);
 
     if (!this._inkRipple) {
       return;
     }
 
     const config = {
       element: $element,
-      event: e,
+      event,
     };
 
     if (value) {