diff --git a/packages/devextreme/js/__internal/core/widget/widget.ts b/packages/devextreme/js/__internal/core/widget/widget.ts
index 63256a2b1cab..b353adf61e52 100644
--- a/packages/devextreme/js/__internal/core/widget/widget.ts
+++ b/packages/devextreme/js/__internal/core/widget/widget.ts
@@ -676,7 +676,7 @@ class Widget<
     focus.trigger(this._focusTarget());
   }
 
-  registerKeyHandler(key: string, handler: () => void): void {
+  registerKeyHandler(key: string, handler: (event?) => void): void {
     const currentKeys = this._supportedKeys();
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @stylistic/max-len
diff --git a/packages/devextreme/js/__internal/ui/chat/messagebox.ts b/packages/devextreme/js/__internal/ui/chat/messagebox.ts
index b2c236b368a3..4260a1d5595b 100644
--- a/packages/devextreme/js/__internal/ui/chat/messagebox.ts
+++ b/packages/devextreme/js/__internal/ui/chat/messagebox.ts
@@ -6,10 +6,9 @@ import Button from '@js/ui/button';
 import type { Properties as DOMComponentProperties } from '@ts/core/widget/dom_component';
 import DOMComponent from '@ts/core/widget/dom_component';
 import type { OptionChanged } from '@ts/core/widget/types';
+import TextArea from '@ts/ui/m_text_area';
 
 import type { EnterKeyEvent, InputEvent } from '../../../ui/text_area';
-import type dxTextArea from '../../../ui/text_area';
-import TextArea from '../m_text_area';
 
 const CHAT_MESSAGEBOX_CLASS = 'dx-chat-messagebox';
 const CHAT_MESSAGEBOX_TEXTAREA_CLASS = 'dx-chat-messagebox-textarea';
@@ -38,7 +37,7 @@ export interface Properties extends DOMComponentProperties<MessageBox> {
 }
 
 class MessageBox extends DOMComponent<MessageBox, Properties> {
-  _textArea!: dxTextArea;
+  _textArea!: TextArea;
 
   _button!: Button;
 
diff --git a/packages/devextreme/js/__internal/ui/color_box/m_color_box.ts b/packages/devextreme/js/__internal/ui/color_box/m_color_box.ts
index 58e71de51e23..d3c682be812b 100644
--- a/packages/devextreme/js/__internal/ui/color_box/m_color_box.ts
+++ b/packages/devextreme/js/__internal/ui/color_box/m_color_box.ts
@@ -1,9 +1,14 @@
 import Color from '@js/color';
 import registerComponent from '@js/core/component_registrator';
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
-import { extend } from '@js/core/utils/extend';
+import type { Properties } from '@js/ui/color_box';
+import type { OptionChanged } from '@ts/core/widget/types';
 import DropDownEditor from '@ts/ui/drop_down_editor/m_drop_down_editor';
 
+import type { PopupProperties } from '../popup/m_popup';
+import type Popup from '../popup/m_popup';
+import type { ColorViewProperties } from './m_color_view';
 import ColorView from './m_color_view';
 
 const COLOR_BOX_CLASS = 'dx-colorbox';
@@ -25,10 +30,27 @@ const colorUtils = {
   makeRgba: colorEditorPrototype._makeRgba.bind(colorEditorPrototype),
 };
 
-const ColorBox = (DropDownEditor as any).inherit({
+export interface ColorBoxProperties extends Omit<Properties,
+'onClosed' | 'onOpened' |
+'onCopy' | 'onCut' | 'onEnterKey' | 'onFocusIn' | 'onFocusOut' | 'onInput' | 'onKeyDown' | 'onKeyUp' | 'onPaste'
+| 'onValueChanged' | 'validationMessagePosition' | 'onContentReady' | 'onDisposing' | 'onOptionChanged' | 'onInitialized'> {
+}
 
-  _supportedKeys() {
-    // @ts-expect-error
+class ColorBox extends DropDownEditor<ColorBoxProperties> {
+  _popup!: Popup;
+
+  _colorView!: ColorView;
+
+  _colorViewEnterKeyPressed?: boolean;
+
+  _shouldSaveEmptyValue?: boolean;
+
+  _$colorResultPreview!: dxElementWrapper;
+
+  _$colorBoxInputContainer!: dxElementWrapper;
+
+  _supportedKeys(): Record<string, (e: KeyboardEvent) => boolean | undefined> {
+    // @ts-expect-error ts-error
     const arrowHandler = function (e) {
       e.stopPropagation();
       if (this.option('opened')) {
@@ -61,48 +83,50 @@ const ColorBox = (DropDownEditor as any).inherit({
       return true;
     };
 
-    return extend(this.callBase(), {
+    return {
+      ...super._supportedKeys(),
       enter: this._enterKeyHandler,
       leftArrow: arrowHandler,
       rightArrow: arrowHandler,
       upArrow: upArrowHandler,
       downArrow: downArrowHandler,
-    });
-  },
+    };
+  }
 
-  _getDefaultOptions() {
-    return extend(this.callBase(), {
+  _getDefaultOptions(): ColorBoxProperties {
+    return {
+      ...super._getDefaultOptions(),
       editAlphaChannel: false,
-
       applyValueMode: 'useButtons',
-
       keyStep: 1,
-
+      // @ts-expect-error ts-error
       fieldTemplate: null,
-
       buttonsLocation: 'bottom after',
-    });
-  },
+    };
+  }
 
-  _popupHidingHandler() {
-    this.callBase();
-    if (this.option('applyValueMode') === 'useButtons') {
+  _popupHidingHandler(): void {
+    super._popupHidingHandler();
+    const { applyValueMode } = this.option();
+
+    if (applyValueMode === 'useButtons') {
       this._updateColorViewValue(this.option('value'));
     }
-  },
+  }
 
-  _popupConfig() {
-    return extend(this.callBase(), {
+  _popupConfig(): PopupProperties {
+    return {
+      ...super._popupConfig(),
       width: '',
-    });
-  },
+    };
+  }
 
-  _contentReadyHandler() {
+  _contentReadyHandler(): void {
     this._createColorView();
     this._addPopupBottomClasses();
-  },
+  }
 
-  _addPopupBottomClasses() {
+  _addPopupBottomClasses(): void {
     const $popupBottom = this._popup.bottomToolbar();
     if ($popupBottom) {
       $popupBottom
@@ -119,17 +143,17 @@ const ColorBox = (DropDownEditor as any).inherit({
         .find('.dx-popup-cancel')
         .addClass(COLOR_BOX_CANCEL_BUTTON_CLASS);
     }
-  },
+  }
 
-  _createColorView() {
+  _createColorView(): void {
     this._popup.$overlayContent().addClass(COLOR_BOX_OVERLAY_CLASS);
 
     const $colorView = $('<div>').appendTo(this._popup.$content());
 
     this._colorView = this._createComponent($colorView, ColorView, this._colorViewConfig());
-  },
+  }
 
-  _applyNewColor(value) {
+  _applyNewColor(value): void {
     this.option('value', value);
 
     if (value) {
@@ -140,18 +164,26 @@ const ColorBox = (DropDownEditor as any).inherit({
       this.close();
       this._colorViewEnterKeyPressed = false;
     }
-  },
+  }
+
+  _colorViewConfig(): ColorViewProperties {
+    const {
+      editAlphaChannel,
+      value,
+      applyValueMode,
+      focusStateEnabled,
+      stylingMode,
+    } = this.option();
 
-  _colorViewConfig() {
     const that = this;
 
     return {
-      value: that.option('value'),
-      matchValue: that.option('value'),
-      editAlphaChannel: that.option('editAlphaChannel'),
-      applyValueMode: that.option('applyValueMode'),
-      focusStateEnabled: that.option('focusStateEnabled'),
-      stylingMode: this.option('stylingMode'),
+      value,
+      matchValue: value,
+      editAlphaChannel,
+      applyValueMode,
+      focusStateEnabled,
+      stylingMode,
       target: this._input(),
       onEnterKeyPressed({ event }) {
         that._colorViewEnterKeyPressed = true;
@@ -163,6 +195,7 @@ const ColorBox = (DropDownEditor as any).inherit({
       },
 
       onValueChanged({ event, value, previousValue }) {
+        // @ts-expect-error ts-error
         const instantlyMode = that.option('applyValueMode') === 'instantly';
         const isOldValue = colorUtils.makeRgba(value) === previousValue;
         const changesApplied = instantlyMode || that._colorViewEnterKeyPressed;
@@ -173,12 +206,13 @@ const ColorBox = (DropDownEditor as any).inherit({
         }
 
         if (event) {
+          // @ts-expect-error ts-error
           that._saveValueChangeEvent(event);
         }
         that._applyNewColor(value);
       },
     };
-  },
+  }
 
   _enterKeyHandler(e) {
     const newValue = this._input().val();
@@ -193,7 +227,7 @@ const ColorBox = (DropDownEditor as any).inherit({
       this._input().val(oldValue);
       return;
     }
-
+    // @ts-expect-error ts-error
     if (newValue !== oldValue) {
       this._applyColorFromInput(newValue);
       this._saveValueChangeEvent(e);
@@ -202,6 +236,7 @@ const ColorBox = (DropDownEditor as any).inherit({
 
     if (this._colorView) {
       const colorViewValue = this._colorView.option('value');
+
       if (value !== colorViewValue) {
         this._saveValueChangeEvent(e);
         this.option('value', colorViewValue);
@@ -210,42 +245,42 @@ const ColorBox = (DropDownEditor as any).inherit({
 
     this.close();
     return false;
-  },
+  }
 
-  _applyButtonHandler(e) {
+  _applyButtonHandler(e): void {
     this._saveValueChangeEvent(e.event);
     this._applyNewColor(this._colorView.option('value'));
 
-    this.callBase();
-  },
+    super._applyButtonHandler();
+  }
 
-  _cancelButtonHandler() {
+  _cancelButtonHandler(): void {
     this._resetInputValue();
 
-    this.callBase();
-  },
+    super._cancelButtonHandler();
+  }
 
   _getKeyboardListeners() {
-    return this.callBase().concat([this._colorView]);
-  },
+    return super._getKeyboardListeners().concat([this._colorView]);
+  }
 
-  _init() {
-    this.callBase();
-  },
+  _init(): void {
+    super._init();
+  }
 
-  _initMarkup() {
+  _initMarkup(): void {
     this.$element().addClass(COLOR_BOX_CLASS);
-    this.callBase();
-  },
+    super._initMarkup();
+  }
 
-  _renderInput() {
-    this.callBase();
+  _renderInput(): void {
+    super._renderInput();
 
     this._input().addClass(COLOR_BOX_INPUT_CLASS);
     this._renderColorPreview();
-  },
+  }
 
-  _renderColorPreview() {
+  _renderColorPreview(): void {
     this.$element().wrapInner($('<div>').addClass(COLOR_BOX_INPUT_CONTAINER_CLASS));
     this._$colorBoxInputContainer = this.$element().children().eq(0);
 
@@ -258,7 +293,7 @@ const ColorBox = (DropDownEditor as any).inherit({
     } else {
       colorUtils.makeTransparentBackground(this._$colorResultPreview, this.option('value'));
     }
-  },
+  }
 
   _renderValue() {
     const { value, editAlphaChannel } = this.option();
@@ -267,27 +302,27 @@ const ColorBox = (DropDownEditor as any).inherit({
 
     this.option('text', text);
 
-    return this.callBase();
-  },
+    return super._renderValue();
+  }
 
-  _resetInputValue() {
+  _resetInputValue(): void {
     const $input = this._input();
     const value = this.option('value');
-
+    // @ts-expect-error ts-error
     $input.val(value);
     this._updateColorViewValue(value);
-  },
+  }
 
-  _updateColorViewValue(value) {
+  _updateColorViewValue(value): void {
     if (this._colorView) {
       this._colorView.option({
         value,
         matchValue: value,
       });
     }
-  },
+  }
 
-  _valueChangeEventHandler(e) {
+  _valueChangeEventHandler(e): void {
     let value = this._input().val();
 
     if (value) {
@@ -295,8 +330,8 @@ const ColorBox = (DropDownEditor as any).inherit({
 
       this._updateColorViewValue(value);
     }
-    this.callBase(e, value);
-  },
+    super._valueChangeEventHandler(e, value);
+  }
 
   _applyColorFromInput(value) {
     const { editAlphaChannel } = this.option();
@@ -312,14 +347,14 @@ const ColorBox = (DropDownEditor as any).inherit({
     }
 
     return value;
-  },
+  }
 
-  _clean() {
-    this.callBase();
+  _clean(): void {
+    super._clean();
     delete this._shouldSaveEmptyValue;
-  },
+  }
 
-  _optionChanged(args) {
+  _optionChanged(args: OptionChanged<ColorBoxProperties>): void {
     const { name, value } = args;
 
     switch (name) {
@@ -338,11 +373,11 @@ const ColorBox = (DropDownEditor as any).inherit({
         this._updateColorViewValue(value);
         this._shouldSaveEmptyValue = false;
 
-        this.callBase(args);
+        super._optionChanged(args);
         break;
       case 'applyButtonText':
       case 'cancelButtonText':
-        this.callBase(args);
+        super._optionChanged(args);
         this._popup && this._addPopupBottomClasses();
         break;
       case 'editAlphaChannel':
@@ -352,10 +387,10 @@ const ColorBox = (DropDownEditor as any).inherit({
         }
         break;
       default:
-        this.callBase(args);
+        super._optionChanged(args);
     }
-  },
-});
+  }
+}
 
 registerComponent('dxColorBox', ColorBox);
 
diff --git a/packages/devextreme/js/__internal/ui/color_box/m_color_view.ts b/packages/devextreme/js/__internal/ui/color_box/m_color_view.ts
index a7888615b3ef..8d20dce51863 100644
--- a/packages/devextreme/js/__internal/ui/color_box/m_color_view.ts
+++ b/packages/devextreme/js/__internal/ui/color_box/m_color_view.ts
@@ -1,4 +1,5 @@
 import Color from '@js/color';
+import type { ApplyValueMode } from '@js/common';
 import { locate, move } from '@js/common/core/animation/translator';
 import { name as clickEventName } from '@js/common/core/events/click';
 import eventsEngine from '@js/common/core/events/core/events_engine';
@@ -7,13 +8,17 @@ import messageLocalization from '@js/common/core/localization/message';
 import registerComponent from '@js/core/component_registrator';
 import devices from '@js/core/devices';
 import Guid from '@js/core/guid';
+import type { DefaultOptionsRule } from '@js/core/options/utils';
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { extend } from '@js/core/utils/extend';
 import { getHeight, getOuterHeight, getWidth } from '@js/core/utils/size';
 import Draggable from '@js/ui/draggable';
-import Editor from '@js/ui/editor/editor';
-import NumberBox from '@js/ui/number_box';
-import TextBox from '@js/ui/text_box';
+import type { OptionChanged } from '@ts/core/widget/types';
+import type { EditorProperties } from '@ts/ui/editor/editor';
+import Editor from '@ts/ui/editor/editor';
+import NumberBox from '@ts/ui/number_box/m_number_box';
+import TextBox from '@ts/ui/text_box/m_text_box';
 
 const COLOR_VIEW_CLASS = 'dx-colorview';
 const COLOR_VIEW_CONTAINER_CLASS = 'dx-colorview-container';
@@ -58,16 +63,89 @@ const TEXT_EDITOR_INPUT = 'dx-texteditor-input';
 
 const BLACK_COLOR = '#000000';
 
-const ColorView = (Editor as any).inherit({
+export interface ColorViewProperties extends EditorProperties {
+  keyStep?: number;
 
-  _supportedKeys() {
+  matchValue?: string;
+
+  editAlphaChannel?: boolean;
+
+  onEnterKeyPressed?: (event?) => void;
+
+  applyValueMode?: ApplyValueMode;
+
+  target?: string | Element | dxElementWrapper | null;
+}
+
+class ColorView extends Editor<ColorViewProperties> {
+  _$palette!: dxElementWrapper;
+
+  _$paletteHandle?: dxElementWrapper;
+
+  _paletteWidth!: number;
+
+  _paletteHeight!: number;
+
+  _paletteHandleWidth!: number;
+
+  _paletteHandleHeight!: number;
+
+  _updateByDrag?: boolean;
+
+  _currentColor!: any;
+
+  _isTopColorHue?: boolean;
+
+  _$colorPickerContainer!: dxElementWrapper;
+
+  _$hueScale?: dxElementWrapper;
+
+  _$hueScaleHandle?: dxElementWrapper;
+
+  _$hueScaleWrapper?: dxElementWrapper;
+
+  _hueScaleHeight?: number;
+
+  _hueScaleWrapperHeight!: number;
+
+  _hueScaleHandleHeight!: number;
+
+  _suppressEditorsValueUpdating?: boolean;
+
+  _$alphaChannelHandle?: dxElementWrapper;
+
+  _$controlsContainer!: dxElementWrapper;
+
+  _$alphaChannelScale?: dxElementWrapper;
+
+  _alphaChannelInput!: NumberBox;
+
+  _rgbInputs!: NumberBox[];
+
+  _hexInput!: TextBox;
+
+  _$currentColor?: dxElementWrapper;
+
+  _$baseColor?: dxElementWrapper;
+
+  _alphaChannelScaleWorkWidth!: number;
+
+  _alphaChannelHandleWidth!: number;
+
+  _rgbInputsWithLabels?: dxElementWrapper[];
+
+  _onEnterKeyPressedAction?: (event: Record<string, unknown>) => void;
+
+  _supportedKeys(): Record<string, (e: KeyboardEvent, options?: Record<string, unknown>) => void> {
     const isRTL = this.option('rtlEnabled');
 
     const that = this;
     const getHorizontalPaletteStep = function (e) {
       let step = 100 / that._paletteWidth;
       if (e.shiftKey) {
-        step *= that.option('keyStep');
+        const { keyStep } = that.option();
+        // @ts-expect-error ts-error
+        step *= keyStep;
       }
 
       step = step > 1 ? step : 1;
@@ -88,7 +166,9 @@ const ColorView = (Editor as any).inherit({
     const getVerticalPaletteStep = function (e) {
       let step = 100 / that._paletteHeight;
       if (e.shiftKey) {
-        step *= that.option('keyStep');
+        const { keyStep } = that.option();
+        // @ts-expect-error ts-error
+        step *= keyStep;
       }
 
       step = step > 1 ? step : 1;
@@ -117,7 +197,9 @@ const ColorView = (Editor as any).inherit({
     const getHueScaleStep = function (e) {
       let step = 360 / (that._hueScaleWrapperHeight - that._hueScaleHandleHeight);
       if (e.shiftKey) {
-        step *= that.option('keyStep');
+        const { keyStep } = that.option();
+        // @ts-expect-error ts-error
+        step *= keyStep;
       }
 
       step = step > 1 ? step : 1;
@@ -132,7 +214,9 @@ const ColorView = (Editor as any).inherit({
     const getAlphaScaleStep = function (e) {
       let step = 1 / that._alphaChannelScaleWorkWidth;
       if (e.shiftKey) {
-        step *= that.option('keyStep');
+        const { keyStep } = that.option();
+        // @ts-expect-error ts-error
+        step *= keyStep;
       }
 
       step = step > 0.01 ? step : 0.01;
@@ -146,8 +230,9 @@ const ColorView = (Editor as any).inherit({
       that._calculateColorTransparencyByScaleWidth(handleLocation.left + that._alphaChannelHandleWidth / 2);
     };
 
-    return extend(this.callBase(), {
-      upArrow(e) {
+    return {
+      ...super._supportedKeys(),
+      upArrow(e): void {
         e.preventDefault();
         e.stopPropagation();
         if (isCommandKeyPressed(e)) {
@@ -160,7 +245,7 @@ const ColorView = (Editor as any).inherit({
           updateVerticalPaletteValue(getVerticalPaletteStep(e));
         }
       },
-      downArrow(e) {
+      downArrow(e): void {
         e.preventDefault();
         e.stopPropagation();
         if (isCommandKeyPressed(e)) {
@@ -177,7 +262,7 @@ const ColorView = (Editor as any).inherit({
           updateVerticalPaletteValue(-getVerticalPaletteStep(e));
         }
       },
-      rightArrow(e) {
+      rightArrow(e): void {
         e.preventDefault();
         e.stopPropagation();
         if (isCommandKeyPressed(e)) {
@@ -190,7 +275,7 @@ const ColorView = (Editor as any).inherit({
           updateHorizontalPaletteValue(getHorizontalPaletteStep(e));
         }
       },
-      leftArrow(e) {
+      leftArrow(e): void {
         e.preventDefault();
         e.stopPropagation();
         if (isCommandKeyPressed(e)) {
@@ -203,27 +288,29 @@ const ColorView = (Editor as any).inherit({
           updateHorizontalPaletteValue(-getHorizontalPaletteStep(e));
         }
       },
-      enter(e) {
+      enter(e): void {
         this._fireEnterKeyPressed(e);
       },
-    });
-  },
+    };
+  }
 
-  _getDefaultOptions() {
-    return extend(this.callBase(), {
+  _getDefaultOptions(): ColorViewProperties {
+    return {
+      ...super._getDefaultOptions(),
       value: null,
+      // @ts-expect-error ts-error
       matchValue: null,
       onEnterKeyPressed: undefined,
       editAlphaChannel: false,
       keyStep: 1,
       stylingMode: undefined,
-    });
-  },
+    };
+  }
 
-  _defaultOptionsRules() {
-    return this.callBase().concat([
+  _defaultOptionsRules(): DefaultOptionsRule<ColorViewProperties>[] {
+    return super._defaultOptionsRules().concat([
       {
-        device() {
+        device(): boolean {
           return devices.real().deviceType === 'desktop' && !devices.isSimulator();
         },
         options: {
@@ -231,30 +318,30 @@ const ColorView = (Editor as any).inherit({
         },
       },
     ]);
-  },
+  }
 
-  _init() {
-    this.callBase();
+  _init(): void {
+    super._init();
     this._initColorAndOpacity();
     this._initEnterKeyPressedAction();
-  },
+  }
 
-  _initEnterKeyPressedAction() {
+  _initEnterKeyPressedAction(): void {
     this._onEnterKeyPressedAction = this._createActionByOption('onEnterKeyPressed');
-  },
+  }
 
   _fireEnterKeyPressed(e) {
     if (!this._onEnterKeyPressedAction) return;
     this._onEnterKeyPressedAction({
       event: e,
     });
-  },
+  }
 
-  _initColorAndOpacity() {
+  _initColorAndOpacity(): void {
     this._setCurrentColor(this.option('value'));
-  },
+  }
 
-  _setCurrentColor(value) {
+  _setCurrentColor(value): void {
     value = value || BLACK_COLOR;
     const newColor = new Color(value);
     if (!newColor.colorIsInvalid) {
@@ -270,57 +357,55 @@ const ColorView = (Editor as any).inherit({
       }
       this.option('value', this._currentColor.baseColor);
     }
-  },
+  }
 
-  _setBaseColor(value) {
+  _setBaseColor(value): void {
     const color = value || BLACK_COLOR;
     const newColor = new Color(color);
 
     if (!newColor.colorIsInvalid) {
-      const isBaseColorChanged = this._makeRgba(this.option('matchValue') !== this._makeRgba(newColor));
+      const { matchValue } = this.option();
+
+      const isBaseColorChanged = this._makeRgba(matchValue !== this._makeRgba(newColor));
       if (isBaseColorChanged) {
         if (this._$baseColor) {
           this._makeTransparentBackground(this._$baseColor, newColor);
         }
       }
     }
-  },
+  }
 
-  _initMarkup() {
-    this.callBase();
+  _initMarkup(): void {
+    super._initMarkup();
     this.$element().addClass(COLOR_VIEW_CLASS);
     this._renderColorPickerContainer();
-  },
+  }
 
-  _render() {
-    this.callBase();
+  _render(): void {
+    super._render();
 
     this._renderPalette();
     this._renderHueScale();
     this._renderControlsContainer();
     this._renderControls();
     this._renderAlphaChannelElements();
-  },
+  }
 
-  _makeTransparentBackground($el, color) {
+  _makeTransparentBackground($el, color): void {
     if (!(color instanceof Color)) {
       color = new Color(color);
     }
 
     $el.css('backgroundColor', this._makeRgba(color));
-  },
+  }
 
-  _makeRgba(color) {
+  _makeRgba(color): string {
     if (!(color instanceof Color)) {
       color = new Color(color);
     }
 
     return `rgba(${[color.r, color.g, color.b, color.a].join(', ')})`;
-  },
-
-  _renderValue() {
-    this.callBase(this.option('editAlphaChannel') ? this._makeRgba(this._currentColor) : this.option('value'));
-  },
+  }
 
   _renderColorPickerContainer() {
     const $parent = this.$element();
@@ -328,10 +413,10 @@ const ColorView = (Editor as any).inherit({
       .appendTo($parent);
 
     this._renderHtmlRows();
-  },
+  }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _renderHtmlRows(updatedOption) {
+  _renderHtmlRows(updatedOption?): void {
     const $renderedRows = this._$colorPickerContainer.find(`.${COLOR_VIEW_ROW_CLASS}`);
     const renderedRowsCount = $renderedRows.length;
     const rowCount = this.option('editAlphaChannel') ? 2 : 1;
@@ -354,19 +439,20 @@ const ColorView = (Editor as any).inherit({
           $renderedRows.eq(0).after(rows[i]);
         }
       } else {
+        // @ts-expect-error ts-error
         this._$colorPickerContainer.append(rows);
       }
     }
-  },
+  }
 
-  _renderHtmlCellInsideRow(index, $rowParent, additionalClass) {
+  _renderHtmlCellInsideRow(index, $rowParent, additionalClass?): dxElementWrapper {
     return $('<div>')
       .addClass(COLOR_VIEW_CELL_CLASS)
       .addClass(additionalClass)
       .appendTo($rowParent.find(`.${COLOR_VIEW_ROW_CLASS}`).eq(index));
-  },
+  }
 
-  _renderPalette() {
+  _renderPalette(): void {
     const $paletteCell = this._renderHtmlCellInsideRow(0, this._$colorPickerContainer, COLOR_VIEW_PALETTE_CELL_CLASS);
     const $paletteGradientWhite = $('<div>').addClass([COLOR_VIEW_PALETTE_GRADIENT_CLASS, COLOR_VIEW_PALETTE_GRADIENT_WHITE_CLASS].join(' '));
     const $paletteGradientBlack = $('<div>').addClass([COLOR_VIEW_PALETTE_GRADIENT_CLASS, COLOR_VIEW_PALETTE_GRADIENT_BLACK_CLASS].join(' '));
@@ -380,10 +466,11 @@ const ColorView = (Editor as any).inherit({
     this._paletteWidth = getWidth(this._$palette);
 
     this._renderPaletteHandle();
+    // @ts-expect-error ts-error
     this._$palette.append([$paletteGradientWhite, $paletteGradientBlack]);
-  },
+  }
 
-  _renderPaletteHandle() {
+  _renderPaletteHandle(): void {
     this._$paletteHandle = $('<div>')
       .addClass(COLOR_VIEW_PALETTE_HANDLE_CLASS)
       .appendTo(this._$palette);
@@ -420,34 +507,34 @@ const ColorView = (Editor as any).inherit({
     this._paletteHandleHeight = getHeight(this._$paletteHandle);
 
     this._placePaletteHandle();
-  },
+  }
 
-  _placePaletteHandle() {
+  _placePaletteHandle(): void {
     move(this._$paletteHandle, {
       left: Math.round(this._paletteWidth * this._currentColor.hsv.s / 100 - this._paletteHandleWidth / 2),
       top: Math.round(this._paletteHeight - (this._paletteHeight * this._currentColor.hsv.v / 100) - this._paletteHandleHeight / 2),
     });
-  },
+  }
 
-  _calculateColorValue(paletteHandlePosition) {
+  _calculateColorValue(paletteHandlePosition): number {
     const value = Math.floor(paletteHandlePosition.top + this._paletteHandleHeight / 2);
     return 100 - Math.round(value * 100 / this._paletteHeight);
-  },
+  }
 
-  _calculateColorSaturation(paletteHandlePosition) {
+  _calculateColorSaturation(paletteHandlePosition): number {
     const saturation = Math.floor(paletteHandlePosition.left + this._paletteHandleWidth / 2);
     return Math.round(saturation * 100 / this._paletteWidth);
-  },
+  }
 
-  _updateColorFromHsv(hue, saturation, value) {
+  _updateColorFromHsv(hue, saturation, value): void {
     const { a } = this._currentColor;
     this._currentColor = new Color(`hsv(${[hue, saturation, value].join(',')})`);
     this._currentColor.a = a;
     this._updateColorParamsAndColorPreview();
     this.applyColor();
-  },
+  }
 
-  _renderHueScale() {
+  _renderHueScale(): void {
     const $hueScaleCell = this._renderHtmlCellInsideRow(0, this._$colorPickerContainer, COLOR_VIEW_HUE_SCALE_CELL_CLASS);
 
     this._$hueScaleWrapper = $('<div>')
@@ -462,11 +549,12 @@ const ColorView = (Editor as any).inherit({
     this._hueScaleWrapperHeight = getOuterHeight(this._$hueScaleWrapper);
 
     this._renderHueScaleHandle();
-  },
+  }
 
-  _renderHueScaleHandle() {
+  _renderHueScaleHandle(): void {
     this._$hueScaleHandle = $('<div>')
       .addClass(COLOR_VIEW_HUE_SCALE_HANDLE_CLASS)
+      // @ts-expect-error ts-error
       .appendTo(this._$hueScaleWrapper);
     this._createComponent(this._$hueScaleHandle, Draggable, {
       contentTemplate: null,
@@ -483,9 +571,9 @@ const ColorView = (Editor as any).inherit({
     this._hueScaleHandleHeight = getHeight(this._$hueScaleHandle);
 
     this._placeHueScaleHandle();
-  },
+  }
 
-  _placeHueScaleHandle() {
+  _placeHueScaleHandle(): void {
     const hueScaleHeight = this._hueScaleWrapperHeight;
     const handleHeight = this._hueScaleHandleHeight;
     let top = (hueScaleHeight - handleHeight) * (360 - this._currentColor.hsv.h) / 360;
@@ -498,9 +586,9 @@ const ColorView = (Editor as any).inherit({
     }
 
     move(this._$hueScaleHandle, { top: Math.round(top) });
-  },
+  }
 
-  _updateColorHue(handlePosition) {
+  _updateColorHue(handlePosition): void {
     let hue = 360 - Math.round((handlePosition - this._hueScaleHandleHeight / 2) * 360 / (this._hueScaleWrapperHeight - this._hueScaleHandleHeight));
     const saturation = this._currentColor.hsv.s;
     const value = this._currentColor.hsv.v;
@@ -516,22 +604,22 @@ const ColorView = (Editor as any).inherit({
 
     this._updateColorFromHsv(hue, saturation, value);
     this._$palette.css('backgroundColor', this._currentColor.getPureColor().toHex());
-  },
+  }
 
-  _renderControlsContainer() {
+  _renderControlsContainer(): void {
     const $controlsContainerCell = this._renderHtmlCellInsideRow(0, this._$colorPickerContainer);
     this._$controlsContainer = $('<div>')
       .addClass(COLOR_VIEW_CONTROLS_CONTAINER_CLASS)
       .appendTo($controlsContainerCell);
-  },
+  }
 
-  _renderControls() {
+  _renderControls(): void {
     this._renderColorsPreview();
     this._renderRgbInputs();
     this._renderHexInput();
-  },
+  }
 
-  _renderColorsPreview() {
+  _renderColorsPreview(): void {
     const $colorsPreviewContainer = $('<div>')
       .addClass(COLOR_VIEW_COLOR_PREVIEW_CONTAINER_CLASS)
       .appendTo(this._$controlsContainer);
@@ -548,7 +636,7 @@ const ColorView = (Editor as any).inherit({
 
     // @ts-expect-error
     $colorsPreviewContainerInner.append([this._$baseColor, this._$currentColor]);
-  },
+  }
 
   _renderAlphaChannelElements() {
     if (this.option('editAlphaChannel')) {
@@ -560,9 +648,9 @@ const ColorView = (Editor as any).inherit({
       this._renderAlphaChannelScale();
       this._renderAlphaChannelInput();
     }
-  },
+  }
 
-  _renderRgbInputs() {
+  _renderRgbInputs(): void {
     this._rgbInputsWithLabels = [
       this._renderEditorWithLabel({
         editorType: NumberBox,
@@ -590,16 +678,20 @@ const ColorView = (Editor as any).inherit({
       }),
     ];
 
+    // @ts-expect-error ts-error
     this._$controlsContainer.append(this._rgbInputsWithLabels);
 
     this._rgbInputs = [
+      // @ts-expect-error ts-error
       this._rgbInputsWithLabels[0].find('.dx-numberbox').dxNumberBox('instance'),
+      // @ts-expect-error ts-error
       this._rgbInputsWithLabels[1].find('.dx-numberbox').dxNumberBox('instance'),
+      // @ts-expect-error ts-error
       this._rgbInputsWithLabels[2].find('.dx-numberbox').dxNumberBox('instance'),
     ];
-  },
+  }
 
-  _renderEditorWithLabel(options) {
+  _renderEditorWithLabel(options): dxElementWrapper {
     const $editor = $('<div>');
     const $label = $('<label>')
       .addClass(options.labelClass)
@@ -637,7 +729,7 @@ const ColorView = (Editor as any).inherit({
     this.setAria('label', options.labelAriaText, $editor);
 
     return $label;
-  },
+  }
 
   hexInputOptions() {
     return {
@@ -648,9 +740,9 @@ const ColorView = (Editor as any).inherit({
       labelText: '#',
       labelAriaText: messageLocalization.format('dxColorView-ariaHex'),
     };
-  },
+  }
 
-  _renderHexInput() {
+  _renderHexInput(): void {
     this._hexInput = TextBox.getInstance(
       this._renderEditorWithLabel(this.hexInputOptions())
         .appendTo(this._$controlsContainer)
@@ -665,9 +757,9 @@ const ColorView = (Editor as any).inherit({
 
     this.setAria('id', inputId, $hexInput);
     this.setAria('labelledby', inputId, this._$paletteHandle);
-  },
+  }
 
-  _renderAlphaChannelScale() {
+  _renderAlphaChannelScale(): void {
     const $alphaChannelScaleCell = this._renderHtmlCellInsideRow(1, this._$colorPickerContainer, COLOR_VIEW_ALPHA_CHANNEL_CELL_CLASS);
     const $alphaChannelBorder = $('<div>')
       .addClass(COLOR_VIEW_ALPHA_CHANNEL_BORDER_CLASS)
@@ -682,9 +774,9 @@ const ColorView = (Editor as any).inherit({
     this._makeCSSLinearGradient(this._$alphaChannelScale);
 
     this._renderAlphaChannelHandle($alphaChannelScaleCell);
-  },
+  }
 
-  _makeCSSLinearGradient($el) {
+  _makeCSSLinearGradient($el): void {
     const color = this._currentColor;
     const colorAsRgb = `${color.r},${color.g},${color.b}`;
     const rtlEnabled = this.option('rtlEnabled');
@@ -693,9 +785,9 @@ const ColorView = (Editor as any).inherit({
     const backgroundImage = `linear-gradient(-90deg, ${startColor}, ${finishColor})`;
 
     $el.css('backgroundImage', backgroundImage);
-  },
+  }
 
-  _renderAlphaChannelInput() {
+  _renderAlphaChannelInput(): void {
     const that = this;
     const $alphaChannelInputCell = this._renderHtmlCellInsideRow(1, this._$colorPickerContainer);
 
@@ -717,15 +809,16 @@ const ColorView = (Editor as any).inherit({
     })
       .appendTo($alphaChannelInputCell)
       .find('.dx-numberbox')
+      // @ts-expect-error ts-error
       .dxNumberBox('instance');
-  },
+  }
 
-  _updateColorTransparency(transparency) {
+  _updateColorTransparency(transparency): void {
     this._currentColor.a = transparency;
     this.applyColor();
-  },
+  }
 
-  _renderAlphaChannelHandle($parent) {
+  _renderAlphaChannelHandle($parent): void {
     this._$alphaChannelHandle = $('<div>')
       .addClass(COLOR_VIEW_ALPHA_CHANNEL_HANDLE_CLASS)
       .appendTo($parent);
@@ -748,7 +841,7 @@ const ColorView = (Editor as any).inherit({
     this._alphaChannelScaleWorkWidth = getWidth($parent) - this._alphaChannelHandleWidth;
 
     this._placeAlphaChannelHandle();
-  },
+  }
 
   _calculateColorTransparencyByScaleWidth(handlePosition) {
     let transparency = (handlePosition - this._alphaChannelHandleWidth / 2) / this._alphaChannelScaleWorkWidth;
@@ -766,15 +859,15 @@ const ColorView = (Editor as any).inherit({
     const previousTransparency = this._alphaChannelInput.option('value');
     transparency = Math.max(transparency, 0);
     transparency = Math.min(transparency, 1);
-
+    // @ts-expect-error ts-error
     if (transparency === previousTransparency) {
       this._updateByDrag = false;
     } else {
       this._alphaChannelInput.option('value', transparency);
     }
-  },
+  }
 
-  _placeAlphaChannelHandle() {
+  _placeAlphaChannelHandle(): void {
     let left = this._alphaChannelScaleWorkWidth * (1 - this._currentColor.a);
 
     if (left < 0) {
@@ -787,9 +880,9 @@ const ColorView = (Editor as any).inherit({
     move(this._$alphaChannelHandle, {
       left: this.option('rtlEnabled') ? this._alphaChannelScaleWorkWidth - left : left,
     });
-  },
+  }
 
-  applyColor() {
+  applyColor(): void {
     const previousValue = this.option('value');
     const colorValue = this.option('editAlphaChannel') ? this._makeRgba(this._currentColor) : this._currentColor.toHex();
     this._makeTransparentBackground(this._$currentColor, this._currentColor);
@@ -799,18 +892,19 @@ const ColorView = (Editor as any).inherit({
     } else {
       this.option('value', colorValue);
     }
-  },
+  }
 
-  cancelColor() {
+  cancelColor(): void {
     this._initColorAndOpacity();
     this._refreshMarkup();
-  },
+  }
 
-  _updateColor(isHex, args) {
+  _updateColor(isHex, args): void {
     let rgba;
     let newColor;
 
     if (isHex) {
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       newColor = this._validateHex(`#${this._hexInput.option('value')}`);
     } else {
       rgba = this._validateRgb();
@@ -828,13 +922,13 @@ const ColorView = (Editor as any).inherit({
       this.applyColor();
       this._refreshMarkup();
     }
-  },
+  }
 
   _validateHex(hex) {
     return this._currentColor.isValidHex(hex) ? hex : this._currentColor.toHex();
-  },
+  }
 
-  _validateRgb() {
+  _validateRgb(): number[] {
     let r = this._rgbInputs[0].option('value');
     let g = this._rgbInputs[1].option('value');
     let b = this._rgbInputs[2].option('value');
@@ -844,11 +938,11 @@ const ColorView = (Editor as any).inherit({
       g = this._currentColor.g;
       b = this._currentColor.b;
     }
-
+    // @ts-expect-error ts-error
     return [r, g, b];
-  },
+  }
 
-  _refreshMarkup() {
+  _refreshMarkup(): void {
     this._placeHueScaleHandle();
     this._placePaletteHandle();
     this._updateColorParamsAndColorPreview();
@@ -857,9 +951,9 @@ const ColorView = (Editor as any).inherit({
       this._updateColorTransparency(this._currentColor.a);
       this._placeAlphaChannelHandle();
     }
-  },
+  }
 
-  _updateColorParamsAndColorPreview() {
+  _updateColorParamsAndColorPreview(): void {
     this._suppressEditorsValueUpdating = true;
     this._hexInput.option('value', this._currentColor.toHex().replace('#', ''));
     this._rgbInputs[0].option('value', this._currentColor.r);
@@ -871,9 +965,9 @@ const ColorView = (Editor as any).inherit({
       this._makeCSSLinearGradient.call(this, this._$alphaChannelScale);
       this._alphaChannelInput.option('value', this._currentColor.a);
     }
-  },
+  }
 
-  _optionChanged(args) {
+  _optionChanged(args: OptionChanged<ColorViewProperties>): void {
     const { value } = args;
 
     switch (args.name) {
@@ -884,7 +978,7 @@ const ColorView = (Editor as any).inherit({
         }
 
         this._updateByDrag = false;
-        this.callBase({ ...args, value: this.option('value') });
+        super._optionChanged({ ...args, value: this.option('value') });
         break;
       case 'matchValue':
         this._setBaseColor(value);
@@ -904,10 +998,10 @@ const ColorView = (Editor as any).inherit({
         this._renderControls();
         break;
       default:
-        this.callBase(args);
+        super._optionChanged(args);
     }
-  },
-});
+  }
+}
 
 registerComponent('dxColorView', ColorView);
 
diff --git a/packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts b/packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts
index 7bfd29a5b5a9..0663a65e65a7 100644
--- a/packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts
+++ b/packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts
@@ -27,7 +27,6 @@ import { hasWindow } from '@js/core/utils/window';
 import type { DxEvent } 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 type dxPopup from '@js/ui/popup';
 import Popup from '@js/ui/popup/ui.popup';
 import { focused } from '@js/ui/widget/selectors';
 import errors from '@js/ui/widget/ui.errors';
@@ -71,7 +70,7 @@ class DropDownEditor<
 
   _$popup?: dxElementWrapper;
 
-  _popup?: dxPopup;
+  _popup?: Popup;
 
   _$templateWrapper?: dxElementWrapper;
 
@@ -639,7 +638,7 @@ class DropDownEditor<
     // @ts-expect-error ts-error
     this._popup = this._createComponent(this._$popup, Popup, popupConfig);
 
-    this._popup!.on({
+    this._popup.on({
       showing: this._popupShowingHandler.bind(this),
       shown: this._popupShownHandler.bind(this),
       hiding: this._popupHidingHandler.bind(this),
@@ -650,7 +649,7 @@ class DropDownEditor<
     this._attachPopupKeyHandler();
 
     this._contentReadyHandler();
-    // @ts-expect-error ts-error
+
     this._setPopupContentId(this._popup.$content());
 
     this._bindInnerWidgetOptions(this._popup, 'dropDownOptions');
@@ -777,7 +776,7 @@ class DropDownEditor<
     if (!this._popup) {
       return;
     }
-    // @ts-expect-error ts-error
+
     const $popupOverlayContent = this._popup.$overlayContent();
     const isOverlayFlipped = e.position?.v?.flip;
     const shouldIndentForLabel = labelMode !== 'hidden' && labelMode !== 'outside' && stylingMode === 'outlined';
@@ -827,7 +826,7 @@ class DropDownEditor<
 
     if (this._popup?.option('visible')) {
       const { top: myTop } = animationPosition.setup(this.$element());
-      // @ts-expect-error ts-error
+
       const { top: popupTop } = animationPosition.setup(this._popup.$content());
       // @ts-expect-error ts-error
       positionSide = (myTop + this.option('popupPosition').offset.v) > popupTop ? 'bottom' : 'top';
diff --git a/packages/devextreme/js/__internal/ui/m_select_box.ts b/packages/devextreme/js/__internal/ui/m_select_box.ts
index ca058427c216..7818b2f241f3 100644
--- a/packages/devextreme/js/__internal/ui/m_select_box.ts
+++ b/packages/devextreme/js/__internal/ui/m_select_box.ts
@@ -669,7 +669,6 @@ class SelectBox<
             && !isOverlayTarget;
 
     if (shouldCancelSearch) {
-      // @ts-expect-error ts-error
       const isPopupVisible = this._popup?._hideAnimationProcessing;
       this._clearSearchTimer();
       if (isPopupVisible) {
diff --git a/packages/devextreme/js/__internal/ui/m_switch.ts b/packages/devextreme/js/__internal/ui/m_switch.ts
index d2de40a8152d..ad546e25ada8 100644
--- a/packages/devextreme/js/__internal/ui/m_switch.ts
+++ b/packages/devextreme/js/__internal/ui/m_switch.ts
@@ -7,12 +7,16 @@ import { addNamespace } from '@js/common/core/events/utils/index';
 import messageLocalization from '@js/common/core/localization/message';
 import registerComponent from '@js/core/component_registrator';
 import devices from '@js/core/devices';
+import type { DefaultOptionsRule } from '@js/core/options/utils';
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import type { DeferredObj } from '@js/core/utils/deferred';
 import { Deferred } from '@js/core/utils/deferred';
-import { extend } from '@js/core/utils/extend';
 import { getBoundingRect } from '@js/core/utils/position';
 import { getOuterWidth } from '@js/core/utils/size';
-import Editor from '@js/ui/editor/editor';
+import type { Properties } from '@js/ui/switch';
+import type { OptionChanged } from '@ts/core/widget/types';
+import Editor from '@ts/ui/editor/editor';
 
 const SWITCH_CLASS = 'dx-switch';
 const SWITCH_WRAPPER_CLASS = `${SWITCH_CLASS}-wrapper`;
@@ -25,10 +29,31 @@ const SWITCH_OFF_CLASS = `${SWITCH_CLASS}-off`;
 
 const SWITCH_ANIMATION_DURATION = 100;
 
-// @ts-expect-error
-const Switch = Editor.inherit({
-  _supportedKeys() {
-    const isRTL = this.option('rtlEnabled');
+class Switch extends Editor<Properties> {
+  _$switchWrapper!: dxElementWrapper;
+
+  _$switchContainer!: dxElementWrapper;
+
+  _$switchInner!: dxElementWrapper;
+
+  _$handle!: dxElementWrapper;
+
+  _$labelOn?: dxElementWrapper;
+
+  _$labelOff?: dxElementWrapper;
+
+  _animating?: boolean;
+
+  _swiping?: boolean;
+
+  _feedbackDeferred?: DeferredObj<unknown>;
+
+  _$submitElement!: dxElementWrapper;
+
+  _clickAction?: (event?: Record<string, unknown>) => void;
+
+  _supportedKeys(): Record<string, (e: KeyboardEvent, options?: Record<string, unknown>) => void> {
+    const { rtlEnabled } = this.option();
 
     const click = function (e) {
       e.preventDefault();
@@ -40,36 +65,35 @@ const Switch = Editor.inherit({
       this._saveValueChangeEvent(e);
       this._animateValue(value);
     };
-    return extend(this.callBase(), {
+    return {
+      ...super._supportedKeys(),
       space: click,
       enter: click,
-      leftArrow: move.bind(this, !!isRTL),
-      rightArrow: move.bind(this, !isRTL),
-    });
-  },
+      leftArrow: move.bind(this, !!rtlEnabled),
+      rightArrow: move.bind(this, !rtlEnabled),
+    };
+  }
 
-  _useTemplates() {
+  // eslint-disable-next-line class-methods-use-this
+  _useTemplates(): boolean {
     return false;
-  },
+  }
 
-  _getDefaultOptions() {
-    return extend(this.callBase(), {
+  _getDefaultOptions(): Properties {
+    return {
+      ...super._getDefaultOptions(),
       hoverStateEnabled: true,
-
       activeStateEnabled: true,
-
       switchedOnText: messageLocalization.format('dxSwitch-switchedOnText'),
-
       switchedOffText: messageLocalization.format('dxSwitch-switchedOffText'),
-
       value: false,
-    });
-  },
+    };
+  }
 
-  _defaultOptionsRules() {
-    return this.callBase().concat([
+  _defaultOptionsRules(): DefaultOptionsRule<Properties>[] {
+    return super._defaultOptionsRules().concat([
       {
-        device() {
+        device(): boolean {
           return devices.real().deviceType === 'desktop' && !devices.isSimulator();
         },
         options: {
@@ -77,12 +101,16 @@ const Switch = Editor.inherit({
         },
       },
     ]);
-  },
+  }
 
-  _feedbackHideTimeout: 0,
-  _animating: false,
+  _init(): void {
+    super._init();
 
-  _initMarkup() {
+    this._feedbackHideTimeout = 0;
+    this._animating = false;
+  }
+
+  _initMarkup(): void {
     this._renderContainers();
 
     this.$element()
@@ -97,19 +125,19 @@ const Switch = Editor.inherit({
 
     this._renderSwipeable();
 
-    this.callBase();
+    super._initMarkup();
 
     this._renderSwitchInner();
     this._renderLabels();
     this._renderValue();
-  },
+  }
 
-  _getInnerOffset(value, offset) {
+  _getInnerOffset(value, offset): string {
     const ratio = (offset - this._offsetDirection() * Number(!value)) / 2;
     return `${100 * ratio}%`;
-  },
+  }
 
-  _getHandleOffset(value, offset) {
+  _getHandleOffset(value, offset): string {
     if (this.option('rtlEnabled')) {
       value = !value;
     }
@@ -119,7 +147,7 @@ const Switch = Editor.inherit({
       return `${calcValue}%`;
     }
     return `${100 * -offset}%`;
-  },
+  }
 
   _renderSwitchInner() {
     this._$switchInner = $('<div>')
@@ -129,7 +157,7 @@ const Switch = Editor.inherit({
     this._$handle = $('<div>')
       .addClass(SWITCH_HANDLE_CLASS)
       .appendTo(this._$switchInner);
-  },
+  }
 
   _renderLabels() {
     this._$labelOn = $('<div>')
@@ -141,7 +169,7 @@ const Switch = Editor.inherit({
       .appendTo(this._$switchInner);
 
     this._setLabelsText();
-  },
+  }
 
   _renderContainers() {
     this._$switchContainer = $('<div>')
@@ -150,7 +178,7 @@ const Switch = Editor.inherit({
     this._$switchWrapper = $('<div>')
       .addClass(SWITCH_WRAPPER_CLASS)
       .append(this._$switchContainer);
-  },
+  }
 
   _renderSwipeable() {
     this._createComponent(this.$element(), Swipeable, {
@@ -161,53 +189,54 @@ const Switch = Editor.inherit({
       onEnd: this._swipeEndHandler.bind(this),
       itemSizeFunc: this._getItemSizeFunc.bind(this),
     });
-  },
+  }
 
-  _getItemSizeFunc() {
+  _getItemSizeFunc(): number {
     return getOuterWidth(this._$switchContainer, true) - getBoundingRect(this._$handle.get(0)).width;
-  },
+  }
 
-  _renderSubmitElement() {
+  _renderSubmitElement(): void {
     this._$submitElement = $('<input>')
       .attr('type', 'hidden')
       .appendTo(this.$element());
-  },
+  }
 
-  _getSubmitElement() {
+  _getSubmitElement(): dxElementWrapper {
     return this._$submitElement;
-  },
+  }
 
-  _offsetDirection() {
+  _offsetDirection(): number {
     return this.option('rtlEnabled') ? -1 : 1;
-  },
+  }
 
-  _renderPosition(state, swipeOffset) {
+  _renderPosition(state, swipeOffset): void {
     const innerOffset = this._getInnerOffset(state, swipeOffset);
     const handleOffset = this._getHandleOffset(state, swipeOffset);
 
     this._$switchInner.css('transform', ` translateX(${innerOffset})`);
     this._$handle.css('transform', ` translateX(${handleOffset})`);
-  },
+  }
 
-  _validateValue() {
+  _validateValue(): void {
     const check = this.option('value');
     if (typeof check !== 'boolean') {
       this._options.silent('value', !!check);
     }
-  },
+  }
 
-  _renderClick() {
+  _renderClick(): void {
+    // @ts-expect-error ts-error
     const eventName = addNamespace(clickEventName, this.NAME);
     const $element = this.$element();
     this._clickAction = this._createAction(this._clickHandler.bind(this));
 
     eventsEngine.off($element, eventName);
     eventsEngine.on($element, eventName, (e) => {
-      this._clickAction({ event: e });
+      this._clickAction?.({ event: e });
     });
-  },
+  }
 
-  _clickHandler(args) {
+  _clickHandler(args): void {
     const e = args.event;
 
     this._saveValueChangeEvent(e);
@@ -217,9 +246,9 @@ const Switch = Editor.inherit({
     }
 
     this._animateValue(!this.option('value'));
-  },
+  }
 
-  _animateValue(value) {
+  _animateValue(value): void {
     const startValue = this.option('value');
     const endValue = value;
 
@@ -239,29 +268,25 @@ const Switch = Editor.inherit({
     const toInnerConfig = {};
     const fromHandleConfig = {};
     const toHandlerConfig = {};
-    // @ts-expect-error
+    // @ts-expect-error ts-error
     fromInnerConfig.transform = ` translateX(${fromInnerOffset})`;
-    // @ts-expect-error
+    // @ts-expect-error ts-error
     toInnerConfig.transform = ` translateX(${toInnerOffset})`;
-    // @ts-expect-error
+    // @ts-expect-error ts-error
     fromHandleConfig.transform = ` translateX(${fromHandleOffset})`;
-    // @ts-expect-error
+    // @ts-expect-error ts-error
     toHandlerConfig.transform = ` translateX(${toHandleOffset})`;
 
     this.$element().toggleClass(SWITCH_ON_VALUE_CLASS, endValue);
-
+    // @ts-expect-error ts-error
     fx.animate(this._$handle, {
-      // @ts-expect-error
       from: fromHandleConfig,
-      // @ts-expect-error
       to: toHandlerConfig,
       duration: SWITCH_ANIMATION_DURATION,
     });
-
+    // @ts-expect-error ts-error
     fx.animate(this._$switchInner, {
-      // @ts-expect-error
       from: fromInnerConfig,
-      // @ts-expect-error
       to: toInnerConfig,
       duration: SWITCH_ANIMATION_DURATION,
       complete() {
@@ -269,9 +294,9 @@ const Switch = Editor.inherit({
         that.option('value', endValue);
       },
     });
-  },
+  }
 
-  _swipeStartHandler(e) {
+  _swipeStartHandler(e): void {
     const state = this.option('value');
     const rtlEnabled = this.option('rtlEnabled');
     const maxOffOffset = rtlEnabled ? 0 : 1;
@@ -283,14 +308,16 @@ const Switch = Editor.inherit({
 
     this._feedbackDeferred = Deferred();
     lock(this._feedbackDeferred);
-    this._toggleActiveState(this.$element(), this.option('activeStateEnabled'));
-  },
+    const { activeStateEnabled } = this.option();
+    // @ts-expect-error ts-error
+    this._toggleActiveState(this.$element(), activeStateEnabled);
+  }
 
-  _swipeUpdateHandler(e) {
+  _swipeUpdateHandler(e): void {
     this._renderPosition(this.option('value'), e.event.offset);
-  },
+  }
 
-  _swipeEndHandler(e) {
+  _swipeEndHandler(e): void {
     const that = this;
     const offsetDirection = this._offsetDirection();
     const toInnerConfig = {};
@@ -302,57 +329,59 @@ const Switch = Editor.inherit({
     toInnerConfig.transform = ` translateX(${innerOffset})`;
     // @ts-expect-error
     toHandleConfig.transform = ` translateX(${handleOffset})`;
-
+    // @ts-expect-error ts-error
     fx.animate(this._$handle, {
-      // @ts-expect-error
       to: toHandleConfig,
       duration: SWITCH_ANIMATION_DURATION,
     });
-
+    // @ts-expect-error ts-error
     fx.animate(this._$switchInner, {
-      // @ts-expect-error
       to: toInnerConfig,
       duration: SWITCH_ANIMATION_DURATION,
       complete() {
         that._swiping = false;
+        // @ts-expect-error ts-error
         const pos = that.option('value') + offsetDirection * e.event.targetOffset;
         that._saveValueChangeEvent(e.event);
         that.option('value', Boolean(pos));
-        that._feedbackDeferred.resolve();
+        that._feedbackDeferred?.resolve();
         that._toggleActiveState(that.$element(), false);
       },
     });
-  },
+  }
 
-  _renderValue() {
+  _renderValue(): void {
     this._validateValue();
 
-    const value = this.option('value');
+    const { value } = this.option();
     this._renderPosition(value, 0);
 
     this.$element().toggleClass(SWITCH_ON_VALUE_CLASS, value);
+    // @ts-expect-error ts-error
     this._getSubmitElement().val(value);
     this.setAria({
       checked: value,
       label: value ? this.option('switchedOnText') : this.option('switchedOffText'),
     });
-  },
+  }
 
-  _setLabelsText() {
-    this._$labelOn && this._$labelOn.text(this.option('switchedOnText'));
-    this._$labelOff && this._$labelOff.text(this.option('switchedOffText'));
-  },
+  _setLabelsText(): void {
+    const { switchedOnText, switchedOffText } = this.option();
+    // @ts-expect-error ts-error
+    this._$labelOn?.text(switchedOnText);
+    // @ts-expect-error ts-error
+    this._$labelOff?.text(switchedOffText);
+  }
 
-  _visibilityChanged(visible) {
+  _visibilityChanged(visible: boolean): void {
     if (visible) {
       this.repaint();
     }
-  },
+  }
 
-  _optionChanged(args) {
+  _optionChanged(args: OptionChanged<Properties>): void {
     switch (args.name) {
       case 'width':
-        delete this._marginBound;
         this._refresh();
         break;
       case 'switchedOnText':
@@ -361,13 +390,13 @@ const Switch = Editor.inherit({
         break;
       case 'value':
         this._renderValue();
-        this.callBase(args);
+        super._optionChanged(args);
         break;
       default:
-        this.callBase(args);
+        super._optionChanged(args);
     }
-  },
-});
+  }
+}
 
 registerComponent('dxSwitch', Switch);
 
diff --git a/packages/devextreme/js/__internal/ui/m_tag_box.ts b/packages/devextreme/js/__internal/ui/m_tag_box.ts
index c634675461d6..6a20782b5111 100644
--- a/packages/devextreme/js/__internal/ui/m_tag_box.ts
+++ b/packages/devextreme/js/__internal/ui/m_tag_box.ts
@@ -732,8 +732,7 @@ class TagBox<
     this._renderTags()
     // @ts-expect-error ts-error
       .done(() => {
-        // @ts-expect-error ts-error
-        this._popup && this._popup.refreshPosition();
+        this._popup?.refreshPosition();
         d.resolve();
       })
       .fail(d.reject);
@@ -1441,7 +1440,7 @@ class TagBox<
 
     const useButtons = applyValueMode === 'useButtons';
     const valueIndex = this._valueIndex(value);
-    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+
     const values = (useButtons ? this._list?.option('selectedItemKeys') || [] : this._getValue()).slice();
 
     if (valueIndex >= 0) {
diff --git a/packages/devextreme/js/__internal/ui/m_text_area.ts b/packages/devextreme/js/__internal/ui/m_text_area.ts
index e96b7593b6eb..9a37b044d812 100644
--- a/packages/devextreme/js/__internal/ui/m_text_area.ts
+++ b/packages/devextreme/js/__internal/ui/m_text_area.ts
@@ -3,72 +3,82 @@ import scrollEvents from '@js/common/core/events/gesture/emitter.gesture.scroll'
 import pointerEvents from '@js/common/core/events/pointer';
 import { addNamespace, eventData } from '@js/common/core/events/utils/index';
 import registerComponent from '@js/core/component_registrator';
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { ensureDefined, noop } from '@js/core/utils/common';
-import { extend } from '@js/core/utils/extend';
 import {
   getElementBoxParams, getOuterHeight, getVerticalOffsets, parseHeight,
 } from '@js/core/utils/size';
 import { isDefined } from '@js/core/utils/type';
 import { getWindow, hasWindow } from '@js/core/utils/window';
-import TextBox from '@js/ui/text_box';
+import type { Properties } from '@js/ui/text_area';
+import type { OptionChanged } from '@ts/core/widget/types';
+import TextBox from '@ts/ui/text_box/m_text_box';
 import { allowScroll, prepareScrollData } from '@ts/ui/text_box/m_utils.scroll';
 
 const TEXTAREA_CLASS = 'dx-textarea';
 const TEXTEDITOR_INPUT_CLASS_AUTO_RESIZE = 'dx-texteditor-input-auto-resize';
 
-// @ts-expect-error
-const TextArea = TextBox.inherit({
-  _getDefaultOptions() {
-    return extend(this.callBase(), {
+export interface TextAreaProperties extends Omit<Properties,
+'onChange' | 'onCopy' | 'onCut' | 'onEnterKey' | 'onFocusIn' | 'onFocusOut' | 'onInput' |
+'onKeyDown' | 'onKeyUp' | 'onPaste' | 'onValueChanged' | 'onContentReady' | 'onDisposing' |
+'onOptionChanged' | 'onInitialized'
+> {}
+class TextArea extends TextBox<TextAreaProperties> {
+  _eventY!: number;
+
+  _getDefaultOptions(): TextAreaProperties {
+    return {
+      ...super._getDefaultOptions(),
       spellcheck: true,
-      minHeight: undefined,
-      maxHeight: undefined,
       autoResizeEnabled: false,
-    });
-  },
+    };
+  }
 
-  _initMarkup() {
+  _initMarkup(): void {
     this.$element().addClass(TEXTAREA_CLASS);
-    this.callBase();
+    super._initMarkup();
     this.setAria('multiline', 'true');
-  },
+  }
 
-  _renderContentImpl() {
+  _renderContentImpl(): void {
     this._updateInputHeight();
-    this.callBase();
-  },
+    super._renderContentImpl();
+  }
 
-  _renderInput() {
-    this.callBase();
+  _renderInput(): void {
+    super._renderInput();
     this._renderScrollHandler();
-  },
+  }
 
-  _createInput() {
+  _createInput(): dxElementWrapper {
     const $input = $('<textarea>');
     this._applyInputAttributes($input, this.option('inputAttr'));
     this._updateInputAutoResizeAppearance($input);
 
     return $input;
-  },
+  }
 
-  _setInputMinHeight: noop,
+  _setInputMinHeight(): void {}
 
-  _renderScrollHandler() {
+  _renderScrollHandler(): void {
     this._eventY = 0;
     const $input = this._input();
     const initScrollData = prepareScrollData($input, true);
 
+    // @ts-expect-error ts-error
     eventsEngine.on($input, addNamespace(scrollEvents.init, this.NAME), initScrollData, noop);
+    // @ts-expect-error ts-error
     eventsEngine.on($input, addNamespace(pointerEvents.down, this.NAME), this._pointerDownHandler.bind(this));
+    // @ts-expect-error ts-error
     eventsEngine.on($input, addNamespace(pointerEvents.move, this.NAME), this._pointerMoveHandler.bind(this));
-  },
+  }
 
-  _pointerDownHandler(e) {
+  _pointerDownHandler(e): void {
     this._eventY = eventData(e).y;
-  },
+  }
 
-  _pointerMoveHandler(e) {
+  _pointerMoveHandler(e): void {
     const currentEventY = eventData(e).y;
     const delta = this._eventY - currentEventY;
 
@@ -78,9 +88,9 @@ const TextArea = TextBox.inherit({
     }
 
     this._eventY = currentEventY;
-  },
+  }
 
-  _renderDimensions() {
+  _renderDimensions(): void {
     const $element = this.$element();
     const element = $element.get(0);
     const width = this._getOptionValue('width', element);
@@ -89,42 +99,46 @@ const TextArea = TextBox.inherit({
     const maxHeight = this.option('maxHeight');
 
     $element.css({
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
       minHeight: minHeight !== undefined ? minHeight : '',
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
       maxHeight: maxHeight !== undefined ? maxHeight : '',
       width,
       height,
     });
-  },
+  }
 
-  _resetDimensions() {
+  _resetDimensions(): void {
     this.$element().css({
       height: '',
       minHeight: '',
       maxHeight: '',
     });
-  },
+  }
 
-  _renderEvents() {
+  _renderEvents(): void {
     if (this.option('autoResizeEnabled')) {
+      // @ts-expect-error ts-error
       eventsEngine.on(this._input(), addNamespace('input paste', this.NAME), this._updateInputHeight.bind(this));
     }
 
-    this.callBase();
-  },
+    super._renderEvents();
+  }
 
-  _refreshEvents() {
+  _refreshEvents(): void {
+    // @ts-expect-error ts-error
     eventsEngine.off(this._input(), addNamespace('input paste', this.NAME));
-    this.callBase();
-  },
+    super._refreshEvents();
+  }
 
-  _getHeightDifference($input) {
-    return getVerticalOffsets(this._$element.get(0), false)
-            + getVerticalOffsets(this._$textEditorContainer.get(0), false)
-            + getVerticalOffsets(this._$textEditorInputContainer.get(0), true)
-            + getElementBoxParams('height', getWindow().getComputedStyle($input.get(0))).margin;
-  },
+  _getHeightDifference($input: dxElementWrapper): number {
+    return getVerticalOffsets(this.$element().get(0), false)
+      + getVerticalOffsets(this._$textEditorContainer.get(0), false)
+      + getVerticalOffsets(this._$textEditorInputContainer.get(0), true)
+      + getElementBoxParams('height', getWindow().getComputedStyle($input.get(0))).margin;
+  }
 
-  _updateInputHeight() {
+  _updateInputHeight(): void {
     if (!hasWindow()) {
       return;
     }
@@ -140,7 +154,7 @@ const TextArea = TextBox.inherit({
     }
 
     this._resetDimensions();
-    this._$element.css('height', getOuterHeight(this._$element));
+    this.$element().css('height', getOuterHeight(this.$element()));
     $input.css('height', 0);
 
     const heightDifference = this._getHeightDifference($input);
@@ -166,50 +180,52 @@ const TextArea = TextBox.inherit({
     $input.css('height', inputHeight);
 
     if (autoHeightResizing) {
-      this._$element.css('height', 'auto');
+      this.$element().css('height', 'auto');
     }
-  },
+  }
 
   _getBoundaryHeight(optionName) {
     const boundaryValue = this.option(optionName);
 
     if (isDefined(boundaryValue)) {
-      return typeof boundaryValue === 'number' ? boundaryValue : parseHeight(boundaryValue, this.$element().get(0).parentElement, this._$element.get(0));
+      return typeof boundaryValue === 'number' ? boundaryValue : parseHeight(boundaryValue, this.$element().get(0).parentElement, this.$element().get(0));
     }
-  },
+  }
 
-  _renderInputType: noop,
+  _renderInputType(): void {}
 
-  _visibilityChanged(visible) {
+  _visibilityChanged(visible: boolean): void {
     if (visible) {
       this._updateInputHeight();
     }
-  },
+  }
 
-  _updateInputAutoResizeAppearance($input, isAutoResizeEnabled) {
+  _updateInputAutoResizeAppearance($input: dxElementWrapper, isAutoResizeEnabled?): void {
     if ($input) {
       const autoResizeEnabled = ensureDefined(isAutoResizeEnabled, this.option('autoResizeEnabled'));
 
       $input.toggleClass(TEXTEDITOR_INPUT_CLASS_AUTO_RESIZE, autoResizeEnabled);
     }
-  },
+  }
 
-  _dimensionChanged() {
+  _dimensionChanged(): void {
     if (this.option('visible')) {
       this._updateInputHeight();
     }
-  },
+  }
+
+  _optionChanged(args: OptionChanged<TextAreaProperties>): void {
+    const { name, value } = args;
 
-  _optionChanged(args) {
-    switch (args.name) {
+    switch (name) {
       case 'autoResizeEnabled':
-        this._updateInputAutoResizeAppearance(this._input(), args.value);
+        this._updateInputAutoResizeAppearance(this._input(), value);
         this._refreshEvents();
         this._updateInputHeight();
         break;
       case 'value':
       case 'height':
-        this.callBase(args);
+        super._optionChanged(args);
         this._updateInputHeight();
         break;
       case 'minHeight':
@@ -218,14 +234,16 @@ const TextArea = TextBox.inherit({
         this._updateInputHeight();
         break;
       case 'visible':
-        this.callBase(args);
-        args.value && this._updateInputHeight();
+        super._optionChanged(args);
+        if (value) {
+          this._updateInputHeight();
+        }
         break;
       default:
-        this.callBase(args);
+        super._optionChanged(args);
     }
-  },
-});
+  }
+}
 
 registerComponent('dxTextArea', TextArea);
 
diff --git a/packages/devextreme/js/__internal/ui/m_validation_engine.ts b/packages/devextreme/js/__internal/ui/m_validation_engine.ts
index 35858d1ff3c2..0780e63b6d22 100644
--- a/packages/devextreme/js/__internal/ui/m_validation_engine.ts
+++ b/packages/devextreme/js/__internal/ui/m_validation_engine.ts
@@ -4,11 +4,12 @@ import numberLocalization from '@js/common/core/localization/number';
 import Class from '@js/core/class';
 import errors from '@js/core/errors';
 import { EventsStrategy } from '@js/core/events_strategy';
-// @ts-expect-error
+// @ts-expect-error ts-error
 import { grep } from '@js/core/utils/common';
+import type { DeferredObj } from '@js/core/utils/deferred';
 import {
   Deferred,
-  // @ts-expect-error
+  // @ts-expect-error ts-error
   fromPromise,
 } from '@js/core/utils/deferred';
 import { extend } from '@js/core/utils/extend';
@@ -22,6 +23,9 @@ import {
   isPromise,
   isString,
 } from '@js/core/utils/type';
+import type { ValidationResult } from '@js/ui/validation_group';
+
+import type Validator from './m_validator';
 
 const EMAIL_VALIDATION_REGEX = /^[\d\w.+_-]+@[\d\w._-]+\.[\w]+$/i;
 
@@ -38,13 +42,13 @@ class BaseRuleValidator {
     this.NAME = 'base';
   }
 
-  defaultMessage(value) {
-    // @ts-expect-error
+  defaultMessage(value): string {
+    // @ts-expect-error ts-error
     return messageLocalization.getFormatter(`validation-${this.NAME}`)(value);
   }
 
-  defaultFormattedMessage(value) {
-    // @ts-expect-error
+  defaultFormattedMessage(value): string {
+    // @ts-expect-error ts-error
     return messageLocalization.getFormatter(`validation-${this.NAME}-formatted`)(value);
   }
 
@@ -58,12 +62,12 @@ class BaseRuleValidator {
 
     if (valueArray.length) {
       valueArray.every((itemValue) => {
-        // @ts-expect-error
+        // @ts-expect-error ts-error
         result = this._validate(itemValue, rule);
         return result;
       });
     } else {
-      // @ts-expect-error
+      // @ts-expect-error ts-error
       result = this._validate(null, rule);
     }
 
@@ -340,8 +344,25 @@ const rulesValidators = {
   email: new EmailRuleValidator(),
 };
 
-const GroupConfig = Class.inherit({
-  ctor(group, isRemovable) {
+// @ts-expect-error dxClass inheritance issue
+class GroupConfig extends (Class.inherit({}) as new() => {}) {
+  group?: GroupConfig;
+
+  validators!: Validator[];
+
+  _isRemovable?: boolean;
+
+  _eventsStrategy!: EventsStrategy;
+
+  _pendingValidators!: Validator[];
+
+  _validationInfo!: {
+    result: ValidationResult;
+    deferred: DeferredObj<ValidationResult> | null;
+    skipValidation: boolean;
+  };
+
+  ctor(group, isRemovable): void {
     this.group = group;
     this.validators = [];
     this._isRemovable = isRemovable;
@@ -349,9 +370,9 @@ const GroupConfig = Class.inherit({
     this._onValidatorStatusChanged = this._onValidatorStatusChanged.bind(this);
     this._resetValidationInfo();
     this._eventsStrategy = new EventsStrategy(this);
-  },
+  }
 
-  validate() {
+  validate(): void {
     const result = {
       isValid: true,
       brokenRules: [],
@@ -368,7 +389,7 @@ const GroupConfig = Class.inherit({
       if (validatorResult.brokenRules) {
         result.brokenRules = result.brokenRules.concat(validatorResult.brokenRules);
       }
-      // @ts-expect-error
+      // @ts-expect-error ts-error
       result.validators.push(validator);
       if (validatorResult.status === STATUS.pending) {
         this._addPendingValidator(validator);
@@ -384,23 +405,23 @@ const GroupConfig = Class.inherit({
     }
     this._updateValidationInfo(result);
     return extend({}, this._validationInfo.result);
-  },
+  }
 
   _subscribeToChangeEvents(validator) {
     validator.on('validating', this._onValidatorStatusChanged);
     validator.on('validated', this._onValidatorStatusChanged);
-  },
+  }
 
   _unsubscribeFromChangeEvents(validator) {
     validator.off('validating', this._onValidatorStatusChanged);
     validator.off('validated', this._onValidatorStatusChanged);
-  },
+  }
 
   _unsubscribeFromAllChangeEvents() {
     each(this.validators, (_, validator) => {
       this._unsubscribeFromChangeEvents(validator);
     });
-  },
+  }
 
   _updateValidationInfo(result) {
     this._validationInfo.result = result;
@@ -411,21 +432,21 @@ const GroupConfig = Class.inherit({
       this._validationInfo.deferred = Deferred();
       this._validationInfo.result.complete = this._validationInfo.deferred.promise();
     }
-  },
+  }
 
   _addPendingValidator(validator) {
     const foundValidator = grep(this._pendingValidators, (val) => val === validator)[0];
     if (!foundValidator) {
       this._pendingValidators.push(validator);
     }
-  },
+  }
 
   _removePendingValidator(validator) {
     const index = this._pendingValidators.indexOf(validator);
     if (index >= 0) {
       this._pendingValidators.splice(index, 1);
     }
-  },
+  }
 
   _orderBrokenRules(brokenRules) {
     let orderedRules = [];
@@ -436,7 +457,7 @@ const GroupConfig = Class.inherit({
       }
     });
     return orderedRules;
-  },
+  }
 
   _updateBrokenRules(result) {
     if (!this._validationInfo.result) {
@@ -448,7 +469,7 @@ const GroupConfig = Class.inherit({
       brokenRules = rules.concat(result.brokenRules);
     }
     this._validationInfo.result.brokenRules = this._orderBrokenRules(brokenRules);
-  },
+  }
 
   _onValidatorStatusChanged(result) {
     if (result.status === STATUS.pending) {
@@ -456,9 +477,9 @@ const GroupConfig = Class.inherit({
       return;
     }
     this._resolveIfComplete(result);
-  },
+  }
 
-  _resolveIfComplete(result) {
+  _resolveIfComplete(result): void {
     this._removePendingValidator(result.validator);
     this._updateBrokenRules(result);
     if (!this._pendingValidators.length) {
@@ -466,6 +487,7 @@ const GroupConfig = Class.inherit({
       if (!this._validationInfo.result) {
         return;
       }
+      // @ts-expect-error ts-error
       this._validationInfo.result.status = this._validationInfo.result.brokenRules.length === 0 ? STATUS.valid : STATUS.invalid;
       this._validationInfo.result.isValid = this._validationInfo.result.status === STATUS.valid;
       const res = extend({}, this._validationInfo.result, { complete: null });
@@ -476,59 +498,60 @@ const GroupConfig = Class.inherit({
         deferred.resolve(res);
       });
     }
-  },
+  }
 
-  _raiseValidatedEvent(result) {
+  _raiseValidatedEvent(result): void {
     this._eventsStrategy.fireEvent('validated', [result]);
-  },
+  }
 
   _resetValidationInfo() {
     this._validationInfo = {
+      // @ts-expect-error ts-error
       result: null,
       deferred: null,
     };
-  },
+  }
 
-  _synchronizeValidationInfo() {
+  _synchronizeValidationInfo(): void {
     if (this._validationInfo.result) {
       this._validationInfo.result.validators = this.validators;
     }
-  },
+  }
 
-  removeRegisteredValidator(validator) {
+  removeRegisteredValidator(validator): void {
     const index = this.validators.indexOf(validator);
     if (index > -1) {
       this.validators.splice(index, 1);
       this._synchronizeValidationInfo();
       this._resolveIfComplete({ validator });
     }
-  },
+  }
 
-  registerValidator(validator) {
+  registerValidator(validator): void {
     if (!this.validators.includes(validator)) {
       this.validators.push(validator);
       this._synchronizeValidationInfo();
     }
-  },
+  }
 
-  reset() {
+  reset(): void {
     each(this.validators, (_, validator) => {
       validator.reset();
     });
     this._pendingValidators = [];
     this._resetValidationInfo();
-  },
+  }
 
   on(eventName, eventHandler) {
     this._eventsStrategy.on(eventName, eventHandler);
     return this;
-  },
+  }
 
   off(eventName, eventHandler) {
     this._eventsStrategy.off(eventName, eventHandler);
     return this;
-  },
-});
+  }
+}
 
 const ValidationEngine = {
   groups: [],
@@ -566,6 +589,7 @@ const ValidationEngine = {
   addGroup(group, isRemovable = true) {
     let config = this.getGroupConfig(group);
     if (!config) {
+      // @ts-expect-error ts-error
       config = new GroupConfig(group, isRemovable);
       this.groups.push(config);
     }
@@ -837,7 +861,7 @@ const ValidationEngine = {
         return newStatus !== validationStatus ? { validationStatus: newStatus } : {};
       }
       case 'validationErrors': {
-        const validationError = !value || !value.length ? null : value[0];
+        const validationError = !value?.length ? null : value[0];
 
         return options.validationError !== validationError ? { validationError } : {};
       }
diff --git a/packages/devextreme/js/__internal/ui/m_validation_group.ts b/packages/devextreme/js/__internal/ui/m_validation_group.ts
index af515e0750a0..652f2fc386b0 100644
--- a/packages/devextreme/js/__internal/ui/m_validation_group.ts
+++ b/packages/devextreme/js/__internal/ui/m_validation_group.ts
@@ -16,25 +16,25 @@ class ValidationGroup extends DOMComponent {
     return super._getDefaultOptions();
   }
 
-  _init() {
-    // @ts-expect-error
+  _init(): void {
+    // @ts-expect-error ts-error
     super._init();
     ValidationEngine.addGroup(this, false);
   }
 
-  _initMarkup() {
+  _initMarkup(): void {
     const $element = this.$element();
 
     $element.addClass(VALIDATION_ENGINE_CLASS);
-    // @ts-expect-error
+    // @ts-expect-error ts-error
     $element.find(`.${VALIDATOR_CLASS}`).each((_, validatorContainer) => {
       Validator.getInstance($(validatorContainer))._initGroupRegistration();
     });
-    // @ts-expect-error
+    // @ts-expect-error ts-error
     $element.find(`.${VALIDATION_SUMMARY_CLASS}`).each((_, summaryContainer) => {
       ValidationSummary.getInstance($(summaryContainer)).refreshValidationGroup();
     });
-    // @ts-expect-error
+    // @ts-expect-error ts-error
     super._initMarkup();
   }
 
@@ -46,14 +46,15 @@ class ValidationGroup extends DOMComponent {
     return ValidationEngine.resetGroup(this);
   }
 
-  _dispose() {
+  _dispose(): void {
     ValidationEngine.removeGroup(this);
     this.$element().removeClass(VALIDATION_ENGINE_CLASS);
-    // @ts-expect-error
+    // @ts-expect-error ts-error
     super._dispose();
   }
 
-  _useTemplates() {
+  // eslint-disable-next-line class-methods-use-this
+  _useTemplates(): boolean {
     return false;
   }
 }
diff --git a/packages/devextreme/js/__internal/ui/m_validation_message.ts b/packages/devextreme/js/__internal/ui/m_validation_message.ts
index 6bc9c0a8dffc..668f1f586da1 100644
--- a/packages/devextreme/js/__internal/ui/m_validation_message.ts
+++ b/packages/devextreme/js/__internal/ui/m_validation_message.ts
@@ -1,26 +1,40 @@
 import registerComponent from '@js/core/component_registrator';
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
-import { extend } from '@js/core/utils/extend';
 import { getDefaultAlignment } from '@js/core/utils/position';
 import { getOuterWidth } from '@js/core/utils/size';
 import { encodeHtml } from '@js/core/utils/string';
-import Overlay from '@js/ui/overlay/ui.overlay';
+import type { Properties } from '@js/ui/validation_message';
+import type { OptionChanged } from '@ts/core/widget/types';
+import Overlay from '@ts/ui/overlay/m_overlay';
 
 const INVALID_MESSAGE = 'dx-invalid-message';
 const INVALID_MESSAGE_AUTO = 'dx-invalid-message-auto';
 const INVALID_MESSAGE_ALWAYS = 'dx-invalid-message-always';
 const INVALID_MESSAGE_CONTENT = 'dx-invalid-message-content';
 const VALIDATION_MESSAGE_MIN_WIDTH = 100;
-// @ts-expect-error
-const ValidationMessage = Overlay.inherit({
-  _getDefaultOptions() {
-    return extend(this.callBase(), {
+
+export interface ValidationMessageProperties extends Properties {
+  target?: string | Element | null;
+
+  container?: dxElementWrapper;
+
+  contentId: string;
+}
+
+class ValidationMessage extends Overlay<ValidationMessageProperties> {
+  _textMarkup?: string;
+
+  _getDefaultOptions(): ValidationMessageProperties {
+    return {
+      ...super._getDefaultOptions(),
       integrationOptions: {},
       templatesRenderAsynchronously: false,
       shading: false,
       width: 'auto',
       height: 'auto',
       hideOnOutsideClick: false,
+      // @ts-expect-error ts-error
       animation: null,
       visible: true,
       propagateOutsideClick: true,
@@ -28,48 +42,43 @@ const ValidationMessage = Overlay.inherit({
       rtlEnabled: false,
       contentTemplate: this._renderInnerHtml,
       maxWidth: '100%',
-
       container: this.$element(),
-      target: undefined,
       mode: 'auto',
-      validationErrors: undefined,
       preventScrollEvents: false,
       positionSide: 'top',
-      boundary: undefined,
       offset: { h: 0, v: 0 },
-      contentId: undefined,
-    });
-  },
+    };
+  }
 
-  _init() {
-    this.callBase();
+  _init(): void {
+    super._init();
     this.updateMaxWidth();
     this._updatePosition();
-  },
+  }
 
-  _initMarkup() {
-    this.callBase();
+  _initMarkup(): void {
+    super._initMarkup();
 
     this._ensureMessageNotEmpty();
     this._updatePositionByTarget();
     this._toggleModeClass();
     this._updateContentId();
-  },
+  }
 
-  _updatePositionByTarget() {
+  _updatePositionByTarget(): void {
     const { target } = this.option();
 
     this.option('position.of', target);
-  },
+  }
 
-  _ensureMessageNotEmpty() {
+  _ensureMessageNotEmpty(): void {
     this._textMarkup = this._getTextMarkup();
 
     const shouldShowMessage = this.option('visible') && this._textMarkup;
     this._toggleVisibilityClasses(shouldShowMessage);
-  },
+  }
 
-  _toggleVisibilityClasses(visible) {
+  _toggleVisibilityClasses(visible): void {
     if (visible) {
       this.$element().addClass(INVALID_MESSAGE);
       this.$wrapper().addClass(INVALID_MESSAGE);
@@ -77,54 +86,55 @@ const ValidationMessage = Overlay.inherit({
       this.$element().removeClass(INVALID_MESSAGE);
       this.$wrapper().removeClass(INVALID_MESSAGE);
     }
-  },
+  }
 
-  _updateContentId() {
+  _updateContentId(): void {
     const { container, contentId } = this.option();
     const id = contentId ?? $(container).attr('aria-describedby');
 
     this.$content()
       .addClass(INVALID_MESSAGE_CONTENT)
       .attr('id', id);
-  },
+  }
 
-  _renderInnerHtml(element) {
+  _renderInnerHtml(element): void {
     const $element = element && $(element);
 
     $element?.html(this._textMarkup);
-  },
+  }
 
-  _getTextMarkup() {
+  _getTextMarkup(): string {
     const validationErrors = this.option('validationErrors') ?? [];
     let validationErrorMessage = '';
+    // @ts-expect-error ts-error
     validationErrors.forEach((err) => {
       const separator = validationErrorMessage ? '<br />' : '';
       validationErrorMessage += separator + encodeHtml(err?.message ?? '');
     });
 
     return validationErrorMessage;
-  },
+  }
 
-  _toggleModeClass() {
-    const mode = this.option('mode');
+  _toggleModeClass(): void {
+    const { mode } = this.option();
     this.$wrapper()
       .toggleClass(INVALID_MESSAGE_AUTO, mode === 'auto')
       .toggleClass(INVALID_MESSAGE_ALWAYS, mode === 'always');
-  },
+  }
 
-  updateMaxWidth() {
+  updateMaxWidth(): void {
     const target = this.option('target');
     const targetWidth = getOuterWidth(target);
     let maxWidth = '100%';
     if (targetWidth) {
-      // @ts-expect-error
+      // @ts-expect-error ts-error
       maxWidth = Math.max(targetWidth, VALIDATION_MESSAGE_MIN_WIDTH);
     }
 
     this.option({ maxWidth });
-  },
+  }
 
-  _getPositionsArray(positionSide, rtlSide) {
+  _getPositionsArray(positionSide, rtlSide): string[] {
     switch (positionSide) {
       case 'top':
         return [`${rtlSide} bottom`, `${rtlSide} top`];
@@ -135,9 +145,9 @@ const ValidationMessage = Overlay.inherit({
       default:
         return [`${rtlSide} top`, `${rtlSide} bottom`];
     }
-  },
+  }
 
-  _updatePosition() {
+  _updatePosition(): void {
     const {
       positionSide,
       rtlEnabled,
@@ -150,8 +160,11 @@ const ValidationMessage = Overlay.inherit({
 
     this.$element().addClass(`dx-invalid-message-${positionSide}`);
 
+    // @ts-expect-error ts-error
     if (rtlEnabled && positionSide !== 'left' && positionSide !== 'right') offset.h = -offset.h;
+    // @ts-expect-error ts-error
     if (positionSide === 'top') offset.v = -offset.v;
+    // @ts-expect-error ts-error
     if (positionSide === 'left') offset.h = -offset.h;
 
     this.option('position', {
@@ -161,31 +174,32 @@ const ValidationMessage = Overlay.inherit({
       at: positions[1],
       collision: 'none flip',
     });
-  },
+  }
 
-  _optionChanged(args) {
+  _optionChanged(args: OptionChanged<ValidationMessageProperties>): void {
     const { name, value, previousValue } = args;
     switch (name) {
       case 'target':
         this._updatePositionByTarget();
         this.updateMaxWidth();
-        this.callBase(args);
+        super._optionChanged(args);
         break;
       case 'boundary':
         this.option('position.boundary', value);
         break;
       case 'mode':
-        this._toggleModeClass(value);
+        this._toggleModeClass();
         break;
       case 'rtlEnabled':
       case 'offset':
       case 'positionSide':
+        // eslint-disable-next-line @typescript-eslint/no-base-to-string
         this.$element().removeClass(`dx-invalid-message-${previousValue}`);
         this._updatePosition();
         break;
       case 'container':
         this._updateContentId();
-        this.callBase(args);
+        super._optionChanged(args);
         break;
       case 'contentId':
         this._updateContentId();
@@ -195,10 +209,10 @@ const ValidationMessage = Overlay.inherit({
         this._renderInnerHtml(this.$content());
         break;
       default:
-        this.callBase(args);
+        super._optionChanged(args);
     }
-  },
-});
+  }
+}
 
 registerComponent('dxValidationMessage', ValidationMessage);
 
diff --git a/packages/devextreme/js/__internal/ui/m_validation_summary.ts b/packages/devextreme/js/__internal/ui/m_validation_summary.ts
index 8f14e126dcc0..cd2b138f669e 100644
--- a/packages/devextreme/js/__internal/ui/m_validation_summary.ts
+++ b/packages/devextreme/js/__internal/ui/m_validation_summary.ts
@@ -1,42 +1,62 @@
 import eventsEngine from '@js/common/core/events/core/events_engine';
 import registerComponent from '@js/core/component_registrator';
-// @ts-expect-error
+// @ts-expect-error ts-error
 import { grep } from '@js/core/utils/common';
 import { extend } from '@js/core/utils/extend';
 import { each, map } from '@js/core/utils/iterator';
-import CollectionWidget from '@js/ui/collection/ui.collection_widget.edit';
+import type { OptionChanged } from '@ts/core/widget/types';
+import type { CollectionWidgetEditProperties } from '@ts/ui/collection/m_collection_widget.edit';
+import CollectionWidget from '@ts/ui/collection/m_collection_widget.edit';
 
 import ValidationEngine from './m_validation_engine';
+import type ValidationGroup from './m_validation_group';
 
 const VALIDATION_SUMMARY_CLASS = 'dx-validationsummary';
 const ITEM_CLASS = `${VALIDATION_SUMMARY_CLASS}-item`;
 const ITEM_DATA_KEY = `${VALIDATION_SUMMARY_CLASS}-item-data`;
-// @ts-expect-error
-const ValidationSummary = CollectionWidget.inherit({
-  _getDefaultOptions() {
-    return extend(this.callBase(), {
+
+export interface ValidationSummaryProperties extends CollectionWidgetEditProperties<ValidationSummary> {
+  validationGroup?: string;
+}
+
+class ValidationSummary extends CollectionWidget<ValidationSummaryProperties> {
+  _groupWasInit?: boolean;
+
+  _validationGroup?: ValidationGroup;
+
+  validators?: any[];
+
+  groupSubscription?: (params) => void;
+
+  _getDefaultOptions(): ValidationSummaryProperties {
+    return {
+      ...super._getDefaultOptions(),
       focusStateEnabled: false,
+      // @ts-expect-error ts-error
       noDataText: null,
-    });
-  },
+    };
+  }
 
-  _setOptionsByReference() {
-    this.callBase();
+  _setOptionsByReference(): void {
+    super._setOptionsByReference();
 
     extend(this._optionsByReference, {
       validationGroup: true,
     });
-  },
+  }
 
-  _init() {
-    this.callBase();
+  _init(): void {
+    super._init();
     this._initGroupRegistration();
-  },
+  }
 
-  _initGroupRegistration() {
+  _initGroupRegistration(): void {
     const $element = this.$element();
-    const group = this.option('validationGroup')
-            || ValidationEngine.findGroup($element, this._modelByElement($element));
+    const { validationGroup } = this.option();
+
+    const group = validationGroup
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      || ValidationEngine.findGroup($element, this._modelByElement($element));
     const groupConfig = ValidationEngine.addGroup(group, true);
 
     this._unsubscribeGroup();
@@ -46,18 +66,18 @@ const ValidationSummary = CollectionWidget.inherit({
 
     this.groupSubscription = this._groupValidationHandler.bind(this);
     groupConfig.on('validated', this.groupSubscription);
-  },
+  }
 
-  _unsubscribeGroup() {
+  _unsubscribeGroup(): void {
     const groupConfig = ValidationEngine.getGroupConfig(this._validationGroup);
-    groupConfig && groupConfig.off('validated', this.groupSubscription);
-  },
+    groupConfig?.off('validated', this.groupSubscription);
+  }
 
   _getOrderedItems(validators, items) {
     let orderedItems = [];
 
     each(validators, (_, validator) => {
-      // @ts-expect-error
+      // @ts-expect-error ts-error
       const foundItems = grep(items, (item) => {
         if (item.validator === validator) {
           return true;
@@ -70,9 +90,9 @@ const ValidationSummary = CollectionWidget.inherit({
     });
 
     return orderedItems;
-  },
+  }
 
-  _groupValidationHandler(params) {
+  _groupValidationHandler(params): void {
     const items = this._getOrderedItems(params.validators, map(params.brokenRules, (rule) => ({
       text: rule.message,
       validator: rule.validator,
@@ -87,6 +107,7 @@ const ValidationSummary = CollectionWidget.inherit({
         const disposingHandler = function () {
           validator.off('validated', handler);
           validator._validationSummary = null;
+          // @ts-expect-error ts-error
           handler = null;
         };
         validator.on('validated', handler);
@@ -96,18 +117,21 @@ const ValidationSummary = CollectionWidget.inherit({
     });
 
     this.option('items', items);
-  },
+  }
 
-  _itemValidationHandler({ isValid, validator, brokenRules }) {
-    let items = this.option('items');
+  _itemValidationHandler({ isValid, validator, brokenRules }): void {
+    let { items } = this.option();
     let itemsChanged = false;
 
     let itemIndex = 0;
+    // @ts-expect-error ts-error
     while (itemIndex < items.length) {
+      // @ts-expect-error ts-error
       const item = items[itemIndex];
       if (item.validator === validator) {
         const foundRule = grep(brokenRules || [], (rule) => rule.index === item.index)[0];
         if (isValid || !foundRule) {
+          // @ts-expect-error ts-error
           items.splice(itemIndex, 1);
           itemsChanged = true;
           continue;
@@ -122,6 +146,7 @@ const ValidationSummary = CollectionWidget.inherit({
     each(brokenRules, (_, rule) => {
       const foundItem = grep(items, (item) => item.validator === validator && item.index === rule.index)[0];
       if (!foundItem) {
+        // @ts-expect-error ts-error
         items.push({
           text: rule.message,
           validator,
@@ -135,46 +160,46 @@ const ValidationSummary = CollectionWidget.inherit({
       items = this._getOrderedItems(this.validators, items);
       this.option('items', items);
     }
-  },
+  }
 
-  _initMarkup() {
+  _initMarkup(): void {
     this.$element().addClass(VALIDATION_SUMMARY_CLASS);
-    this.callBase();
-  },
+    super._initMarkup();
+  }
 
-  _optionChanged(args) {
+  _optionChanged(args: OptionChanged<ValidationSummaryProperties>): void {
     switch (args.name) {
       case 'validationGroup':
         this._initGroupRegistration();
         break;
       default:
-        this.callBase(args);
+        super._optionChanged(args);
     }
-  },
+  }
 
-  _itemClass() {
+  _itemClass(): string {
     return ITEM_CLASS;
-  },
+  }
 
-  _itemDataKey() {
+  _itemDataKey(): string {
     return ITEM_DATA_KEY;
-  },
+  }
 
-  _postprocessRenderItem(params) {
+  _postprocessRenderItem(params): void {
     eventsEngine.on(params.itemElement, 'click', () => {
-      params.itemData.validator && params.itemData.validator.focus && params.itemData.validator.focus();
+      params.itemData.validator?.focus?.();
     });
-  },
+  }
 
-  _dispose() {
-    this.callBase();
+  _dispose(): void {
+    super._dispose();
     this._unsubscribeGroup();
-  },
+  }
 
-  refreshValidationGroup() {
+  refreshValidationGroup(): void {
     this._initGroupRegistration();
-  },
-});
+  }
+}
 
 registerComponent('dxValidationSummary', ValidationSummary);
 
diff --git a/packages/devextreme/js/__internal/ui/m_validator.ts b/packages/devextreme/js/__internal/ui/m_validator.ts
index c4accdbd5f91..36d252e9bb86 100644
--- a/packages/devextreme/js/__internal/ui/m_validator.ts
+++ b/packages/devextreme/js/__internal/ui/m_validator.ts
@@ -1,46 +1,68 @@
+import type { ValidationRule } from '@js/common';
 import registerComponent from '@js/core/component_registrator';
-import DOMComponent from '@js/core/dom_component';
 import { data as elementData } from '@js/core/element_data';
 import Guid from '@js/core/guid';
+import type { Callback } from '@js/core/utils/callbacks';
 import Callbacks from '@js/core/utils/callbacks';
+import type { DeferredObj } from '@js/core/utils/deferred';
 import { Deferred } from '@js/core/utils/deferred';
 import { extend } from '@js/core/utils/extend';
 import { map } from '@js/core/utils/iterator';
+import type { Properties, ValidationResult } from '@js/ui/validator';
 import errors from '@js/ui/widget/ui.errors';
+import DOMComponent from '@ts/core/widget/dom_component';
 
 import ValidationEngine from './m_validation_engine';
+import type ValidationGroup from './m_validation_group';
 import DefaultAdapter from './validation/m_default_adapter';
 
 const VALIDATOR_CLASS = 'dx-validator';
 const VALIDATION_STATUS_VALID = 'valid';
 const VALIDATION_STATUS_INVALID = 'invalid';
 const VALIDATION_STATUS_PENDING = 'pending';
-// @ts-expect-error
-const Validator = DOMComponent.inherit({
-  _initOptions(options) {
-    this.callBase.apply(this, arguments);
+
+class Validator extends DOMComponent<Validator, Properties> {
+  _groupWasInit?: boolean;
+
+  focused?: Callback;
+
+  _validationInfo!: {
+    result: ValidationResult;
+    deferred: DeferredObj<ValidationResult> | null;
+    skipValidation: boolean;
+  };
+
+  _validationRules?: ValidationRule[];
+
+  _validationGroup?: ValidationGroup;
+
+  _initOptions(options): void {
+    // @ts-expect-error ts-error
+    super._initOptions.apply(this, arguments);
     this.option(ValidationEngine.initValidationOptions(options));
-  },
+  }
 
-  _getDefaultOptions() {
-    return extend(this.callBase(), {
+  _getDefaultOptions(): Properties {
+    return {
+      ...super._getDefaultOptions(),
       validationRules: [],
-    });
-  },
+    };
+  }
 
-  _init() {
-    this.callBase();
+  _init(): void {
+    super._init();
     this._initGroupRegistration();
     this.focused = Callbacks();
     this._initAdapter();
     this._validationInfo = {
+      // @ts-expect-error ts-error
       result: null,
       deferred: null,
       skipValidation: false,
     };
-  },
+  }
 
-  _initGroupRegistration() {
+  _initGroupRegistration(): void {
     const group = this._findGroup();
     if (!this._groupWasInit) {
       this.on('disposing', (args) => {
@@ -53,28 +75,28 @@ const Validator = DOMComponent.inherit({
       this._validationGroup = group;
       ValidationEngine.registerValidatorInGroup(group, this);
     }
-  },
+  }
 
-  _setOptionsByReference() {
-    this.callBase();
+  _setOptionsByReference(): void {
+    super._setOptionsByReference();
     extend(this._optionsByReference, {
       validationGroup: true,
     });
-  },
+  }
 
   _getEditor() {
     const element = this.$element()[0];
     return elementData(element, 'dx-validation-target');
-  },
+  }
 
-  _initAdapter() {
+  _initAdapter(): void {
     const dxStandardEditor = this._getEditor();
-    let adapter = this.option('adapter');
+    let { adapter } = this.option();
     if (!adapter) {
       if (dxStandardEditor) {
         adapter = new DefaultAdapter(dxStandardEditor, this);
-        adapter.validationRequestsCallbacks.push((args) => {
-          if (this._validationInfo.skipValidation) {
+        adapter?.validationRequestsCallbacks?.push((args) => {
+          if (this._validationInfo?.skipValidation) {
             return;
           }
           this.validate(args);
@@ -90,28 +112,31 @@ const Validator = DOMComponent.inherit({
         this.validate(args);
       });
     }
-  },
+  }
 
-  _toggleRTLDirection(isRtl) {
-    const rtlEnabled = this.option('adapter')?.editor?.option('rtlEnabled') ?? isRtl;
+  _toggleRTLDirection(isRtl: boolean): void {
+    const { adapter } = this.option();
+    // @ts-expect-error ts-error
+    const rtlEnabled = adapter?.editor?.option('rtlEnabled') ?? isRtl;
 
-    this.callBase(rtlEnabled);
-  },
+    super._toggleRTLDirection(rtlEnabled);
+  }
 
-  _initMarkup() {
+  _initMarkup(): void {
     this.$element().addClass(VALIDATOR_CLASS);
-    this.callBase();
-  },
+    super._initMarkup();
+  }
 
-  _render() {
-    this.callBase();
+  _render(): void {
+    super._render();
     this._toggleAccessibilityAttributes();
-  },
+  }
 
-  _toggleAccessibilityAttributes() {
+  _toggleAccessibilityAttributes(): void {
     const dxStandardEditor = this._getEditor();
     if (dxStandardEditor) {
       const rules = this.option('validationRules') || [];
+      // @ts-expect-error ts-error
       const isRequired = rules.some(({ type }) => type === 'required') || null;
 
       if (dxStandardEditor.isInitialized()) {
@@ -121,15 +146,15 @@ const Validator = DOMComponent.inherit({
         dxStandardEditor.setAria('required', isRequired);
       });
     }
-  },
+  }
 
-  _visibilityChanged(visible) {
+  _visibilityChanged(visible: boolean): void {
     if (visible) {
       this._initGroupRegistration();
     }
-  },
+  }
 
-  _optionChanged(args) {
+  _optionChanged(args): void {
     switch (args.name) {
       case 'validationGroup':
         this._initGroupRegistration();
@@ -147,9 +172,9 @@ const Validator = DOMComponent.inherit({
         this.option(ValidationEngine.synchronizeValidationOptions(args, this.option()));
         break;
       default:
-        this.callBase(args);
+        super._optionChanged(args);
     }
-  },
+  }
 
   _getValidationRules() {
     if (!this._validationRules) {
@@ -159,25 +184,28 @@ const Validator = DOMComponent.inherit({
       }));
     }
     return this._validationRules;
-  },
+  }
 
-  _findGroup() {
+  _findGroup(): ValidationGroup {
     const $element = this.$element();
 
-    return this.option('validationGroup')
-            || ValidationEngine.findGroup($element, this._modelByElement($element));
-  },
+    const { validationGroup } = this.option();
+
+    return validationGroup
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      || ValidationEngine.findGroup($element, this._modelByElement($element));
+  }
 
-  _resetValidationRules() {
+  _resetValidationRules(): void {
     delete this._validationRules;
-  },
-
-  validate(args) {
-    const adapter = this.option('adapter');
-    const name = this.option('name');
-    const bypass = adapter.bypass && adapter.bypass();
-    const value = args && args.value !== undefined ? args.value : adapter.getValue();
-    const currentError = adapter.getCurrentValidationError && adapter.getCurrentValidationError();
+  }
+
+  validate(args?) {
+    const { adapter, name } = this.option();
+    const bypass = adapter?.bypass?.();
+    const value = args && args.value !== undefined ? args.value : adapter?.getValue?.();
+    // @ts-expect-error ts-error
+    const currentError = adapter?.getCurrentValidationError?.();
     const rules = this._getValidationRules();
     const currentResult = this._validationInfo && this._validationInfo.result;
     if (currentResult && currentResult.status === VALIDATION_STATUS_PENDING && currentResult.value === value) {
@@ -196,16 +224,17 @@ const Validator = DOMComponent.inherit({
     }
     result.id = new Guid().toString();
     this._applyValidationResult(result, adapter);
-    result.complete && result.complete.then((res) => {
+    result.complete?.then((res) => {
+      // @ts-expect-error ts-error
       if (res.id === this._validationInfo.result.id) {
         this._applyValidationResult(res, adapter);
       }
     });
     return extend({}, this._validationInfo.result);
-  },
+  }
 
-  reset() {
-    const adapter = this.option('adapter');
+  reset(): void {
+    const { adapter } = this.option();
     const result = {
       id: null,
       isValid: true,
@@ -217,13 +246,15 @@ const Validator = DOMComponent.inherit({
     };
 
     this._validationInfo.skipValidation = true;
+    // @ts-expect-error ts-error
     adapter.reset();
     this._validationInfo.skipValidation = false;
     this._resetValidationRules();
     this._applyValidationResult(result, adapter);
-  },
+  }
 
-  _updateValidationResult(result) {
+  _updateValidationResult(result): void {
+    // @ts-expect-error ts-error
     if (!this._validationInfo.result || this._validationInfo.result.id !== result.id) {
       const complete = this._validationInfo.deferred && this._validationInfo.result.complete;
       this._validationInfo.result = extend({}, result, { complete });
@@ -235,9 +266,9 @@ const Validator = DOMComponent.inherit({
         }
       }
     }
-  },
+  }
 
-  _applyValidationResult(result, adapter) {
+  _applyValidationResult(result, adapter): void {
     const validatedAction = this._createActionByOption('onValidated', {
       excludeValidators: ['readOnly'],
     });
@@ -255,6 +286,7 @@ const Validator = DOMComponent.inherit({
       this._eventsStrategy.fireEvent('validating', [this._validationInfo.result]);
       return;
     }
+    // @ts-expect-error ts-error
     if (this._validationInfo.result.status !== VALIDATION_STATUS_PENDING) {
       validatedAction(result);
       if (this._validationInfo.deferred) {
@@ -262,15 +294,18 @@ const Validator = DOMComponent.inherit({
         this._validationInfo.deferred = null;
       }
     }
-  },
-  focus() {
-    const adapter = this.option('adapter');
+  }
+
+  focus(): void {
+    const { adapter } = this.option();
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions, @typescript-eslint/prefer-optional-chain
     adapter && adapter.focus && adapter.focus();
-  },
-  _useTemplates() {
+  }
+
+  _useTemplates(): boolean {
     return false;
-  },
-});
+  }
+}
 
 registerComponent('dxValidator', Validator);
 
diff --git a/packages/devextreme/js/__internal/ui/number_box/m_number_box.base.ts b/packages/devextreme/js/__internal/ui/number_box/m_number_box.base.ts
index b7c12469e4e5..c657cd7e72fb 100644
--- a/packages/devextreme/js/__internal/ui/number_box/m_number_box.base.ts
+++ b/packages/devextreme/js/__internal/ui/number_box/m_number_box.base.ts
@@ -5,19 +5,22 @@ import {
 import messageLocalization from '@js/common/core/localization/message';
 import devices from '@js/core/devices';
 import domAdapter from '@js/core/dom_adapter';
+import type { DefaultOptionsRule } from '@js/core/options/utils';
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import browser from '@js/core/utils/browser';
 import {
-  // @ts-expect-error
+  // @ts-expect-error ts-error
   applyServerDecimalSeparator,
   ensureDefined,
 } from '@js/core/utils/common';
 import { Deferred } from '@js/core/utils/deferred';
-import { extend } from '@js/core/utils/extend';
 import { fitIntoRange, inRange } from '@js/core/utils/math';
 import { isDefined } from '@js/core/utils/type';
-import TextEditor from '@js/ui/text_box/ui.text_editor';
+import TextEditor from '@ts/ui/text_box/m_text_editor';
 
+import type { TextEditorBaseProperties } from '../text_box/m_text_editor.base';
+import type { TextEditorButtonInfo } from '../text_box/texteditor_button_collection/m_index';
 import SpinButtons from './m_number_box.spins';
 
 const math = Math;
@@ -26,32 +29,47 @@ const WIDGET_CLASS = 'dx-numberbox';
 const FIREFOX_CONTROL_KEYS = ['tab', 'del', 'backspace', 'leftArrow', 'rightArrow', 'home', 'end', 'enter'];
 
 const FORCE_VALUECHANGE_EVENT_NAMESPACE = 'NumberBoxForceValueChange';
-// @ts-expect-error
-const NumberBoxBase = TextEditor.inherit({
 
-  _supportedKeys() {
-    return extend(this.callBase(), {
-      upArrow(e) {
+export interface NumberBoxBaseProperties extends TextEditorBaseProperties {
+  min?: number;
+  max?: number;
+  step?: number;
+  showSpinButtons?: boolean;
+  useLargeSpinButtons?: boolean;
+  invalidValueMessage?: string;
+}
+
+class NumberBoxBase<
+  TProperties extends NumberBoxBaseProperties = NumberBoxBaseProperties,
+> extends TextEditor<TProperties> {
+  _keyPressed?: boolean;
+
+  _$submitElement!: dxElementWrapper;
+
+  _supportedKeys(): Record<string, (e: KeyboardEvent) => void> {
+    return {
+      ...super._supportedKeys(),
+      upArrow(e): void {
         if (!isCommandKeyPressed(e)) {
           e.preventDefault();
           e.stopPropagation();
           this._spinUpChangeHandler(e);
         }
       },
-      downArrow(e) {
+      downArrow(e): void {
         if (!isCommandKeyPressed(e)) {
           e.preventDefault();
           e.stopPropagation();
           this._spinDownChangeHandler(e);
         }
       },
-      enter() {
-      },
-    });
-  },
+      enter(): void {},
+    };
+  }
 
-  _getDefaultOptions() {
-    return extend(this.callBase(), {
+  _getDefaultOptions(): TProperties {
+    return {
+      ...super._getDefaultOptions(),
       value: 0,
       min: undefined,
       max: undefined,
@@ -62,30 +80,33 @@ const NumberBoxBase = TextEditor.inherit({
       invalidValueMessage: messageLocalization.format('dxNumberBox-invalidValueMessage'),
       // eslint-disable-next-line no-void
       buttons: void 0,
-    });
-  },
+    };
+  }
 
-  _useTemplates() {
+  // eslint-disable-next-line class-methods-use-this
+  _useTemplates(): boolean {
     return false;
-  },
+  }
 
-  _getDefaultButtons() {
-    return this.callBase().concat([{ name: 'spins', Ctor: SpinButtons }]);
-  },
+  _getDefaultButtons(): TextEditorButtonInfo[] {
+    // @ts-expect-error ts-error
+    return super._getDefaultButtons().concat([{ name: 'spins', Ctor: SpinButtons }]);
+  }
 
   _isSupportInputMode() {
-    // @ts-expect-error
+    // @ts-expect-error ts-error
     const version = parseFloat(browser.version);
 
     return (
       browser.chrome && version >= 66
-            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-            || browser.safari && version >= 12
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        || browser.safari && version >= 12
     );
-  },
+  }
 
-  _defaultOptionsRules() {
-    return this.callBase().concat([
+  _defaultOptionsRules(): DefaultOptionsRule<TProperties>[] {
+    // @ts-expect-error ts-error
+    return super._defaultOptionsRules().concat([
       {
         device() {
           return devices.real().generic && !devices.isSimulator();
@@ -103,45 +124,46 @@ const NumberBoxBase = TextEditor.inherit({
         },
       },
     ]);
-  },
+  }
 
-  _initMarkup() {
+  _initMarkup(): void {
     this._renderSubmitElement();
     this.$element().addClass(WIDGET_CLASS);
 
-    this.callBase();
+    super._initMarkup();
     this._toggleTabIndex();
-  },
+  }
 
   _getDefaultAttributes() {
-    const attributes = this.callBase();
+    const attributes = super._getDefaultAttributes();
     // eslint-disable-next-line spellcheck/spell-checker
     attributes.inputmode = 'decimal';
     return attributes;
-  },
+  }
 
-  _renderContentImpl() {
+  _renderContentImpl(): void {
     this.option('isValid') && this._validateValue(this.option('value'));
     this.setAria('role', 'spinbutton');
-  },
+  }
 
-  _renderSubmitElement() {
+  _renderSubmitElement(): void {
     this._$submitElement = $('<input>')
       .attr('type', 'hidden')
       .appendTo(this.$element());
     this._setSubmitValue(this.option('value'));
-  },
+  }
 
   _setSubmitValue(value) {
     this._getSubmitElement().val(applyServerDecimalSeparator(value));
-  },
+  }
 
-  _getSubmitElement() {
+  _getSubmitElement(): dxElementWrapper {
     return this._$submitElement;
-  },
+  }
+
   // @ts-expect-error
   _keyPressHandler(e) {
-    this.callBase(e);
+    super._keyPressHandler();
 
     const char = getChar(e);
     const validCharRegExp = /[\d.,eE\-+]/;
@@ -155,19 +177,19 @@ const NumberBoxBase = TextEditor.inherit({
       }
 
       e.preventDefault();
-      return false;
+      return;
     }
 
     this._keyPressed = true;
-  },
+  }
 
-  _onMouseWheel(dxEvent) {
+  _onMouseWheel(dxEvent): void {
     dxEvent.delta > 0 ? this._spinValueChange(1, dxEvent) : this._spinValueChange(-1, dxEvent);
-  },
+  }
 
   _renderValue() {
     const inputValue = this._input().val();
-    const value = this.option('value');
+    const { value } = this.option();
 
     if (!inputValue.length || Number(inputValue) !== value) {
       this._forceValueRender();
@@ -187,67 +209,69 @@ const NumberBoxBase = TextEditor.inherit({
     this._updateButtons();
 
     return Deferred().resolve();
-  },
+  }
 
-  _forceValueRender() {
+  _forceValueRender(): void {
     const value = this.option('value');
     const number = Number(value);
     const formattedValue = isNaN(number) ? '' : this._applyDisplayValueFormatter(value);
 
     this._renderDisplayText(formattedValue);
-  },
+  }
 
-  _applyDisplayValueFormatter(value) {
-    return this.option('displayValueFormatter')(value);
-  },
+  _applyDisplayValueFormatter(value): string | undefined {
+    const { displayValueFormatter } = this.option();
 
-  _renderProps() {
-    this._input().prop({
-      min: this.option('min'),
-      max: this.option('max'),
-      step: this.option('step'),
-    });
+    return displayValueFormatter?.(value);
+  }
+
+  _renderProps(): void {
+    const { min, max, step } = this.option();
+    // @ts-expect-error ts-error
+    this._input().prop({ min, max, step });
 
     this.setAria({
+      // @ts-expect-error ts-error
       // eslint-disable-next-line spellcheck/spell-checker
-      valuemin: ensureDefined(this.option('min'), ''),
+      valuemin: ensureDefined(min, ''),
+      // @ts-expect-error ts-error
       // eslint-disable-next-line spellcheck/spell-checker
-      valuemax: ensureDefined(this.option('max'), ''),
+      valuemax: ensureDefined(max, ''),
     });
-  },
+  }
 
-  _spinButtonsPointerDownHandler() {
+  _spinButtonsPointerDownHandler(): void {
     const $input = this._input();
     if (!this.option('useLargeSpinButtons') && domAdapter.getActiveElement() !== $input[0]) {
-      // @ts-expect-error
+      // @ts-expect-error ts-error
       eventsEngine.trigger($input, 'focus');
     }
-  },
+  }
 
-  _spinUpChangeHandler(e) {
+  _spinUpChangeHandler(e): void {
     if (!this.option('readOnly')) {
       this._spinValueChange(1, e.event || e);
     }
-  },
+  }
 
-  _spinDownChangeHandler(e) {
+  _spinDownChangeHandler(e): void {
     if (!this.option('readOnly')) {
       this._spinValueChange(-1, e.event || e);
     }
-  },
+  }
 
-  _spinValueChange(sign, dxEvent) {
+  _spinValueChange(sign, dxEvent): void {
+    // @ts-expect-error ts-error
     const step = parseFloat(this.option('step'));
     if (step === 0) {
       return;
     }
-
+    // @ts-expect-error ts-error
     let value = parseFloat(this._normalizeInputValue()) || 0;
 
     value = this._correctRounding(value, step * sign);
 
-    const min = this.option('min');
-    const max = this.option('max');
+    const { min, max } = this.option();
 
     if (isDefined(min)) {
       value = Math.max(min, value);
@@ -259,7 +283,7 @@ const NumberBoxBase = TextEditor.inherit({
 
     this._saveValueChangeEvent(dxEvent);
     this.option('value', value);
-  },
+  }
 
   _correctRounding(value, step) {
     const regex = /[,.](.*)/;
@@ -279,7 +303,7 @@ const NumberBoxBase = TextEditor.inherit({
     }
 
     return value + step;
-  },
+  }
 
   _round(value, precision) {
     precision = precision || 0;
@@ -290,27 +314,28 @@ const NumberBoxBase = TextEditor.inherit({
     value = Math.round(value) / multiplier;
 
     return value;
-  },
+  }
 
-  _renderValueChangeEvent() {
-    this.callBase();
+  _renderValueChangeEvent(): void {
+    super._renderValueChangeEvent();
 
     const forceValueChangeEvent = addNamespace('focusout', FORCE_VALUECHANGE_EVENT_NAMESPACE);
     eventsEngine.off(this.element(), forceValueChangeEvent);
     eventsEngine.on(this.element(), forceValueChangeEvent, this._forceRefreshInputValue.bind(this));
-  },
+  }
 
   _forceRefreshInputValue() {
-    if (this.option('mode') === 'number') {
+    const { mode } = this.option();
+    if (mode === 'number') {
       return;
     }
 
     const $input = this._input();
     const formattedValue = this._applyDisplayValueFormatter(this.option('value'));
-
+    // @ts-expect-error ts-error
     $input.val(null);
     $input.val(formattedValue);
-  },
+  }
 
   _valueChangeEventHandler(e) {
     const $input = this._input();
@@ -324,7 +349,8 @@ const NumberBoxBase = TextEditor.inherit({
     }
 
     if (valueHasDigits) {
-      this.callBase(e, isNaN(value) ? null : value);
+      // @ts-expect-error ts-error
+      super._valueChangeEventHandler(e, isNaN(value) ? null : value);
     }
 
     this._applyValueBoundaries(inputValue, value);
@@ -333,7 +359,7 @@ const NumberBoxBase = TextEditor.inherit({
       value,
       editor: this,
     });
-  },
+  }
 
   _applyValueBoundaries(inputValue, parsedValue) {
     const isValueIncomplete = this._isValueIncomplete(inputValue);
@@ -344,41 +370,43 @@ const NumberBoxBase = TextEditor.inherit({
         this._input().val(this._applyDisplayValueFormatter(parsedValue));
       }
     }
-  },
+  }
 
-  _replaceCommaWithPoint(value) {
+  _replaceCommaWithPoint(value): string {
     return value.replace(',', '.');
-  },
+  }
 
-  _inputIsInvalid() {
-    const isNumberMode = this.option('mode') === 'number';
+  _inputIsInvalid(): boolean {
+    const { mode } = this.option();
+    const isNumberMode = mode === 'number';
+    // @ts-expect-error ts-error
     const validityState = this._input().get(0).validity;
 
-    return isNumberMode && validityState && validityState.badInput;
-  },
+    return isNumberMode && validityState?.badInput;
+  }
 
   _renderDisplayText(text) {
     if (this._inputIsInvalid()) {
       return;
     }
 
-    this.callBase(text);
-  },
+    super._renderDisplayText(text);
+  }
 
   _isValueIncomplete(value) {
     const incompleteRegex = /(^-$)|(^-?\d*\.$)|(\d+e-?$)/i;
     return incompleteRegex.test(value);
-  },
+  }
 
   _isValueInRange(value) {
     return inRange(value, this.option('min'), this.option('max'));
-  },
+  }
 
   _isNumber(value) {
     return this._parseValue(value) !== null;
-  },
+  }
 
-  _validateValue(value) {
+  _validateValue(value?) {
     const inputValue = this._normalizeText();
     const isValueValid = this._isValueValid();
     let isValid = true;
@@ -403,19 +431,19 @@ const NumberBoxBase = TextEditor.inherit({
     });
 
     return isValid;
-  },
+  }
 
-  _normalizeInputValue() {
+  _normalizeInputValue(): number | null {
     return this._parseValue(this._normalizeText());
-  },
+  }
 
   _normalizeText() {
     const value = this._input().val().trim();
 
     return this._replaceCommaWithPoint(value);
-  },
+  }
 
-  _parseValue(value) {
+  _parseValue(value): number | null {
     const number = parseFloat(value);
 
     if (isNaN(number)) {
@@ -423,17 +451,17 @@ const NumberBoxBase = TextEditor.inherit({
     }
 
     return fitIntoRange(number, this.option('min'), this.option('max'));
-  },
+  }
 
-  _clearValue() {
+  _clearValue(): void {
     if (this._inputIsInvalid()) {
       this._input().val('');
       this._validateValue();
     }
-    this.callBase();
-  },
+    super._clearValue();
+  }
 
-  clear() {
+  clear(): void {
     if (this.option('value') === null) {
       this.option('text', '');
       if (this._input().length) {
@@ -442,14 +470,14 @@ const NumberBoxBase = TextEditor.inherit({
     } else {
       this.option('value', null);
     }
-  },
+  }
 
   _optionChanged(args) {
     switch (args.name) {
       case 'value':
         this._validateValue(args.value);
         this._setSubmitValue(args.value);
-        this.callBase(args);
+        super._optionChanged(args);
         this._resumeValueChangeAction();
         break;
       case 'step':
@@ -467,9 +495,9 @@ const NumberBoxBase = TextEditor.inherit({
       case 'invalidValueMessage':
         break;
       default:
-        this.callBase(args);
+        super._optionChanged(args);
     }
-  },
-});
+  }
+}
 
 export default NumberBoxBase;
diff --git a/packages/devextreme/js/__internal/ui/number_box/m_number_box.mask.ts b/packages/devextreme/js/__internal/ui/number_box/m_number_box.mask.ts
index ca3139e4d6ef..74b06fe87df7 100644
--- a/packages/devextreme/js/__internal/ui/number_box/m_number_box.mask.ts
+++ b/packages/devextreme/js/__internal/ui/number_box/m_number_box.mask.ts
@@ -7,11 +7,11 @@ import { getFormat as getLDMLFormat } from '@js/common/core/localization/ldml/nu
 import number from '@js/common/core/localization/number';
 import devices from '@js/core/devices';
 import { ensureDefined, escapeRegExp } from '@js/core/utils/common';
-import { extend } from '@js/core/utils/extend';
 import { fitIntoRange, inRange } from '@js/core/utils/math';
 import {
   isDefined, isFunction, isNumeric, isString,
 } from '@js/core/utils/type';
+import type { Properties } from '@js/ui/number_box';
 
 import NumberBoxBase from './m_number_box.base';
 import {
@@ -33,29 +33,51 @@ const NUMPAD_DOT_KEY_CODE = 110;
 
 const CARET_TIMEOUT_DURATION = 0;
 
-const NumberBoxMask = NumberBoxBase.inherit({
+export interface NumberBoxMaskProperties extends Omit<Properties, 'onChange' | 'onCopy' | 'onCut' | 'onEnterKey' | 'onFocusIn' | 'onFocusOut' | 'onInput' |
+'onKeyDown' | 'onKeyUp' | 'onPaste' | 'onValueChanged' | 'onContentReady' | 'onDisposing' |
+'onOptionChanged' | 'onInitialized' > {
+  useMaskBehavior: boolean;
+}
 
-  _getDefaultOptions() {
-    return extend(this.callBase(), {
+class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
+  _caretTimeout?: ReturnType<typeof setTimeout>;
 
-      useMaskBehavior: true,
+  _focusOutOccurs?: boolean;
+
+  _parsedValue?: number | null;
+
+  _lastKeyName?: string | null;
+
+  _lastKey?: string | null;
 
+  _formattedValue?: string;
+
+  _isValuePasted?: boolean;
+
+  _currentFormat?: any;
+
+  _getDefaultOptions(): NumberBoxMaskProperties {
+    return {
+      ...super._getDefaultOptions(),
+      useMaskBehavior: true,
+      // @ts-expect-error ts-error
       format: null,
-    });
-  },
+    };
+  }
 
-  _isDeleteKey(key) {
+  _isDeleteKey(key): boolean {
     return key === 'del';
-  },
+  }
 
   _supportedKeys() {
     if (!this._useMaskBehavior()) {
-      return this.callBase();
+      return super._supportedKeys();
     }
 
     const that = this;
 
-    return extend(this.callBase(), {
+    return {
+      ...super._supportedKeys(),
       minus: that._revertSign.bind(that),
       del: that._removeHandler.bind(that),
       backspace: that._removeHandler.bind(that),
@@ -64,16 +86,16 @@ const NumberBoxMask = NumberBoxBase.inherit({
       home: that._moveCaretToBoundaryEventHandler.bind(that, MOVE_FORWARD),
       enter: that._updateFormattedValue.bind(that),
       end: that._moveCaretToBoundaryEventHandler.bind(that, MOVE_BACKWARD),
-    });
-  },
+    };
+  }
 
   _getTextSeparatorIndex(text) {
     const decimalSeparator = number.getDecimalSeparator();
     const realSeparatorOccurrenceIndex = getRealSeparatorIndex(this.option('format')).occurrence;
     return getNthOccurrence(text, decimalSeparator, realSeparatorOccurrenceIndex);
-  },
+  }
 
-  _focusInHandler(e) {
+  _focusInHandler(e): void {
     if (!this._preventNestedFocusEvent(e)) {
       this.clearCaretTimeout();
       this._caretTimeout = setTimeout(() => {
@@ -93,10 +115,10 @@ const NumberBoxMask = NumberBoxBase.inherit({
       }, CARET_TIMEOUT_DURATION);
     }
 
-    this.callBase(e);
-  },
+    super._focusInHandler(e);
+  }
 
-  _focusOutHandler(e) {
+  _focusOutHandler(e): void {
     const shouldHandleEvent = !this._preventNestedFocusEvent(e);
 
     if (shouldHandleEvent) {
@@ -106,12 +128,12 @@ const NumberBoxMask = NumberBoxBase.inherit({
       }
     }
 
-    this.callBase(e);
+    super._focusOutHandler(e);
 
     if (shouldHandleEvent) {
       this._focusOutOccurs = false;
     }
-  },
+  }
 
   _hasValueBeenChanged(inputValue) {
     const format = this._getFormatPattern();
@@ -119,7 +141,7 @@ const NumberBoxMask = NumberBoxBase.inherit({
     const formatted = this._format(value, format) || '';
 
     return formatted !== inputValue;
-  },
+  }
 
   _updateFormattedValue() {
     const inputValue = this._getInputVal();
@@ -129,15 +151,15 @@ const NumberBoxMask = NumberBoxBase.inherit({
 
       this._adjustParsedValue();
       this._setTextByParsedValue();
-
-      if (this._parsedValue !== this.option('value')) {
+      const { value } = this.option();
+      if (this._parsedValue !== value) {
         // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15181565/
         // https://bugreport.apple.com/web/?problemID=38133794 but this bug tracker is private
         // @ts-expect-error
         eventsEngine.trigger(this._input(), 'change');
       }
     }
-  },
+  }
 
   _arrowHandler(step, e) {
     if (!this._useMaskBehavior()) {
@@ -153,23 +175,23 @@ const NumberBoxMask = NumberBoxBase.inherit({
       e.preventDefault();
       this._caret(getCaretInBoundaries(nextCaret, text, format));
     }
-  },
+  }
 
   _moveCaretToBoundary(direction) {
     const boundaries = getCaretBoundaries(this._getInputVal(), this._getFormatPattern());
     const newCaret = getCaretWithOffset(direction === MOVE_FORWARD ? boundaries.start : boundaries.end, 0);
 
     this._caret(newCaret);
-  },
+  }
 
   _moveCaretToBoundaryEventHandler(direction, e) {
-    if (!this._useMaskBehavior() || e && e.shiftKey) {
+    if (!this._useMaskBehavior() || e?.shiftKey) {
       return;
     }
 
     this._moveCaretToBoundary(direction);
-    e && e.preventDefault();
-  },
+    e?.preventDefault();
+  }
 
   _shouldMoveCaret(text, caret) {
     const decimalSeparator = number.getDecimalSeparator();
@@ -177,20 +199,20 @@ const NumberBoxMask = NumberBoxBase.inherit({
     const moveToFloat = (this._lastKey === decimalSeparator || this._lastKey === '.' || this._lastKey === ',') && isDecimalSeparatorNext;
 
     return moveToFloat;
-  },
+  }
 
   _getInputVal() {
     return number.convertDigits(this._input().val(), true);
-  },
+  }
 
-  _keyboardHandler(e) {
+  _keyboardHandler(e): boolean {
     this.clearCaretTimeout();
 
     this._lastKey = number.convertDigits(getChar(e), true);
     this._lastKeyName = normalizeKeyName(e);
 
     if (!this._shouldHandleKey(e.originalEvent)) {
-      return this.callBase(e);
+      return super._keyboardHandler(e);
     }
 
     const normalizedText = this._getInputVal();
@@ -217,14 +239,14 @@ const NumberBoxMask = NumberBoxBase.inherit({
       this._parsedValue = newValue;
     }
 
-    return this.callBase(e);
-  },
+    return super._keyboardHandler(e);
+  }
 
-  _keyPressHandler(e) {
+  _keyPressHandler(e): void {
     if (!this._useMaskBehavior()) {
-      this.callBase(e);
+      super._keyPressHandler(e);
     }
-  },
+  }
 
   _removeHandler(e) {
     const caret = this._caret();
@@ -255,13 +277,14 @@ const NumberBoxMask = NumberBoxBase.inherit({
 
     if (this._isStub(char)) {
       this._moveCaret(isDeleteKey ? 1 : -1);
+      // @ts-expect-error ts-error
       if (this._parsedValue < 0 || 1 / this._parsedValue === -Infinity) {
         this._revertSign(e);
         this._setTextByParsedValue();
-
+        // @ts-expect-error ts-error
         const shouldTriggerInputEvent = this.option('valueChangeEvent').split(' ').includes('input');
         if (shouldTriggerInputEvent) {
-          // @ts-expect-error
+          // @ts-expect-error ts-error
           eventsEngine.trigger(this._input(), 'input');
         }
       }
@@ -284,6 +307,7 @@ const NumberBoxMask = NumberBoxBase.inherit({
       const noDigits = editedText.search(/[0-9]/) < 0;
 
       if (noDigits && this._isValueInRange(0)) {
+        // @ts-expect-error ts-error
         this._parsedValue = this._parsedValue < 0 || 1 / this._parsedValue === -Infinity ? -0 : 0;
         return;
       }
@@ -295,18 +319,20 @@ const NumberBoxMask = NumberBoxBase.inherit({
     } else {
       this._parsedValue = valueAfterRemoving;
     }
-  },
+  }
 
   _isPercentFormat() {
     const format = this._getFormatPattern();
     const noEscapedFormat = format.replace(/'[^']+'/g, '');
 
     return noEscapedFormat.indexOf('%') !== -1;
-  },
+  }
 
   _parse(text, format) {
     const formatOption = this.option('format');
+    // @ts-expect-error ts-error
     const isCustomParser = isFunction(formatOption.parser);
+    // @ts-expect-error ts-error
     const parser = isCustomParser ? formatOption.parser : number.parse;
     let integerPartStartIndex = 0;
 
@@ -325,17 +351,18 @@ const NumberBoxMask = NumberBoxBase.inherit({
     text = text.substr(integerPartStartIndex);
 
     return parser(text, format);
-  },
+  }
 
   _format(value, format) {
     const formatOption = this.option('format');
+    // @ts-expect-error ts-error
     const customFormatter = formatOption?.formatter || formatOption;
     const formatter = isFunction(customFormatter) ? customFormatter : number.format;
 
     const formattedValue = value === null ? '' : formatter(value, format);
 
     return formattedValue;
-  },
+  }
 
   _getFormatPattern() {
     if (!this._currentFormat) {
@@ -343,12 +370,14 @@ const NumberBoxMask = NumberBoxBase.inherit({
     }
 
     return this._currentFormat;
-  },
+  }
 
-  _updateFormat() {
-    const format = this.option('format');
+  _updateFormat(): void {
+    const { format } = this.option();
+    // @ts-expect-error ts-error
     const isCustomParser = isFunction(format?.parser);
     const isLDMLPattern = isString(format) && (format.includes('0') || format.includes('#'));
+    // @ts-expect-error ts-error
     const isExponentialFormat = format === 'exponential' || format?.type === 'exponential';
     const shouldUseFormatAsIs = isCustomParser || isLDMLPattern || isExponentialFormat;
 
@@ -358,7 +387,7 @@ const NumberBoxMask = NumberBoxBase.inherit({
         const text = this._format(value, format);
         return number.convertDigits(text, true);
       });
-  },
+  }
 
   _getFormatForSign(text) {
     const format = this._getFormatPattern();
@@ -371,9 +400,9 @@ const NumberBoxMask = NumberBoxBase.inherit({
     }
     const sign = number.getSign(text);
     return sign < 0 ? '-' : '';
-  },
+  }
 
-  _removeStubs(text, excludeComma) {
+  _removeStubs(text, excludeComma?): string {
     const format = this._getFormatForSign(text);
     const thousandsSeparator = number.getThousandsSeparator();
     const stubs = this._getStubs(format);
@@ -391,7 +420,7 @@ const NumberBoxMask = NumberBoxBase.inherit({
     }
 
     return result;
-  },
+  }
 
   _getStubs(format) {
     const regExpResult = /[^']([#0.,]+)/g.exec(format);
@@ -400,7 +429,7 @@ const NumberBoxMask = NumberBoxBase.inherit({
     return format
       .split(pattern)
       .map((stub) => stub.replace(/'/g, ''));
-  },
+  }
 
   _truncateToPrecision(value, maxPrecision) {
     if (isDefined(value)) {
@@ -413,9 +442,9 @@ const NumberBoxMask = NumberBoxBase.inherit({
       }
     }
     return value;
-  },
+  }
 
-  _tryParse(text, selection, char) {
+  _tryParse(text, selection, char?) {
     const isTextSelected = selection.start !== selection.end;
     const isWholeTextSelected = isTextSelected && selection.start === 0 && selection.end === text.length;
     const decimalSeparator = number.getDecimalSeparator();
@@ -442,6 +471,7 @@ const NumberBoxMask = NumberBoxBase.inherit({
     }
 
     if (this._removeStubs(editedText) === '') {
+      // @ts-expect-error ts-error
       parsedValue = Math.abs(this._parsedValue * 0);
     }
 
@@ -459,15 +489,15 @@ const NumberBoxMask = NumberBoxBase.inherit({
     }
 
     return parsedValue;
-  },
+  }
 
-  _getIntervalFromPrecision(precision: number) {
+  _getIntervalFromPrecision(precision) {
     if (precision < 1) {
       return 1;
     }
 
     return 10 ** -precision;
-  },
+  }
 
   _getParsedValue(text, format) {
     const sign = number.getSign(text, format?.formatter || format);
@@ -477,11 +507,11 @@ const NumberBoxMask = NumberBoxBase.inherit({
     const parsedValueWithSign = isNumeric(parsedValue) && sign !== parsedValueSign ? sign * parsedValue : parsedValue;
 
     return parsedValueWithSign;
-  },
+  }
 
   _isValueIncomplete(text) {
     if (!this._useMaskBehavior()) {
-      return this.callBase(text);
+      return super._isValueIncomplete(text);
     }
 
     const caret = this._caret();
@@ -497,19 +527,24 @@ const NumberBoxMask = NumberBoxBase.inherit({
     const floatLength = textParts[1].length;
     const format = this._getFormatPattern();
     const isCustomParser = !!format.parser;
-    const precision = !isCustomParser && this._getPrecisionLimits(this._getFormatPattern(), text);
-    const isPrecisionInRange = isCustomParser ? true : inRange(floatLength, precision.min, precision.max);
+    const precision = !isCustomParser && this._getPrecisionLimits(this._getFormatPattern());
+    const isPrecisionInRange = isCustomParser
+      ? true
+      // @ts-expect-error ts-error
+      : inRange(floatLength, precision.min, precision.max);
     const endsWithZero = textParts[1].charAt(floatLength - 1) === '0';
 
     return isPrecisionInRange && (endsWithZero || !floatLength);
-  },
+  }
 
   _isValueInRange(value) {
+    // @ts-expect-error ts-error
     const min = ensureDefined(this.option('min'), -Infinity);
+    // @ts-expect-error ts-error
     const max = ensureDefined(this.option('max'), Infinity);
 
     return inRange(value, min, max);
-  },
+  }
 
   _setInputText(text) {
     const normalizedText = number.convertDigits(text, true);
@@ -522,28 +557,32 @@ const NumberBoxMask = NumberBoxBase.inherit({
     if (!this._focusOutOccurs) {
       this._caret(newCaret);
     }
-  },
+  }
 
-  _useMaskBehavior() {
-    return !!this.option('format') && this.option('useMaskBehavior');
-  },
+  _useMaskBehavior(): boolean {
+    const { useMaskBehavior } = this.option();
 
-  _renderInputType() {
-    const isNumberType = this.option('mode') === 'number';
+    return !!this.option('format') && useMaskBehavior;
+  }
+
+  _renderInputType(): void {
+    const { mode } = this.option();
+
+    const isNumberType = mode === 'number';
     const isDesktop = devices.real().deviceType === 'desktop';
 
     if (this._useMaskBehavior() && isNumberType) {
       this._setInputType(isDesktop || this._isSupportInputMode() ? 'text' : 'tel');
     } else {
-      this.callBase();
+      super._renderInputType();
     }
-  },
+  }
 
   _isChar(str) {
     return isString(str) && str.length === 1;
-  },
+  }
 
-  _moveCaret(offset) {
+  _moveCaret(offset?): void {
     if (!offset) {
       return;
     }
@@ -552,21 +591,21 @@ const NumberBoxMask = NumberBoxBase.inherit({
     const adjustedCaret = getCaretInBoundaries(newCaret, this._getInputVal(), this._getFormatPattern());
 
     this._caret(adjustedCaret);
-  },
+  }
 
-  _shouldHandleKey(e) {
+  _shouldHandleKey(e): boolean {
     const keyName = normalizeKeyName(e);
     const isSpecialChar = isCommandKeyPressed(e) || e.altKey || e.shiftKey || !this._isChar(keyName);
     const isMinusKey = keyName === MINUS_KEY;
     const useMaskBehavior = this._useMaskBehavior();
 
     return useMaskBehavior && !isSpecialChar && !isMinusKey;
-  },
+  }
 
-  _renderInput() {
-    this.callBase();
+  _renderInput(): void {
+    super._renderInput();
     this._renderFormatter();
-  },
+  }
 
   _renderFormatter() {
     this._clearCache();
@@ -575,22 +614,22 @@ const NumberBoxMask = NumberBoxBase.inherit({
     if (this._useMaskBehavior()) {
       this._attachFormatterEvents();
     }
-  },
+  }
 
   _detachFormatterEvents() {
     eventsEngine.off(this._input(), `.${NUMBER_FORMATTER_NAMESPACE}`);
-  },
+  }
 
   _isInputFromPaste(e) {
-    const inputType = e.originalEvent && e.originalEvent.inputType;
+    const inputType = e.originalEvent?.inputType;
 
     if (isDefined(inputType)) {
       return inputType === 'insertFromPaste';
     }
     return this._isValuePasted;
-  },
+  }
 
-  _attachFormatterEvents() {
+  _attachFormatterEvents(): void {
     const $input = this._input();
 
     eventsEngine.on($input, addNamespace(INPUT_EVENT, NUMBER_FORMATTER_NAMESPACE), (e) => {
@@ -610,41 +649,41 @@ const NumberBoxMask = NumberBoxBase.inherit({
     eventsEngine.on($input, dxDblClickEvent, () => {
       this.clearCaretTimeout();
     });
-  },
+  }
 
-  clearCaretTimeout() {
+  clearCaretTimeout(): void {
     clearTimeout(this._caretTimeout);
     this._caretTimeout = undefined;
-  },
+  }
 
   _forceRefreshInputValue() {
     if (!this._useMaskBehavior()) {
-      return this.callBase();
+      return super._forceRefreshInputValue();
     }
-  },
+  }
 
   _isNonStubAfter(index) {
     const text = this._getInputVal().slice(index);
     return text && !this._isStub(text, true);
-  },
+  }
 
-  _isStub(str, isString) {
+  _isStub(str, isString?) {
     const escapedDecimalSeparator = escapeRegExp(number.getDecimalSeparator());
     const regExpString = `^[^0-9${escapedDecimalSeparator}]+$`;
     const stubRegExp = new RegExp(regExpString, 'g');
 
     return stubRegExp.test(str) && (isString || this._isChar(str));
-  },
+  }
 
-  _parseValue(text) {
+  _parseValue(text?): number | null {
     if (!this._useMaskBehavior()) {
-      return this.callBase(text);
+      return super._parseValue(text);
     }
-
+    // @ts-expect-error ts-error
     return this._parsedValue;
-  },
+  }
 
-  _getPrecisionLimits(text) {
+  _getPrecisionLimits(text): { min: number; max: number } {
     const currentFormat = this._getFormatForSign(text);
     const realSeparatorIndex = getRealSeparatorIndex(currentFormat).index;
     const floatPart = (splitByIndex(currentFormat, realSeparatorIndex)[1] || '').replace(/[^#0]/g, '');
@@ -652,7 +691,7 @@ const NumberBoxMask = NumberBoxBase.inherit({
     const maxPrecision = floatPart.length;
 
     return { min: minPrecision, max: maxPrecision };
-  },
+  }
 
   _revertSign(e) {
     if (!this._useMaskBehavior()) {
@@ -669,9 +708,9 @@ const NumberBoxMask = NumberBoxBase.inherit({
     }
 
     this._applyRevertedSign(e, caret);
-  },
+  }
 
-  _applyRevertedSign(e, caret, preserveSelectedText) {
+  _applyRevertedSign(e, caret, preserveSelectedText?): void {
     const newValue = -1 * ensureDefined(this._parsedValue, null);
 
     if (this._isValueInRange(newValue) || newValue === 0) {
@@ -694,7 +733,7 @@ const NumberBoxMask = NumberBoxBase.inherit({
         this._caret(caretInBoundaries);
       }
     }
-  },
+  }
 
   _removeMinusFromText(text, caret) {
     const isMinusPressed = this._lastKeyName === MINUS_KEY && text.charAt(caret.start - 1) === MINUS;
@@ -703,17 +742,17 @@ const NumberBoxMask = NumberBoxBase.inherit({
       start: caret.start - 1,
       end: caret.start,
     }, '') : text;
-  },
+  }
 
-  _setTextByParsedValue() {
+  _setTextByParsedValue(): void {
     const format = this._getFormatPattern();
     const parsed = this._parseValue();
     const formatted = this._format(parsed, format) || '';
 
     this._setInputText(formatted);
-  },
+  }
 
-  _formatValue(e) {
+  _formatValue(e): void {
     let normalizedText = this._getInputVal();
     const caret = this._caret();
     const textWithoutMinus = this._removeMinusFromText(normalizedText, caret);
@@ -738,31 +777,33 @@ const NumberBoxMask = NumberBoxBase.inherit({
     }
 
     this._setTextByParsedValue();
-  },
+  }
 
-  _renderDisplayText() {
+  _renderDisplayText(): void {
     if (this._useMaskBehavior()) {
       this._toggleEmptinessEventHandler();
     } else {
-      this.callBase.apply(this, arguments);
+      // @ts-expect-error ts-error
+      super._renderDisplayText.apply(this, arguments);
     }
-  },
+  }
 
   _renderValue() {
     if (this._useMaskBehavior()) {
-      this._parsedValue = this.option('value');
+      const { value } = this.option();
+      this._parsedValue = value;
       this._setTextByParsedValue();
     }
 
-    return this.callBase();
-  },
+    return super._renderValue();
+  }
 
-  _updateParsedValue() {
+  _updateParsedValue(): void {
     const inputValue = this._getInputVal();
     this._parsedValue = this._tryParse(inputValue, this._caret());
-  },
+  }
 
-  _adjustParsedValue() {
+  _adjustParsedValue(): void {
     if (!this._useMaskBehavior()) {
       return;
     }
@@ -776,11 +817,11 @@ const NumberBoxMask = NumberBoxBase.inherit({
     }
 
     this._parsedValue = fitIntoRange(parsedValue, this.option('min'), this.option('max'));
-  },
+  }
 
-  _valueChangeEventHandler(e) {
+  _valueChangeEventHandler(e): void {
     if (!this._useMaskBehavior()) {
-      return this.callBase(e);
+      return super._valueChangeEventHandler(e);
     }
 
     const caret = this._caret();
@@ -796,9 +837,9 @@ const NumberBoxMask = NumberBoxBase.inherit({
     if (caret) {
       this._caret(caret);
     }
-  },
+  }
 
-  _optionChanged(args) {
+  _optionChanged(args): void {
     switch (args.name) {
       case 'format':
       case 'useMaskBehavior':
@@ -812,14 +853,14 @@ const NumberBoxMask = NumberBoxBase.inherit({
       case 'min':
       case 'max':
         this._adjustParsedValue();
-        this.callBase(args);
+        super._optionChanged(args);
         break;
       default:
-        this.callBase(args);
+        super._optionChanged(args);
     }
-  },
+  }
 
-  _clearCache() {
+  _clearCache(): void {
     delete this._formattedValue;
     delete this._lastKey;
     delete this._lastKeyName;
@@ -827,12 +868,12 @@ const NumberBoxMask = NumberBoxBase.inherit({
     delete this._focusOutOccurs;
     clearTimeout(this._caretTimeout);
     delete this._caretTimeout;
-  },
+  }
 
-  _clean() {
+  _clean(): void {
     this._clearCache();
-    this.callBase();
-  },
-});
+    super._clean();
+  }
+}
 
 export default NumberBoxMask;
diff --git a/packages/devextreme/js/__internal/ui/number_box/m_number_box.spin.ts b/packages/devextreme/js/__internal/ui/number_box/m_number_box.spin.ts
index 018093e1f112..65c7f5961b74 100644
--- a/packages/devextreme/js/__internal/ui/number_box/m_number_box.spin.ts
+++ b/packages/devextreme/js/__internal/ui/number_box/m_number_box.spin.ts
@@ -4,10 +4,13 @@ import holdEvent from '@js/common/core/events/hold';
 import pointerEvents from '@js/common/core/events/pointer';
 import { addNamespace } from '@js/common/core/events/utils/index';
 import domAdapter from '@js/core/dom_adapter';
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import type { DeferredObj } from '@js/core/utils/deferred';
 import { Deferred } from '@js/core/utils/deferred';
-import { extend } from '@js/core/utils/extend';
-import Widget from '@js/ui/widget/ui.widget';
+import type { OptionChanged } from '@ts/core/widget/types';
+import type { Properties } from '@ts/core/widget/widget';
+import Widget from '@ts/core/widget/widget';
 
 const SPIN_CLASS = 'dx-numberbox-spin';
 const SPIN_BUTTON_CLASS = 'dx-numberbox-spin-button';
@@ -17,33 +20,50 @@ const SPIN_HOLD_DELAY = 100;
 const NUMBER_BOX = 'dxNumberBox';
 const POINTERUP_EVENT_NAME = addNamespace(pointerEvents.up, NUMBER_BOX);
 const POINTERCANCEL_EVENT_NAME = addNamespace(pointerEvents.cancel, NUMBER_BOX);
-// @ts-expect-error
-const SpinButton = Widget.inherit({
 
-  _getDefaultOptions() {
-    return extend(this.callBase(), {
+export interface SpinButtonProperties extends Properties {
+  direction?: string;
+
+  onChange?: () => void;
+}
+
+class SpinButton extends Widget<SpinButtonProperties> {
+  _feedBackDeferred?: DeferredObj<unknown>;
+
+  _spinIcon?: dxElementWrapper;
+
+  _holdTimer?: ReturnType<typeof setTimeout>;
+
+  _spinChangeHandler!: (event?: Record<string, unknown>) => void;
+
+  _getDefaultOptions(): SpinButtonProperties {
+    return {
+      ...super._getDefaultOptions(),
       direction: 'up',
+      // @ts-expect-error ts-error
       onChange: null,
       activeStateEnabled: true,
       hoverStateEnabled: true,
-    });
-  },
+    };
+  }
 
-  _initMarkup() {
-    this.callBase();
+  _initMarkup(): void {
+    super._initMarkup();
 
-    const direction = `${SPIN_CLASS}-${this.option('direction')}`;
+    const { direction: spinDirection } = this.option();
+
+    const direction = `${SPIN_CLASS}-${spinDirection}`;
 
     this.$element()
       .addClass(SPIN_BUTTON_CLASS)
       .addClass(direction);
 
     this._spinIcon = $('<div>').addClass(`${direction}-icon`).appendTo(this.$element());
-  },
-
-  _render() {
-    this.callBase();
+  }
 
+  _render(): void {
+    super._render();
+    // @ts-expect-error ts-error
     const eventName = addNamespace(pointerEvents.down, this.NAME);
     const $element = this.$element();
 
@@ -51,9 +71,9 @@ const SpinButton = Widget.inherit({
     eventsEngine.on($element, eventName, this._spinDownHandler.bind(this));
 
     this._spinChangeHandler = this._createActionByOption('onChange');
-  },
+  }
 
-  _spinDownHandler(e) {
+  _spinDownHandler(e): void {
     e.preventDefault();
 
     this._clearTimer();
@@ -70,14 +90,14 @@ const SpinButton = Widget.inherit({
     eventsEngine.on(document, POINTERCANCEL_EVENT_NAME, this._clearTimer.bind(this));
 
     this._spinChangeHandler({ event: e });
-  },
+  }
 
-  _dispose() {
+  _dispose(): void {
     this._clearTimer();
-    this.callBase();
-  },
+    super._dispose();
+  }
 
-  _clearTimer() {
+  _clearTimer(): void {
     eventsEngine.off(this.$element(), holdEvent.name);
 
     const document = domAdapter.getDocument();
@@ -90,18 +110,18 @@ const SpinButton = Widget.inherit({
     if (this._holdTimer) {
       clearInterval(this._holdTimer);
     }
-  },
+  }
 
-  _optionChanged(args) {
+  _optionChanged(args: OptionChanged<SpinButtonProperties>): void {
     switch (args.name) {
       case 'onChange':
       case 'direction':
         this._invalidate();
         break;
       default:
-        this.callBase(args);
+        super._optionChanged(args);
     }
-  },
-});
+  }
+}
 
 export default SpinButton;
diff --git a/packages/devextreme/js/__internal/ui/number_box/m_number_box.ts b/packages/devextreme/js/__internal/ui/number_box/m_number_box.ts
index 95ed8a33dc9d..9b862fa02055 100644
--- a/packages/devextreme/js/__internal/ui/number_box/m_number_box.ts
+++ b/packages/devextreme/js/__internal/ui/number_box/m_number_box.ts
@@ -2,6 +2,8 @@ import registerComponent from '@js/core/component_registrator';
 
 import NumberBoxMask from './m_number_box.mask';
 
+// STYLE numberBox
+
 registerComponent('dxNumberBox', NumberBoxMask);
 
 export default NumberBoxMask;
diff --git a/packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts b/packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts
index 526a822b6982..6933dff92c5a 100644
--- a/packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts
+++ b/packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts
@@ -400,7 +400,12 @@ class TextEditorBase<
     return value;
   }
 
-  _getDefaultAttributes(): { autocomplete: string; placeholder: string | null } {
+  _getDefaultAttributes(): {
+    autocomplete: string;
+    placeholder: string | null;
+    // eslint-disable-next-line spellcheck/spell-checker
+    inputmode?: string;
+  } {
     const defaultAttributes = {
       autocomplete: 'off',
       placeholder: this._getPlaceholderAttr(),
@@ -444,7 +449,6 @@ class TextEditorBase<
 
     this.option('text', textValue);
 
-    // eslint-disable-next-line max-len
     // fallback to empty string is required to support WebKit native date picker in some basic scenarios
     // can not be covered by QUnit
     // @ts-expect-error @ts-error
@@ -812,7 +816,6 @@ class TextEditorBase<
     super._focusOutHandler(event);
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   _toggleFocusClass(isFocused: boolean, $element?: dxElementWrapper): void {
     super._toggleFocusClass(isFocused, this._focusClassTarget($element));
   }
diff --git a/packages/devextreme/js/__internal/ui/text_box/m_text_editor.mask.ts b/packages/devextreme/js/__internal/ui/text_box/m_text_editor.mask.ts
index 361341517a60..4a675da7ccd7 100644
--- a/packages/devextreme/js/__internal/ui/text_box/m_text_editor.mask.ts
+++ b/packages/devextreme/js/__internal/ui/text_box/m_text_editor.mask.ts
@@ -169,7 +169,6 @@ class TextEditorMask<
     });
   }
 
-  // eslint-disable-next-line max-len
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   _onMouseWheel(e?): void {}
 
@@ -367,7 +366,8 @@ class TextEditorMask<
     return this._convertToValue().replace(/\s+$/, '');
   }
 
-  _valueChangeEventHandler(e): void {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _valueChangeEventHandler(e, value?): void {
     if (!this._maskRulesChain) {
       // @ts-expect-error
       super._valueChangeEventHandler.apply(this, arguments);
diff --git a/packages/devextreme/js/ui/number_box.js b/packages/devextreme/js/ui/number_box.js
index f2fd8adba29c..5ea396acda04 100644
--- a/packages/devextreme/js/ui/number_box.js
+++ b/packages/devextreme/js/ui/number_box.js
@@ -2,8 +2,6 @@ import NumberBox from '../__internal/ui/number_box/m_number_box';
 
 export default NumberBox;
 
-// STYLE numberBox
-
 /**
  * @name dxNumberBoxOptions.mask
  * @hidden