TreeView: improve TS typing (DevExpress#30600) (DevExpress#30628)

Author: EugeniyKiyashko

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

@@ -23,10 +23,13 @@ import type { EventInfo, InitializedEventInfo } from '@js/events';
 
 import type { OptionChanged } from './types';
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-return, @stylistic/max-len
-const getEventName = (actionName): string => actionName.charAt(2).toLowerCase() + actionName.substr(3);
+const getEventName = (
+  actionName: string,
+): string => actionName.charAt(2).toLowerCase() + actionName.substr(3);
 
-const isInnerOption = (optionName): boolean => optionName.indexOf('_', 0) === 0;
+const isInnerOption = (
+  optionName: string,
+): boolean => optionName.indexOf('_', 0) === 0;
 
 export interface ActionConfig {
   beforeExecute?: (e: Record<string, unknown>) => void;
@@ -50,7 +53,7 @@ export interface Properties<TComponent> extends ComponentOptions<
 
 export class Component<
   TComponent extends Component<TComponent, TProperties>,
-  TProperties extends Properties<TComponent>,
+  TProperties extends Properties<TComponent> = Properties<TComponent>,
   // @ts-expect-error dxClass inheritance issue
 > extends (Class.inherit({}) as new() => {}) implements PublicComponent<TProperties> {
   _deprecatedOptions!: Partial<TProperties>;
@@ -375,7 +378,7 @@ export class Component<
   _createActionByOption(
     optionName: string,
     config?: ActionConfig,
-  ): (event?: Record<string, unknown>) => void {
+  ): (event?: unknown) => void {
     // eslint-disable-next-line @typescript-eslint/init-declarations
     let action;
     // eslint-disable-next-line @typescript-eslint/init-declarations
@@ -418,9 +421,7 @@ export class Component<
         const { beforeExecute } = config;
         // @ts-expect-error
         config.beforeExecute = (...props): void => {
-          // eslint-disable-next-line @stylistic/max-len
-          // eslint-disable-next-line @typescript-eslint/prefer-optional-chain, @typescript-eslint/no-unused-expressions
-          beforeExecute && beforeExecute.apply(this, props);
+          beforeExecute?.apply(this, props);
           this._eventsStrategy.fireEvent(eventName, props[0].args);
         };
         action = this._createAction(actionFunc, config);
@@ -465,7 +466,7 @@ export class Component<
   hasActionSubscription(actionName: string): boolean {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return !!this._options.silent(actionName)
-            || this._eventsStrategy.hasEvent(getEventName(actionName));
+      || this._eventsStrategy.hasEvent(getEventName(actionName));
   }
 
   isOptionDeprecated(name: string): boolean {

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

@@ -56,7 +56,7 @@ class DOMComponent<
 
   // eslint-disable-next-line @stylistic/max-len
   // eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
-  static getInstance(element) {
+  static getInstance(element: Element | dxElementWrapper) {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return getInstanceByElement($(element), this);
   }

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

@@ -19,6 +19,7 @@ import { compare as compareVersions } from '@js/core/utils/version';
 import type { DxEvent } from '@js/events';
 import { focusable as focusableSelector } from '@js/ui/widget/selectors';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
+import type { KeyboardKeyDownEvent } from '@ts/events/core/m_keyboard_processor';
 
 import DOMComponent from './dom_component';
 import type { OptionChanged } from './types';
@@ -29,19 +30,32 @@ export const FOCUSED_STATE_CLASS = 'dx-state-focused';
 export const HOVER_STATE_CLASS = 'dx-state-hover';
 const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
 
-function setAttribute(name, value, target): void {
-  // eslint-disable-next-line no-param-reassign
-  name = name === 'role' || name === 'id' ? name : `aria-${name}`;
-  // eslint-disable-next-line no-param-reassign
-  value = isDefined(value) ? value.toString() : null;
-
-  target.attr(name, value);
+export type SupportedKeyHandler = (
+  e: DxEvent<KeyboardEvent>,
+  options?: KeyboardKeyDownEvent
+// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+) => void | boolean;
+export type SupportedKeys = Record<
+  string,
+  SupportedKeyHandler
+>;
+
+function setAttribute(
+  name: string,
+  value: string | undefined | null,
+  $target: dxElementWrapper,
+): void {
+  const attributeName = name === 'role' || name === 'id' ? name : `aria-${name}`;
+
+  const attr = isDefined(value) ? value.toString() : null;
+
+  $target.attr(attributeName, attr);
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface Properties<TComponent = any> extends WidgetOptions<TComponent> {
   useResizeObserver?: boolean;
-  onKeyboardHandled?: (event: KeyboardEvent) => void;
+  onKeyboardHandled?: (event: KeyboardKeyDownEvent) => void;
   isActive?: boolean;
   ignoreParentReadOnly?: boolean;
   hoveredElement?: dxElementWrapper;
@@ -77,9 +91,8 @@ class Widget<
     return options;
   }
 
-  _supportedKeys():
-  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-  Record<string, (e: KeyboardEvent, options?: Record<string, unknown>) => void | boolean> {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _supportedKeys(e?: DxEvent<KeyboardEvent>): SupportedKeys {
     return {};
   }
 
@@ -366,16 +379,14 @@ class Widget<
       this._keyboardListenerId = keyboard.on(
         this._keyboardEventBindingTarget(),
         this._focusTarget(),
-        (opts) => this._keyboardHandler(opts),
+        (opts: KeyboardKeyDownEvent) => this._keyboardHandler(opts),
       );
     }
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  _keyboardHandler(options, onlyChildProcessing?: boolean): boolean {
+  _keyboardHandler(options: KeyboardKeyDownEvent, onlyChildProcessing?: boolean): boolean {
     if (!onlyChildProcessing) {
       const { originalEvent, keyName, which } = options;
-      // @ts-expect-error
       const keys = this._supportedKeys(originalEvent);
       const func = keys[keyName] || keys[which];
 
@@ -678,14 +689,16 @@ class Widget<
     focus.trigger(this._focusTarget());
   }
 
-  registerKeyHandler(key: string, handler: (event?) => void): void {
+  registerKeyHandler(
+    key: string,
+    handler: SupportedKeyHandler,
+  ): void {
     const currentKeys = this._supportedKeys();
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    this._supportedKeys = (): Record<string, (e) => boolean> => extend(
-      currentKeys,
-      { [key]: handler },
-    );
+    this._supportedKeys = (): SupportedKeys => ({
+      ...currentKeys,
+      [key]: handler,
+    });
   }
 }
 

packages/devextreme/js/__internal/events/core/m_keyboard_processor.ts

@@ -2,13 +2,28 @@ import eventsEngine from '@js/common/core/events/core/events_engine';
 import { addNamespace, normalizeKeyName } from '@js/common/core/events/utils/index';
 import Class from '@js/core/class';
 import $ from '@js/core/renderer';
+import type { DxEvent } from '@js/events';
 
 const COMPOSITION_START_EVENT = 'compositionstart';
 const COMPOSITION_END_EVENT = 'compositionend';
 const KEYDOWN_EVENT = 'keydown';
 const NAMESPACE = 'KeyboardProcessor';
 
-const createKeyDownOptions = (e) => ({
+export interface KeyboardKeyDownEvent {
+  keyName: string;
+  key: string;
+  code: string;
+  ctrl: boolean;
+  location: number;
+  metaKey: boolean;
+  shift: boolean;
+  alt: boolean;
+  which: number;
+  originalEvent: DxEvent<KeyboardEvent>;
+}
+
+const createKeyDownOptions = (e: DxEvent<KeyboardEvent>): KeyboardKeyDownEvent => ({
+  // @ts-expect-error
   keyName: normalizeKeyName(e),
   key: e.key,
   code: e.code,
@@ -37,10 +52,14 @@ const KeyboardProcessor = Class.inherit({
     this._handler = options.handler;
 
     if (this._element) {
-      this._processFunction = (e) => {
+      this._processFunction = (e: DxEvent<KeyboardEvent>): void => {
         const focusTargets = $(this._focusTarget).toArray();
-        const isNotFocusTarget = this._focusTarget && this._focusTarget !== e.target && !focusTargets.includes(e.target);
-        const shouldSkipProcessing = this._isComposingJustFinished && e.which === 229 || this._isComposing || isNotFocusTarget;
+        const isNotFocusTarget = this._focusTarget
+          && this._focusTarget !== e.target
+          && !focusTargets.includes(e.target);
+        const shouldSkipProcessing = (this._isComposingJustFinished && e.which === 229)
+          || this._isComposing
+          || isNotFocusTarget;
 
         this._isComposingJustFinished = false;
         if (!shouldSkipProcessing) {
@@ -65,7 +84,7 @@ const KeyboardProcessor = Class.inherit({
     this._handler = undefined;
   },
 
-  process(e) {
+  process(e: DxEvent<KeyboardEvent>) {
     this._handler(createKeyDownOptions(e));
   },
 

packages/devextreme/js/__internal/ui/accordion.ts

@@ -17,11 +17,11 @@ import { getImageContainer } from '@js/core/utils/icon';
 import * as iteratorUtils from '@js/core/utils/iterator';
 import { getHeight, getOuterHeight, setHeight } from '@js/core/utils/size';
 import { isDefined, isPlainObject } from '@js/core/utils/type';
-import type { DxEvent, ItemInfo } from '@js/events';
+import type { DxEvent } from '@js/events';
 import type { Item, Properties } from '@js/ui/accordion';
 import { isMaterialBased } from '@js/ui/themes';
 import type { OptionChanged } from '@ts/core/widget/types';
-import type { ItemRenderInfo } from '@ts/ui/collection/collection_widget.base';
+import type { CollectionItemInfo, ItemRenderInfo } from '@ts/ui/collection/collection_widget.base';
 import CollectionWidget from '@ts/ui/collection/collection_widget.live_update';
 
 const ACCORDION_CLASS = 'dx-accordion';
@@ -41,7 +41,7 @@ export interface AccordionProperties extends Properties<Item> {
   templatesRenderAsynchronously?: boolean;
 }
 
-class Accordion extends CollectionWidget<AccordionProperties> {
+class Accordion extends CollectionWidget<AccordionProperties, Item> {
   _deferredAnimate?: DeferredObj<unknown>;
 
   // eslint-disable-next-line no-restricted-globals
@@ -183,7 +183,7 @@ class Accordion extends CollectionWidget<AccordionProperties> {
     // @ts-expect-error ts-error
     const itemData = $(target).parent().data(this._itemDataKey()) as Item | undefined;
 
-    return itemData ?? super._getItemData(target) as Item;
+    return itemData ?? super._getItemData(target);
   }
 
   _itemSelectHandler(e: DxEvent): void {
@@ -196,7 +196,7 @@ class Accordion extends CollectionWidget<AccordionProperties> {
 
   _afterItemElementDeleted(
     $item: dxElementWrapper,
-    deletedActionArgs: ItemInfo<Item>,
+    deletedActionArgs: CollectionItemInfo<Item, number>,
   ): void {
     this._deferredItems.splice(deletedActionArgs.itemIndex, 1);
     super._afterItemElementDeleted($item, deletedActionArgs);

packages/devextreme/js/__internal/ui/button_group.ts

@@ -135,7 +135,7 @@ class ButtonCollection extends CollectionWidgetEdit<ButtonCollectionProperties>
     return this._focusTarget();
   }
 
-  _enterKeyHandler(e: KeyboardEvent): void {
+  _enterKeyHandler(e: DxEvent<KeyboardEvent>): void {
     e.preventDefault();
     super._enterKeyHandler(e);
   }

packages/devextreme/js/__internal/ui/calendar/m_calendar.ts

@@ -25,6 +25,7 @@ import { hasWindow } from '@js/core/utils/window';
 import Button from '@js/ui/button';
 import type { Properties } from '@js/ui/calendar';
 import { isFluent } from '@js/ui/themes';
+import type { SupportedKeys } from '@ts/core/widget/widget';
 import Editor from '@ts/ui/editor/editor';
 
 import CalendarMultipleSelectionStrategy from './m_calendar.multiple.selection.strategy';
@@ -175,7 +176,7 @@ class Calendar<
     ]);
   }
 
-  _supportedKeys(): Record<string, (e: KeyboardEvent, options?: Record<string, unknown>) => void> {
+  _supportedKeys(): SupportedKeys {
     return {
       ...super._supportedKeys(),
       rightArrow(e): void {

packages/devextreme/js/__internal/ui/check_box/generated_wrapper.ts

@@ -3,6 +3,7 @@ import registerComponent from '@js/core/component_registrator';
 import { CheckBox as CheckBoxComponent, defaultOptions } from './check_box';
 import BaseComponent from './wrapper';
 
+// STYLE checkbox
 export default class CheckBox extends BaseComponent {
   getProps(): Record<string, unknown> {
     const props = super.getProps();
@@ -13,13 +14,13 @@ export default class CheckBox extends BaseComponent {
 
   focus(): unknown {
     // @ts-expect-error
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return, prefer-rest-params
+    // eslint-disable-next-line prefer-rest-params
     return this.viewRef?.focus(...arguments);
   }
 
   blur(): unknown {
     // @ts-expect-error
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return, prefer-rest-params
+    // eslint-disable-next-line prefer-rest-params
     return this.viewRef?.blur(...arguments);
   }