diff --git a/.vscode/settings.json b/.vscode/settings.json
index 14a7ff5437b8..d0a025fb9500 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,5 +5,5 @@
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": "explicit"
     },
-    "typescript.tsdk": "node_modules/typescript/lib"
+    "typescript.tsdk": "packages/devextreme/node_modules/typescript/lib"
 }
diff --git a/packages/devextreme/js/__internal/core/widget/component.ts b/packages/devextreme/js/__internal/core/widget/component.ts
index d13687be3ef6..0db78c787def 100644
--- a/packages/devextreme/js/__internal/core/widget/component.ts
+++ b/packages/devextreme/js/__internal/core/widget/component.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import Action from '@js/core/action';
 import Class from '@js/core/class';
 import type {
@@ -37,6 +36,7 @@ OptionChangedEventInfo<TComponent>
 > {
   onInitializing?: ((e: Record<string, unknown>) => void) | undefined;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   defaultOptionsRules?: DefaultOptionsRule<any>[];
 }
 
@@ -48,33 +48,36 @@ export class Component<
 > extends (Class.inherit({}) as new() => {}) {
   _deprecatedOptions: Partial<TProperties> = {};
 
-  _options: any;
+  _options!: Options;
 
   _optionsByReference: Partial<TProperties> = {};
 
-  NAME: any;
+  NAME?: string;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _eventsStrategy: any;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _optionChangedCallbacks: any;
 
-  _updateLockCount: any;
+  _updateLockCount!: number;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _disposingCallbacks: any;
 
-  postponedOperations: any;
+  postponedOperations!: PostponedOperations;
 
-  _initialized: any;
+  _initialized!: boolean;
 
-  _optionChangedAction: any;
+  _optionChangedAction?: (event?: Record<string, unknown>) => void;
 
-  _disposingAction: any;
+  _disposingAction?: (event?: Record<string, unknown>) => void;
 
-  _disposed: any;
+  _disposed?: boolean;
 
-  _initializing: any;
+  _initializing?: boolean;
 
-  _cancelOptionChange: any;
+  _cancelOptionChange?: string | boolean;
 
   _setDeprecatedOptions(): void {
     this._deprecatedOptions = {};
@@ -120,6 +123,7 @@ export class Component<
     return this._optionsByReference;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ctor(element: UserDefinedElement, options: any = {}): void {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const { _optionChangedCallbacks, _disposingCallbacks } = options;
@@ -229,7 +233,7 @@ export class Component<
   _dispose(): void {
     this._optionChangedCallbacks.empty();
     this._createDisposingAction();
-    this._disposingAction();
+    this._disposingAction?.();
     this._eventsStrategy.dispose();
     this._options.dispose();
     this._disposed = true;
@@ -294,7 +298,7 @@ export class Component<
   }
 
   // eslint-disable-next-line max-len
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
   _optionChanging(...args: any[]) {
 
   }
@@ -314,7 +318,7 @@ export class Component<
 
         if (!isInnerOption(name)) {
           this._optionChangedCallbacks.fireWith(this, [extend(this._defaultActionArgs(), args)]);
-          this._optionChangedAction(extend({}, args));
+          this._optionChangedAction?.(extend({}, args));
         }
 
         if (!this._disposed && this._cancelOptionChange !== name) {
@@ -324,7 +328,7 @@ export class Component<
     }
   }
 
-  initialOption(name: TProperties): TProperties {
+  initialOption(name: string): TProperties {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return this._options.initial(name);
   }
@@ -470,7 +474,8 @@ export class Component<
     this._cancelOptionChange = false;
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  // eslint-disable-next-line max-len
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
   _getOptionValue(name: string, context: any): any {
     const value = this.option(name);
 
diff --git a/packages/devextreme/js/__internal/core/widget/dom_component.ts b/packages/devextreme/js/__internal/core/widget/dom_component.ts
index e7897c4723c5..9cdc8a87afd0 100644
--- a/packages/devextreme/js/__internal/core/widget/dom_component.ts
+++ b/packages/devextreme/js/__internal/core/widget/dom_component.ts
@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
 import config from '@js/core/config';
 import type { DOMComponentOptions } from '@js/core/dom_component';
 import { getPublicElement } from '@js/core/element';
@@ -24,6 +21,7 @@ import license, { peekValidationPerformed } from '@ts/core/license/license_valid
 import { Component } from './component';
 import type { OptionChanged } from './types';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface Properties<TComponent = any> extends DOMComponentOptions<TComponent> {
   _ignoreFunctionValueDeprecation?: boolean;
 
@@ -38,31 +36,39 @@ class DOMComponent<
   TComponent extends Component<TComponent, TProperties>,
   TProperties extends Properties = Properties,
 > extends Component<TComponent, TProperties> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   static _classCustomRules: any[];
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private _customClass: any;
 
-  private _$element: any;
+  private _$element!: dxElementWrapper;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private _windowResizeCallBack: any;
 
-  private _isHidden: any;
+  private _isHidden?: boolean;
 
-  private _requireRefresh: any;
+  private _requireRefresh?: boolean;
 
-  private _templateManager: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private _templateManager?: any;
 
-  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  // eslint-disable-next-line max-len
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
   static getInstance(element) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return getInstanceByElement($(element), this);
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   static defaultOptions(rule): void {
     this._classCustomRules = Object.hasOwnProperty.bind(this)('_classCustomRules') && this._classCustomRules ? this._classCustomRules : [];
     this._classCustomRules.push(rule);
   }
 
   _getDefaultOptions(): TProperties {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return extend(super._getDefaultOptions(), {
 
       width: undefined,
@@ -80,7 +86,7 @@ class DOMComponent<
     }, this._useTemplates() ? TemplateManager.createDefaultOptions() : {});
   }
 
-  ctor(element, options): void {
+  ctor(element: Element, options: TProperties): void {
     this._customClass = null;
 
     this._createElement(element);
@@ -95,7 +101,7 @@ class DOMComponent<
     }
   }
 
-  _createElement(element): void {
+  _createElement(element: Element): void {
     this._$element = $(element);
   }
 
@@ -104,6 +110,7 @@ class DOMComponent<
     return ['rtlEnabled', 'disabled', 'templatesRenderAsynchronously'];
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   _checkFunctionValueDeprecation(optionNames): void {
     if (!this.option('_ignoreFunctionValueDeprecation')) {
       optionNames.forEach((optionName) => {
@@ -131,13 +138,14 @@ class DOMComponent<
     this._initTemplateManager();
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   _setOptionsByDevice(instanceCustomRules): void {
     // @ts-expect-error
     // eslint-disable-next-line max-len
     super._setOptionsByDevice([].concat(this.constructor._classCustomRules || [], instanceCustomRules || []));
   }
 
-  _isInitialOptionValue(name): boolean {
+  _isInitialOptionValue(name: string): boolean {
     // @ts-expect-error
     const isCustomOption = this.constructor._classCustomRules
             // @ts-expect-error
@@ -225,6 +233,7 @@ class DOMComponent<
     }
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   _isCssUpdateRequired(element, height, width): boolean {
     return !!(isDefined(width) || isDefined(height) || element.style.width || element.style.height);
   }
@@ -259,7 +268,7 @@ class DOMComponent<
     return $element.is(':visible');
   }
 
-  _checkVisibilityChanged(action): void {
+  _checkVisibilityChanged(action: 'shown' | 'hiding'): void {
     const isVisible = this._isVisible();
 
     if (isVisible) {
@@ -280,7 +289,7 @@ class DOMComponent<
   _clean(): void {}
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _modelByElement(element): unknown | undefined {
+  _modelByElement(element: dxElementWrapper): unknown | undefined {
     const { modelByElement } = this.option();
     const $element = this.$element();
 
@@ -315,7 +324,7 @@ class DOMComponent<
     }
   }
 
-  _toggleRTLDirection(rtl): void {
+  _toggleRTLDirection(rtl: boolean | undefined): void {
     const $element = this.$element();
 
     $element.toggleClass('dx-rtl', rtl);
@@ -324,6 +333,7 @@ class DOMComponent<
   _createComponent<TTComponent>(
     element: string | HTMLElement | dxElementWrapper,
     component: string | (new (...args) => TTComponent),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     configuration: TTComponent extends Component<any, infer TTProperties>
       ? TTProperties
       : Record<string, unknown>,
@@ -388,6 +398,7 @@ class DOMComponent<
     return instance;
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   _extendConfig(configuration, extendConfig): void {
     each(extendConfig, (key, value) => {
       // eslint-disable-next-line @typescript-eslint/no-unused-expressions
@@ -399,6 +410,7 @@ class DOMComponent<
     const $element = this.$element();
     const context = this._modelByElement($element);
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return extend(super._defaultActionConfig(), { context });
   }
 
@@ -407,6 +419,7 @@ class DOMComponent<
     const model = this._modelByElement($element);
     const element = this.element();
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return extend(super._defaultActionArgs(), { element, model });
   }
 
@@ -433,7 +446,7 @@ class DOMComponent<
     }
   }
 
-  _removeAttributes(element): void {
+  _removeAttributes(element: Element): void {
     const attrs = element.attributes;
 
     // eslint-disable-next-line no-plusplus
@@ -443,6 +456,7 @@ class DOMComponent<
       if (attr) {
         const { name } = attr;
 
+        // eslint-disable-next-line @typescript-eslint/prefer-includes
         if (!name.indexOf('aria-') || name.indexOf('dx-') !== -1
                     || name === 'role' || name === 'style' || name === 'tabindex') {
           element.removeAttribute(name);
@@ -451,14 +465,14 @@ class DOMComponent<
     }
   }
 
-  _removeClasses(element): void {
+  _removeClasses(element: Element): void {
     element.className = element.className
       .split(' ')
       .filter((cssClass) => cssClass.lastIndexOf('dx-', 0) !== 0)
       .join(' ');
   }
 
-  _updateDOMComponent(renderRequired): void {
+  _updateDOMComponent(renderRequired: boolean): void {
     if (renderRequired) {
       this._renderComponent();
     } else if (this._requireRefresh) {
@@ -494,7 +508,7 @@ class DOMComponent<
     this._removeClasses(element);
   }
 
-  resetOption(optionName): void {
+  resetOption(optionName: string): void {
     super.resetOption(optionName);
 
     if (optionName === 'width' || optionName === 'height') {
@@ -544,17 +558,21 @@ class DOMComponent<
     }
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  // eslint-disable-next-line max-len
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
   _getTemplateByOption(optionName) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return this._getTemplate(this.option(optionName));
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  // eslint-disable-next-line max-len
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
   _getTemplate(templateSource) {
     const templates = this.option('integrationOptions.templates');
     const isAsyncTemplate = this.option('templatesRenderAsynchronously');
     const skipTemplates = this.option('integrationOptions.skipTemplates');
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return this._templateManager.getTemplate(
       templateSource,
       templates,
@@ -566,6 +584,7 @@ class DOMComponent<
     );
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   _saveTemplate(name, template): void {
     this._setOptionWithoutOptionChange(
       `integrationOptions.templates.${name}`,
diff --git a/packages/devextreme/js/__internal/core/widget/types.ts b/packages/devextreme/js/__internal/core/widget/types.ts
index e81278bfd73e..72a2f2d4f8a1 100644
--- a/packages/devextreme/js/__internal/core/widget/types.ts
+++ b/packages/devextreme/js/__internal/core/widget/types.ts
@@ -1,13 +1,12 @@
 import type { PropertyType } from '@js/core';
 
-// todo: move to upper .d.ts files
+// TODO: move types to index.d.ts file
+
 type DotPrefix<T extends string> = T extends '' ? '' : `.${T}`;
 
-// todo: move to upper .d.ts files
 // eslint-disable-next-line spellcheck/spell-checker
 type DecrementalCounter = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 
-// todo: move to upper .d.ts files
 type IsObject<T> =
 0 extends (1 & T)
   ? false
@@ -20,7 +19,6 @@ type IsObject<T> =
         ? true
         : false;
 
-// todo: move to upper .d.ts files
 type DotNestedKeys<T, RLIMIT extends number = 10> =
 (
   IsObject<T> extends true ?
@@ -37,8 +35,6 @@ type DotNestedKeys<T, RLIMIT extends number = 10> =
 export type ComponentPropertyType<
 T, TProp extends string,
 > = PropertyType<T, TProp> extends never ? never : PropertyType<T, TProp> | undefined;
-
-// todo: move to upper .d.ts files
 interface OptionChangedArgs<TProperties, TKey extends string = string> {
   name: TKey extends `${infer TName}.${string}` ? TName : TKey;
   fullName: TKey;
@@ -47,14 +43,8 @@ interface OptionChangedArgs<TProperties, TKey extends string = string> {
   handled: boolean;
 }
 
-export interface NewInterface {
-  property?: string;
-}
-
-// todo: move to upper .d.ts files
 type OptionNames<TProperties> = DotNestedKeys<Required<TProperties>>;
 
-// todo: move to upper .d.ts files
 export type OptionChanged<TProperties> = {
-  [P in OptionNames<TProperties>]: OptionChangedArgs<P>;
+  [P in OptionNames<TProperties>]: OptionChangedArgs<TProperties, P>;
 }[OptionNames<TProperties>];
diff --git a/packages/devextreme/js/__internal/core/widget/widget.ts b/packages/devextreme/js/__internal/core/widget/widget.ts
index 352f071e4cab..710536a2d216 100644
--- a/packages/devextreme/js/__internal/core/widget/widget.ts
+++ b/packages/devextreme/js/__internal/core/widget/widget.ts
@@ -20,6 +20,7 @@ import { focusable as focusableSelector } from '@js/ui/widget/selectors';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
 
 import DOMComponent from './dom_component';
+import type { OptionChanged } from './types';
 
 const DISABLED_STATE_CLASS = 'dx-state-disabled';
 const FOCUSED_STATE_CLASS = 'dx-state-focused';
@@ -571,7 +572,7 @@ class Widget<
     this[widgetName].option(widgetOptionMap ? widgetOptionMap(optionName) : optionName, value);
   }
 
-  _optionChanged(args: Record<string, unknown>): void {
+  _optionChanged(args: OptionChanged<TProperties> | Record<string, unknown>): void {
     const { name, value, previousValue } = args;
 
     switch (name) {
diff --git a/packages/devextreme/js/__internal/tsconfig.json b/packages/devextreme/js/__internal/tsconfig.json
index 673aa2eac9b3..5a999bc5f382 100644
--- a/packages/devextreme/js/__internal/tsconfig.json
+++ b/packages/devextreme/js/__internal/tsconfig.json
@@ -32,12 +32,12 @@
     //"useUnknownInCatchVariables": true,
     //"noImplicitOverride": true,
     "paths": {
-      "@js/*": [
-        "./*"
-      ],
       "@ts/*": [
         "./__internal/*"
       ],
+      "@js/*": [
+        "./*"
+      ],
     },
     "types": [ "jest" ]
   },
diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
index c956f95e84b4..28e5b1cd9f51 100644
--- a/packages/devextreme/js/__internal/ui/chat/chat.ts
+++ b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -2,13 +2,14 @@ import registerComponent from '@js/core/component_registrator';
 import Guid from '@js/core/guid';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
-import type { Message, MessageSendEvent, Properties } from '@js/ui/chat';
+import type { Message, MessageSendEvent, Properties as ChatProperties } from '@js/ui/chat';
+import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
 
 import ChatHeader from './chat_header';
 import type {
-  MessageBoxProperties,
   MessageSendEvent as MessageBoxMessageSendEvent,
+  Properties as MessageBoxProperties,
 } from './chat_message_box';
 import MessageBox from './chat_message_box';
 import MessageList from './chat_message_list';
@@ -16,9 +17,9 @@ import MessageList from './chat_message_list';
 const CHAT_CLASS = 'dx-chat';
 const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
-type Title = string;
+type Properties = ChatProperties & { title: string };
 
-class Chat extends Widget<Properties & { title: Title }> {
+class Chat extends Widget<Properties> {
   _chatHeader?: ChatHeader;
 
   _messageBox!: MessageBox;
@@ -27,7 +28,7 @@ class Chat extends Widget<Properties & { title: Title }> {
 
   _messageSendAction?: (e: Partial<MessageSendEvent>) => void;
 
-  _getDefaultOptions(): Properties & { title: Title } {
+  _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
       activeStateEnabled: true,
@@ -131,21 +132,21 @@ class Chat extends Widget<Properties & { title: Title }> {
     return $input;
   }
 
-  _optionChanged(args: Record<string, unknown>): void {
+  _optionChanged(args: OptionChanged<Properties>): void {
     const { name, value } = args;
 
     switch (name) {
       case 'activeStateEnabled':
       case 'focusStateEnabled':
       case 'hoverStateEnabled':
-        this._messageBox.option(name, value as Properties[typeof name]);
+        this._messageBox.option(name, value);
         break;
       case 'title': {
         if (value) {
           if (this._chatHeader) {
-            this._chatHeader.option('title', (value as Title));
+            this._chatHeader.option('title', value);
           } else {
-            this._renderHeader((value as Title));
+            this._renderHeader(value);
           }
         } else if (this._chatHeader) {
           this._chatHeader.dispose();
@@ -153,12 +154,15 @@ class Chat extends Widget<Properties & { title: Title }> {
         }
         break;
       }
-      case 'user':
-        this._messageList.option('currentUserId', (value as Properties[typeof name])?.id);
+      case 'user': {
+        const author = value as Properties[typeof name];
+
+        this._messageList.option('currentUserId', author?.id);
         break;
+      }
       case 'items':
       case 'dataSource':
-        this._messageList.option(name, value as Properties[typeof name]);
+        this._messageList.option(name, value);
         break;
       case 'onMessageSend':
         this._createMessageSendAction();
diff --git a/packages/devextreme/js/__internal/ui/chat/chat_avatar.ts b/packages/devextreme/js/__internal/ui/chat/chat_avatar.ts
index 3cd0cdd87666..bb8deb3eb7bf 100644
--- a/packages/devextreme/js/__internal/ui/chat/chat_avatar.ts
+++ b/packages/devextreme/js/__internal/ui/chat/chat_avatar.ts
@@ -2,19 +2,20 @@ import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { isDefined } from '@js/core/utils/type';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
+import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
 
 const CHAT_MESSAGE_AVATAR_CLASS = 'dx-chat-message-avatar';
 const CHAT_MESSAGE_AVATAR_INITIALS_CLASS = 'dx-chat-message-avatar-initials';
 
-export interface AvatarOptions extends WidgetOptions<Avatar> {
+export interface Properties extends WidgetOptions<Avatar> {
   name?: string;
 }
 
-class Avatar extends Widget<AvatarOptions> {
+class Avatar extends Widget<Properties> {
   _$initials!: dxElementWrapper;
 
-  _getDefaultOptions(): AvatarOptions {
+  _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
       name: '',
@@ -50,7 +51,7 @@ class Avatar extends Widget<AvatarOptions> {
     return '';
   }
 
-  _optionChanged(args: Record<string, unknown>): void {
+  _optionChanged(args: OptionChanged<Properties>): void {
     const { name } = args;
 
     switch (name) {
diff --git a/packages/devextreme/js/__internal/ui/chat/chat_header.ts b/packages/devextreme/js/__internal/ui/chat/chat_header.ts
index 64971b1f6fe5..d09c46aecebd 100644
--- a/packages/devextreme/js/__internal/ui/chat/chat_header.ts
+++ b/packages/devextreme/js/__internal/ui/chat/chat_header.ts
@@ -1,23 +1,24 @@
-import type { Properties } from '@js/core/dom_component';
+import type { Properties as DOMComponentProperties } from '@js/core/dom_component';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import DOMComponent from '@ts/core/widget/dom_component';
+import type { OptionChanged } from '@ts/core/widget/types';
 
 const CHAT_HEADER_CLASS = 'dx-chat-header';
 const CHAT_HEADER_TEXT_CLASS = 'dx-chat-header-text';
 
-export interface ChatHeaderProperties extends Properties {
+export interface Properties extends DOMComponentProperties {
   title: string;
 }
 
-class ChatHeader extends DOMComponent<ChatHeader, ChatHeaderProperties> {
+class ChatHeader extends DOMComponent<ChatHeader, Properties> {
   private _$text!: dxElementWrapper;
 
-  _getDefaultOptions(): ChatHeaderProperties {
+  _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
       title: '',
-    } as ChatHeaderProperties;
+    } as Properties;
   }
 
   _init(): void {
@@ -45,7 +46,7 @@ class ChatHeader extends DOMComponent<ChatHeader, ChatHeaderProperties> {
     this._$text.text(title);
   }
 
-  _optionChanged(args: Record<string, unknown>): void {
+  _optionChanged(args: OptionChanged<Properties>): void {
     const { name } = args;
 
     switch (name) {
diff --git a/packages/devextreme/js/__internal/ui/chat/chat_message_box.ts b/packages/devextreme/js/__internal/ui/chat/chat_message_box.ts
index 8e5f439ca117..51fe0831c54d 100644
--- a/packages/devextreme/js/__internal/ui/chat/chat_message_box.ts
+++ b/packages/devextreme/js/__internal/ui/chat/chat_message_box.ts
@@ -2,7 +2,7 @@ import $ from '@js/core/renderer';
 import type { NativeEventInfo } from '@js/events';
 import type { ClickEvent } from '@js/ui/button';
 import Button from '@js/ui/button';
-import type { Properties } from '@ts/core/widget/dom_component';
+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';
 
@@ -17,7 +17,7 @@ export type MessageSendEvent =
   NativeEventInfo<MessageBox, KeyboardEvent | PointerEvent | MouseEvent | TouchEvent> &
   { text?: string };
 
-export interface MessageBoxProperties extends Properties<MessageBox> {
+export interface Properties extends DOMComponentProperties<MessageBox> {
   onMessageSend?: (e: MessageSendEvent) => void;
 
   activeStateEnabled?: boolean;
@@ -27,14 +27,14 @@ export interface MessageBoxProperties extends Properties<MessageBox> {
   hoverStateEnabled?: boolean;
 }
 
-class MessageBox extends DOMComponent<MessageBox, MessageBoxProperties> {
+class MessageBox extends DOMComponent<MessageBox, Properties> {
   _textArea!: dxTextArea;
 
   _button!: Button;
 
   _messageSendAction?: (e: Partial<MessageSendEvent>) => void;
 
-  _getDefaultOptions(): MessageBoxProperties {
+  _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
       onMessageSend: undefined,
@@ -118,7 +118,7 @@ class MessageBox extends DOMComponent<MessageBox, MessageBoxProperties> {
     this._textArea?.reset();
   }
 
-  _optionChanged(args: OptionChanged<MessageBoxProperties>): void {
+  _optionChanged(args: OptionChanged<Properties>): void {
     const { name, value } = args;
 
     switch (name) {
diff --git a/packages/devextreme/js/__internal/ui/chat/chat_message_bubble.ts b/packages/devextreme/js/__internal/ui/chat/chat_message_bubble.ts
index 1adb6906267f..c2c3369daf67 100644
--- a/packages/devextreme/js/__internal/ui/chat/chat_message_bubble.ts
+++ b/packages/devextreme/js/__internal/ui/chat/chat_message_bubble.ts
@@ -1,15 +1,16 @@
 import $ from '@js/core/renderer';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
+import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
 
 const CHAT_MESSAGE_BUBBLE_CLASS = 'dx-chat-message-bubble';
 
-export interface MessageBubbleOptions extends WidgetOptions<MessageBubble> {
+export interface Properties extends WidgetOptions<MessageBubble> {
   text?: string;
 }
 
-class MessageBubble extends Widget<MessageBubbleOptions> {
-  _getDefaultOptions(): MessageBubbleOptions {
+class MessageBubble extends Widget<Properties> {
+  _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
       text: '',
@@ -31,7 +32,7 @@ class MessageBubble extends Widget<MessageBubbleOptions> {
     $(this.element()).text(text);
   }
 
-  _optionChanged(args: Record<string, unknown>): void {
+  _optionChanged(args: OptionChanged<Properties>): void {
     const { name } = args;
 
     switch (name) {
diff --git a/packages/devextreme/js/__internal/ui/chat/chat_message_group.ts b/packages/devextreme/js/__internal/ui/chat/chat_message_group.ts
index e559826c58d5..8bafc6beaab7 100644
--- a/packages/devextreme/js/__internal/ui/chat/chat_message_group.ts
+++ b/packages/devextreme/js/__internal/ui/chat/chat_message_group.ts
@@ -3,6 +3,7 @@ import $ from '@js/core/renderer';
 import { isDefined } from '@js/core/utils/type';
 import type { Message } from '@js/ui/chat';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
+import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
 
 import Avatar from './chat_avatar';
@@ -20,15 +21,15 @@ const CHAT_MESSAGE_BUBBLE_LAST_CLASS = 'dx-chat-message-bubble-last';
 
 export type MessageGroupAlignment = 'start' | 'end';
 
-export interface MessageGroupOptions extends WidgetOptions<MessageGroup> {
+export interface Properties extends WidgetOptions<MessageGroup> {
   items: Message[];
   alignment: MessageGroupAlignment;
 }
 
-class MessageGroup extends Widget<MessageGroupOptions> {
+class MessageGroup extends Widget<Properties> {
   _avatar?: Avatar;
 
-  _getDefaultOptions(): MessageGroupOptions {
+  _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
       items: [],
@@ -154,7 +155,7 @@ class MessageGroup extends Widget<MessageGroupOptions> {
     $lastBubble.removeClass(CHAT_MESSAGE_BUBBLE_LAST_CLASS);
   }
 
-  _optionChanged(args: Record<string, unknown>): void {
+  _optionChanged(args: OptionChanged<Properties>): void {
     const { name } = args;
 
     switch (name) {
diff --git a/packages/devextreme/js/__internal/ui/chat/chat_message_list.ts b/packages/devextreme/js/__internal/ui/chat/chat_message_list.ts
index 906e84731752..b67b6b858005 100644
--- a/packages/devextreme/js/__internal/ui/chat/chat_message_list.ts
+++ b/packages/devextreme/js/__internal/ui/chat/chat_message_list.ts
@@ -4,6 +4,7 @@ import { hasWindow } from '@js/core/utils/window';
 import type { Message } from '@js/ui/chat';
 import Scrollable from '@js/ui/scroll_view/ui.scrollable';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
+import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
 
 import type { MessageGroupAlignment } from './chat_message_group';
@@ -11,19 +12,19 @@ import MessageGroup from './chat_message_group';
 
 const CHAT_MESSAGE_LIST_CLASS = 'dx-chat-message-list';
 
-export interface MessageListOptions extends WidgetOptions<MessageList> {
+export interface Properties extends WidgetOptions<MessageList> {
   items: Message[];
   currentUserId: number | string | undefined;
 }
 
-class MessageList extends Widget<MessageListOptions> {
+class MessageList extends Widget<Properties> {
   _messageGroups?: MessageGroup[];
 
   private _$content!: dxElementWrapper;
 
   private _scrollable?: Scrollable<unknown>;
 
-  _getDefaultOptions(): MessageListOptions {
+  _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
       items: [],
@@ -184,7 +185,7 @@ class MessageList extends Widget<MessageListOptions> {
     }
   }
 
-  _optionChanged(args: Record<string, unknown>): void {
+  _optionChanged(args: OptionChanged<Properties>): void {
     const { name, value, previousValue } = args;
 
     switch (name) {
@@ -192,7 +193,7 @@ class MessageList extends Widget<MessageListOptions> {
         this._invalidate();
         break;
       case 'items':
-        this._processItemsUpdating(value as MessageListOptions['items'], previousValue as MessageListOptions['items']);
+        this._processItemsUpdating(value ?? [], previousValue ?? []);
         break;
       default:
         super._optionChanged(args);
diff --git a/packages/devextreme/js/__internal/ui/splitter/resize_handle.ts b/packages/devextreme/js/__internal/ui/splitter/resize_handle.ts
index 861e1ecafe40..6eec1305cf50 100644
--- a/packages/devextreme/js/__internal/ui/splitter/resize_handle.ts
+++ b/packages/devextreme/js/__internal/ui/splitter/resize_handle.ts
@@ -13,6 +13,7 @@ import type {
   ItemCollapsedEvent, ItemExpandedEvent, ResizeEndEvent, ResizeEvent, ResizeStartEvent,
 } from '@js/ui/splitter';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
+import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
 
 import {
@@ -495,7 +496,7 @@ class ResizeHandle extends Widget<ResizeHandleOptions> {
     super._clean();
   }
 
-  _optionChanged(args: Record<string, unknown>): void {
+  _optionChanged(args: OptionChanged<ResizeHandleOptions>): void {
     const { name, value } = args;
 
     switch (name) {