Form: improve TS typing (#30538)

Author: EugeniyKiyashko

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

@@ -18,9 +18,8 @@ import { hasWindow } from '@js/core/utils/window';
 import license, { peekValidationPerformed } from '@ts/core/license/license_validation';
 import TemplateManagerModule from '@ts/core/m_template_manager';
 import { uiLayerInitialized } from '@ts/core/utils/m_common';
-
-import { Component } from './component';
-import type { OptionChanged } from './types';
+import { Component } from '@ts/core/widget/component';
+import type { OptionChanged } from '@ts/core/widget/types';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface Properties<TComponent = any> extends DOMComponentOptions<TComponent> {

packages/devextreme/js/__internal/ui/collection/item.ts

@@ -1,4 +1,3 @@
-import Class from '@js/core/class';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { each } from '@js/core/utils/iterator';
@@ -54,8 +53,7 @@ export interface ItemExtraOption<TProperties> {
 
 class CollectionItem<
   TProperties extends CollectionWidgetItem = CollectionWidgetItem,
-  // @ts-expect-error dxClass inheritance issue
-> extends (Class.inherit({}) as new() => {}) {
+> {
   _dirty?: boolean;
 
   _watchers!: Watcher[];
@@ -66,11 +64,11 @@ class CollectionItem<
 
   _rawData?: TProperties;
 
-  ctor(
+  constructor(
     $element: dxElementWrapper,
     options: ItemExtraOption<TProperties>,
     rawData: TProperties,
-  ): void {
+  ) {
     this._$element = $element;
     this._options = options;
     this._rawData = rawData;

packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts

@@ -24,7 +24,7 @@ import { each } from '@js/core/utils/iterator';
 import { getDefaultAlignment } from '@js/core/utils/position';
 import { isDefined } from '@js/core/utils/type';
 import { hasWindow } from '@js/core/utils/window';
-import type { DxEvent } from '@js/events';
+import type { DxEvent, EventInfo } from '@js/events';
 import type { Options as Properties } from '@js/ui/drop_down_editor/ui.drop_down_editor';
 import type { Properties as PopupProperties } from '@js/ui/popup';
 import Popup from '@js/ui/popup/ui.popup';
@@ -60,6 +60,8 @@ export interface DropDownEditorProperties extends Omit<Properties,
   buttonsLocation?: string;
 
   _onMarkupRendered?: () => void;
+
+  onPopupInitialized?: (e: { component: DropDownEditor; popup: Popup }) => void;
 }
 
 function createTemplateWrapperElement(): dxElementWrapper {
@@ -87,7 +89,9 @@ class DropDownEditor<
 
   _activeRenderContext?: symbol;
 
-  _popupInitializedAction!: (event?: Record<string, unknown>) => void;
+  _popupInitializedAction!: (event?: EventInfo<DropDownEditor> & {
+    popup?: Popup;
+  }) => void;
 
   _popupContentId?: string;
 
@@ -742,11 +746,12 @@ class DropDownEditor<
   _popupInitializedHandler(): void {}
 
   _getPopupInitializedHandler(): (e) => void {
-    const onPopupInitialized = this.option('onPopupInitialized');
+    const { onPopupInitialized } = this.option();
 
     return (e) => {
       this._popupInitializedHandler();
       if (onPopupInitialized) {
+        // @ts-expect-error
         this._popupInitializedAction({ popup: e.component });
       }
     };

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

@@ -76,6 +76,10 @@ class Editor<
 
   _$validationMessage?: dxElementWrapper;
 
+  static isEditor(instance: unknown): instance is Editor {
+    return instance instanceof Editor;
+  }
+
   ctor(element: Element, options: TProperties): void {
     this.showValidationMessageTimeout = undefined;
     this.validationRequest = Callbacks();
@@ -490,6 +494,4 @@ class Editor<
   }
 }
 
-// @ts-expect-error ts-error
-Editor.isEditor = (instance): boolean => instance instanceof Editor;
 export default Editor;

packages/devextreme/js/__internal/ui/form/components/m_button_item.ts

@@ -1,16 +1,51 @@
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { extend } from '@js/core/utils/extend';
 import { isDefined } from '@js/core/utils/type';
+import type { Properties } from '@js/ui/button';
+import type { HorizontalAlignment, VerticalAlignment } from '@js/ui/form';
+import type Button from '@ts/ui/button/wrapper';
+import type { TemplatesInfo } from '@ts/ui/form/m_form.layout_manager';
 
 const FIELD_BUTTON_ITEM_CLASS = 'dx-field-button-item';
 
+type ButtonItemRenderInfo = TemplatesInfo & {
+  validationGroup?: string;
+  createComponentCallback: (
+    $element: dxElementWrapper,
+    options: Properties,
+  ) => Button;
+};
+
+function convertAlignmentToTextAlign(
+  horizontalAlignment: HorizontalAlignment | undefined,
+): HorizontalAlignment {
+  return isDefined(horizontalAlignment) ? horizontalAlignment : 'right';
+}
+
+function convertAlignmentToJustifyContent(
+  verticalAlignment: VerticalAlignment | undefined,
+): string {
+  switch (verticalAlignment) {
+    case 'center':
+      return 'center';
+    case 'bottom':
+      return 'flex-end';
+    default:
+      return 'flex-start';
+  }
+}
+
 export function renderButtonItem({
   item,
   $parent,
   rootElementCssClassList,
   validationGroup,
   createComponentCallback,
-}) {
+}: ButtonItemRenderInfo): {
+    $rootElement: dxElementWrapper;
+    buttonInstance: Button;
+  } {
   const $rootElement = $('<div>')
     .appendTo($parent)
     .addClass(rootElementCssClassList.join(' '))
@@ -27,23 +62,7 @@ export function renderButtonItem({
     $rootElement,
     buttonInstance: createComponentCallback(
       $button,
-      'dxButton',
       extend({ validationGroup }, item.buttonOptions),
     ),
   };
 }
-
-function convertAlignmentToTextAlign(horizontalAlignment) {
-  return isDefined(horizontalAlignment) ? horizontalAlignment : 'right';
-}
-
-function convertAlignmentToJustifyContent(verticalAlignment) {
-  switch (verticalAlignment) {
-    case 'center':
-      return 'center';
-    case 'bottom':
-      return 'flex-end';
-    default:
-      return 'flex-start';
-  }
-}

packages/devextreme/js/__internal/ui/form/components/m_empty_item.ts

@@ -1,8 +1,12 @@
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import type { TemplatesInfo } from '@ts/ui/form/m_form.layout_manager';
 
 export const FIELD_EMPTY_ITEM_CLASS = 'dx-field-empty-item';
 
-export function renderEmptyItem({ $parent, rootElementCssClassList }) {
+export function renderEmptyItem(info: TemplatesInfo): dxElementWrapper {
+  const { $parent, rootElementCssClassList } = info;
+
   return $('<div>')
     .addClass(FIELD_EMPTY_ITEM_CLASS)
     .html('&nbsp;')