Widget: remove excess typing file (#28625)

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

@@ -1,6 +1,7 @@
 import Action from '@js/core/action';
 import Class from '@js/core/class';
 import type {
+  Component as PublicComponent,
   ComponentOptions,
 } from '@js/core/component';
 import Config from '@js/core/config';
@@ -45,7 +46,7 @@ export class Component<
   TProperties extends Properties<TComponent>,
   // @ts-expect-error dxClass inheritance issue
   // eslint-disable-next-line @typescript-eslint/ban-types
-> extends (Class.inherit({}) as new() => {}) {
+> extends (Class.inherit({}) as new() => {}) implements PublicComponent<TProperties> {
   _deprecatedOptions!: Partial<TProperties>;
 
   _options!: Options;
@@ -285,8 +286,8 @@ export class Component<
     }
   }
 
-  instance(): TComponent {
-    return this as unknown as TComponent;
+  instance(): this {
+    return this;
   }
 
   beginUpdate(): void {
@@ -372,7 +373,7 @@ export class Component<
 
   _createActionByOption(
     optionName: string,
-    config: Record<string, unknown>,
+    config?: Record<string, unknown>,
   ): (event?: Record<string, unknown>) => void {
     // eslint-disable-next-line @typescript-eslint/init-declarations
     let action;
@@ -406,15 +407,16 @@ export class Component<
         actionFunc = this.option(optionName);
       }
 
-      if (!action && !actionFunc && !config.beforeExecute
-        && !config.afterExecute && !this._eventsStrategy.hasEvent(eventName)) {
+      if (!action && !actionFunc && !config?.beforeExecute
+        && !config?.afterExecute && !this._eventsStrategy.hasEvent(eventName)) {
         return;
       }
 
       if (!action) {
+        // @ts-expect-error
         const { beforeExecute } = config;
+        // @ts-expect-error
         config.beforeExecute = (...props): void => {
-          // @ts-expect-error
           // eslint-disable-next-line max-len
           // eslint-disable-next-line @typescript-eslint/prefer-optional-chain, @typescript-eslint/no-unused-expressions
           beforeExecute && beforeExecute.apply(this, props);
@@ -447,16 +449,17 @@ export class Component<
     return onActionCreated(this, result, config) || result;
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  on(eventName: string, eventHandler): TComponent {
+  // eslint-disable-next-line max-len
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/ban-types
+  on(eventName: string | { [key: string]: Function }, eventHandler?): this {
     this._eventsStrategy.on(eventName, eventHandler);
-    return this as unknown as TComponent;
+    return this;
   }
 
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  off(eventName: string, eventHandler): TComponent {
+  off(eventName: string, eventHandler?): this {
     this._eventsStrategy.off(eventName, eventHandler);
-    return this as unknown as TComponent;
+    return this;
   }
 
   hasActionSubscription(actionName: string): boolean {
@@ -490,6 +493,7 @@ export class Component<
     return value;
   }
 
+  // @ts-expect-error
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   option(...args): TProperties {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return

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

@@ -52,7 +52,7 @@ class DOMComponent<
   private _requireRefresh?: boolean;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private _templateManager?: any;
+  _templateManager!: any;
 
   // eslint-disable-next-line max-len
   // eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
@@ -493,7 +493,7 @@ class DOMComponent<
     return this._$element;
   }
 
-  element(): Element {
+  element(): HTMLElement {
     const $element = this.$element();
 
     return getPublicElement($element);

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

@@ -548,7 +548,7 @@ class Widget<
     this.$element().toggleClass('dx-state-independent', ignoreParentReadOnly);
   }
 
-  _setWidgetOption(widgetName: 'string', args: Record<string, unknown>): void {
+  _setWidgetOption(widgetName: string, args: Record<string, unknown>): void {
     if (!this[widgetName]) {
       return;
     }

packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts

@@ -250,8 +250,7 @@ class FilterBuilder extends Widget<any> {
     return action && action(options);
   }
 
-  _initMarkup() {
-    // @ts-expect-error
+  _initMarkup(): void {
     this.$element().addClass(FILTER_BUILDER_CLASS);
     // @ts-expect-error
     super._initMarkup();
@@ -391,11 +390,8 @@ class FilterBuilder extends Widget<any> {
   _createButtonWithMenu(options) {
     const that = this;
     const removeMenu = function () {
-      // @ts-expect-error
       that.$element().find(`.${ACTIVE_CLASS}`).removeClass(ACTIVE_CLASS).attr('aria-expanded', 'false');
-      // @ts-expect-error
       that.$element().find('.dx-overlay .dx-treeview').remove();
-      // @ts-expect-error
       that.$element().find('.dx-overlay').remove();
     };
     const rtlEnabled = this.option('rtlEnabled');

packages/devextreme/js/__internal/grids/grid_core/context_menu/m_context_menu.ts

@@ -113,6 +113,7 @@ export class ContextMenuView extends modules.View {
         },
 
         cssClass: this.getWidgetContainerClass(),
+        // @ts-expect-error
         target: this.component.$element(),
       },
     );

packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts

@@ -2154,7 +2154,6 @@ class EditingControllerImpl extends modules.ViewController {
     setTimeout(() => {
       // NOTE: if the editForm is enabled then we need to search for focused element in the document root
       // otherwise we need to search for element in the shadow dom
-      // @ts-expect-error
       const elementContainer = this._editForm?.element() || this.component.$element().get(0);
       const $focusedElement = $(domAdapter.getActiveElement(elementContainer));
       const columnIndex = this._rowsView.getCellIndex($focusedElement, row.rowIndex);

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts

@@ -1394,7 +1394,6 @@ export class KeyboardNavigationController extends modules.ViewController {
         activeElementSelector
           += ', .dx-datagrid-rowsview .dx-row > td[tabindex]';
       }
-      // @ts-expect-error
       element = this.component.$element().find(activeElementSelector).first();
     }
 

packages/devextreme/js/__internal/grids/grid_core/views/m_grid_view.ts

@@ -198,7 +198,6 @@ export class ResizingController extends modules.ViewController {
     const widgetStatusText = messageLocalization
     // @ts-expect-error Badly typed format method
       .format(widgetAriaLabel, totalItemsCount, columnCount);
-    // @ts-expect-error Badly typed dxElementWrapper
     const $ariaLabelElement = this.component.$element().children(`.${GRIDBASE_CONTAINER_CLASS}`);
     // @ts-expect-error Treelist Variable
     const expandableWidgetAriaLabel = messageLocalization.format(this._expandableWidgetAriaId);
@@ -361,7 +360,6 @@ export class ResizingController extends modules.ViewController {
 
     this._toggleContentMinHeight(wordWrapEnabled); // T1047239
 
-    // @ts-expect-error
     if ($element && $element.get(0) && this._maxWidth) {
       delete this._maxWidth;
       $element[0].style.maxWidth = '';
@@ -508,7 +506,7 @@ export class ResizingController extends modules.ViewController {
             const borderWidth = gridCoreUtils.getComponentBorderWidth(this, $rowsViewElement);
 
             that._maxWidth = totalWidth + scrollbarWidth + borderWidth;
-            // @ts-expect-error
+
             $element.css('maxWidth', that._maxWidth);
           }
         }
@@ -603,7 +601,6 @@ export class ResizingController extends modules.ViewController {
   }
 
   private _getGroupElement() {
-    // @ts-expect-error
     return this.component.$element().children().get(0);
   }
 
@@ -704,15 +701,15 @@ export class ResizingController extends modules.ViewController {
   private _resetGroupElementHeight() {
     const groupElement = this._getGroupElement();
     const scrollable = this._rowsView.getScrollable();
-
+    // @ts-expect-error
     if (groupElement && groupElement.style.height && (!scrollable || !scrollable.scrollTop())) {
+      // @ts-expect-error
       groupElement.style.height = '';
     }
   }
 
   private _checkSize(checkSize?) {
     const $rootElement = this.component.$element();
-    // @ts-expect-error
     const isWidgetVisible = $rootElement.is(':visible');
     const isGridSizeChanged = this._lastWidth !== getWidth($rootElement)
           || this._lastHeight !== getHeight($rootElement)
@@ -779,6 +776,7 @@ export class ResizingController extends modules.ViewController {
     // eslint-disable-next-line radix
     const maxHeight = parseInt($rootElement.css('maxHeight'));
     const maxHeightHappened = maxHeight && rootElementHeight >= maxHeight;
+    // @ts-expect-error
     const isMaxHeightApplied = groupElement && groupElement.scrollHeight === groupElement.offsetHeight;
 
     that.updateSize($rootElement);

packages/devextreme/js/__internal/scheduler/appointments/m_appointment.ts

@@ -188,7 +188,7 @@ export class Appointment extends DOMComponent {
     return messageLocalization.format('dxScheduler-appointmentAriaLabel-group', groupText);
   }
 
-  _getDateText() {
+  _getDateText(): string {
     const startDateText = this._localizeDate(this._getStartDate());
     const endDateText = this._localizeDate(this._getEndDate());
 
@@ -203,8 +203,7 @@ export class Appointment extends DOMComponent {
     return `${dateText}${partText}`;
   }
 
-  _renderAriaLabel() {
-    // @ts-expect-error
+  _renderAriaLabel(): void {
     const $element: dxElementWrapper = this.$element();
     const ariaLabel = [
       this._getDateText(),
@@ -220,7 +219,7 @@ export class Appointment extends DOMComponent {
     $element.find('.dx-item-content').attr('id', id);
   }
 
-  _renderAppointmentGeometry() {
+  _renderAppointmentGeometry(): void {
     const geometry: any = this.option('geometry');
     const $element: any = this.$element();
     move($element, {

packages/devextreme/js/__internal/scheduler/header/m_calendar.ts

@@ -27,24 +27,23 @@ export default class SchedulerCalendar extends Widget<dxSchedulerOptions> {
     this._overlay.hide();
   }
 
-  _keyboardHandler(opts) {
+  _keyboardHandler(opts): void {
     this._calendar?._keyboardHandler(opts);
   }
 
-  _init() {
+  _init(): void {
     // @ts-expect-error
     super._init();
     this.$element();
   }
 
-  _render() {
+  _render(): void {
     // @ts-expect-error
     super._render();
     this._renderOverlay();
   }
 
-  _renderOverlay() {
-    // @ts-expect-error
+  _renderOverlay(): void {
     this.$element().addClass(CALENDAR_POPOVER_CLASS);
 
     const isMobileLayout = this._isMobileLayout();

packages/devextreme/js/__internal/scheduler/header/m_header.ts

@@ -117,7 +117,7 @@ export class SchedulerHeader extends Widget<dxSchedulerOptions> {
     // @ts-expect-error
     super._init();
     this._createEventMap();
-    // @ts-expect-error
+
     this.$element().addClass(COMPONENT_CLASS);
 
     this.currentView = viewsUtils.getCurrentView(

packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts

@@ -2612,11 +2612,10 @@ class SchedulerWorkSpace extends WidgetObserver {
     this._appendHeaderPanelEmptyCellIfNecessary();
     this._$headerPanelContainer.append(this._$headerTablesContainer);
 
-    this.$element().append(
-      this._$fixedContainer,
-      this._$headerPanelContainer,
-      this._dateTableScrollable.$element(),
-    );
+    this.$element()
+      .append(this._$fixedContainer)
+      .append(this._$headerPanelContainer)
+      .append(this._dateTableScrollable.$element());
   }
 
   _createWorkSpaceScrollableElements() {

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

@@ -1,10 +1,10 @@
+import type { DefaultOptionsRule } from '@js/core/options/utils';
 import $ from '@js/core/renderer';
 import type { ButtonStyle, ButtonType, ClickEvent } from '@js/ui/button';
 import Button from '@js/ui/button';
 import { isFluent, isMaterial } from '@js/ui/themes';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
-
-import Widget from '../widget';
+import Widget from '@ts/core/widget/widget';
 
 const CALENDAR_NAVIGATOR_CLASS = 'dx-calendar-navigator';
 const CALENDAR_NAVIGATOR_PREVIOUS_MONTH_CLASS = 'dx-calendar-navigator-previous-month';
@@ -24,9 +24,9 @@ export interface NavigatorOptions extends WidgetOptions<Navigator> {
 }
 
 class Navigator extends Widget<NavigatorOptions> {
-  _clickAction?: any;
+  _clickAction?: ((event: { direction: number; event: ClickEvent }) => void) | null;
 
-  _captionClickAction?: any;
+  _captionClickAction?: ((event: { event: ClickEvent }) => void) | null;
 
   _prevButton!: Button;
 
@@ -45,7 +45,7 @@ class Navigator extends Widget<NavigatorOptions> {
     };
   }
 
-  _defaultOptionsRules(): Record<string, unknown>[] {
+  _defaultOptionsRules(): DefaultOptionsRule<NavigatorOptions>[] {
     return super._defaultOptionsRules().concat([
       {
         device() {
@@ -103,10 +103,9 @@ class Navigator extends Widget<NavigatorOptions> {
       {
         focusStateEnabled,
         icon: rtlEnabled ? 'chevronright' : 'chevronleft',
-        onClick: (e) => { this._clickAction({ direction: -direction, event: e }); },
+        onClick: (e) => { this._clickAction?.({ direction: -direction, event: e }); },
         type,
         stylingMode,
-        // @ts-expect-error
         integrationOptions: {},
       },
     );
@@ -121,10 +120,9 @@ class Navigator extends Widget<NavigatorOptions> {
       {
         focusStateEnabled,
         icon: rtlEnabled ? 'chevronleft' : 'chevronright',
-        onClick: (e) => { this._clickAction({ direction, event: e }); },
+        onClick: (e) => { this._clickAction?.({ direction, event: e }); },
         type,
         stylingMode,
-        // @ts-expect-error
         integrationOptions: {},
       },
     );
@@ -138,7 +136,7 @@ class Navigator extends Widget<NavigatorOptions> {
       Button,
       {
         focusStateEnabled,
-        onClick: (e) => { this._captionClickAction({ event: e }); },
+        onClick: (e) => { this._captionClickAction?.({ event: e }); },
         type,
         stylingMode,
         template: (_, content) => {
@@ -152,19 +150,22 @@ class Navigator extends Widget<NavigatorOptions> {
               .append($('<span>').addClass(BUTTON_TEXT_CLASS).text(captionText));
           });
         },
-        // @ts-expect-error
         integrationOptions: {},
       },
     );
 
     const $caption = this._caption.$element();
 
-    // @ts-expect-error
-    this.$element().append($prevButton, $caption, $nextButton);
+    this.$element()
+      .append($prevButton)
+      .append($caption)
+      .append($nextButton);
   }
 
   _renderCaption(): void {
-    this._caption?.option('text', this.option('text'));
+    const { text } = this.option();
+
+    this._caption?.option('text', text);
   }
 
   toggleButton(