diff --git a/apps/demos/Demos/Switch/Overview/React/App.tsx b/apps/demos/Demos/Switch/Overview/React/App.tsx
index 121c11926835..60cedf68b646 100644
--- a/apps/demos/Demos/Switch/Overview/React/App.tsx
+++ b/apps/demos/Demos/Switch/Overview/React/App.tsx
@@ -1,11 +1,12 @@
 import React, { useCallback, useState } from 'react';
-import Switch, { type SwitchTypes } from 'devextreme-react/switch';
+import Switch from 'devextreme-react/switch';
+import type { SwitchTypes } from 'devextreme-react/switch';
 
 function App() {
-  const [value, setValue] = useState(false);
+  const [value, setValue] = useState<boolean>(false);
 
-  const valueChanged = useCallback((e: SwitchTypes.ValueChangedEvent) => {
-    setValue(e.value);
+  const valueChanged = useCallback(({ value }: SwitchTypes.ValueChangedEvent): void => {
+    setValue(value);
   }, []);
 
   return (
diff --git a/apps/demos/Demos/Switch/Overview/ReactJs/App.js b/apps/demos/Demos/Switch/Overview/ReactJs/App.js
index d03f3211abd6..0ba6f0af4f6e 100644
--- a/apps/demos/Demos/Switch/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/Switch/Overview/ReactJs/App.js
@@ -3,8 +3,8 @@ import Switch from 'devextreme-react/switch';
 
 function App() {
   const [value, setValue] = useState(false);
-  const valueChanged = useCallback((e) => {
-    setValue(e.value);
+  const valueChanged = useCallback(({ value }) => {
+    setValue(value);
   }, []);
   return (
     <div>
diff --git a/apps/demos/Demos/TagBox/Grouping/React/App.tsx b/apps/demos/Demos/TagBox/Grouping/React/App.tsx
index c5b46e22be1a..ff436a09a267 100644
--- a/apps/demos/Demos/TagBox/Grouping/React/App.tsx
+++ b/apps/demos/Demos/TagBox/Grouping/React/App.tsx
@@ -1,26 +1,24 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { TagBox } from 'devextreme-react/tag-box';
 import { DataSource } from 'devextreme-react/common/data';
-import Group from './Group.tsx';
 
-import productsData from './data.ts';
+import Group from './Group.tsx';
+import { products } from './data.ts';
 
 const defaultValues = {
   grouped: [17, 19],
   search: [17, 19],
   template: [18],
-};
+} satisfies Record<string, number[]>;
 
 const productLabel = { 'aria-label': 'Product' };
 
 function App() {
-  const [products] = useState(
-    new DataSource({
-      store: productsData,
-      key: 'ID',
-      group: 'Category',
-    }),
-  );
+  const productStore = new DataSource({
+    store: products,
+    key: 'ID',
+    group: 'Category',
+  });
 
   return (
     <div className="dx-fieldset">
@@ -28,7 +26,7 @@ function App() {
         <div className="dx-field-label">Grouped items</div>
         <div className="dx-field-value">
           <TagBox
-            dataSource={products}
+            dataSource={productStore}
             inputAttr={productLabel}
             valueExpr="ID"
             defaultValue={defaultValues.grouped}
@@ -42,7 +40,7 @@ function App() {
         <div className="dx-field-label">Grouped items with search enabled</div>
         <div className="dx-field-value">
           <TagBox
-            dataSource={products}
+            dataSource={productStore}
             valueExpr="ID"
             inputAttr={productLabel}
             defaultValue={defaultValues.search}
@@ -57,7 +55,7 @@ function App() {
         <div className="dx-field-label">Grouped items with a custom group template</div>
         <div className="dx-field-value">
           <TagBox
-            dataSource={products}
+            dataSource={productStore}
             valueExpr="ID"
             inputAttr={productLabel}
             defaultValue={defaultValues.template}
diff --git a/apps/demos/Demos/TagBox/Grouping/React/Group.tsx b/apps/demos/Demos/TagBox/Grouping/React/Group.tsx
index 7aefdc9df526..a6935a69649d 100644
--- a/apps/demos/Demos/TagBox/Grouping/React/Group.tsx
+++ b/apps/demos/Demos/TagBox/Grouping/React/Group.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 
-export default function Group({ key }) {
+interface GroupProps {
+  key: string;
+}
+
+export default function Group({ key }: GroupProps) {
   return (
     <div className="custom-icon">
       <span className="dx-icon-box icon"></span> {key}
diff --git a/apps/demos/Demos/TagBox/Grouping/React/data.ts b/apps/demos/Demos/TagBox/Grouping/React/data.ts
index c02c60018cdd..0b6d41cc914b 100644
--- a/apps/demos/Demos/TagBox/Grouping/React/data.ts
+++ b/apps/demos/Demos/TagBox/Grouping/React/data.ts
@@ -1,4 +1,6 @@
-export default [{
+import type { Product } from './types.ts';
+
+export const products: Product[] = [{
   ID: 1,
   Name: 'HD Video Player',
   Category: 'Video Players',
diff --git a/apps/demos/Demos/TagBox/Grouping/React/types.ts b/apps/demos/Demos/TagBox/Grouping/React/types.ts
new file mode 100644
index 000000000000..4b3893826dc8
--- /dev/null
+++ b/apps/demos/Demos/TagBox/Grouping/React/types.ts
@@ -0,0 +1,5 @@
+export type Product = {
+  ID: number;
+  Name: string;
+  Category: string;
+};
diff --git a/apps/demos/Demos/TagBox/Grouping/ReactJs/App.js b/apps/demos/Demos/TagBox/Grouping/ReactJs/App.js
index cb10c9f7b719..b64051d2cf00 100644
--- a/apps/demos/Demos/TagBox/Grouping/ReactJs/App.js
+++ b/apps/demos/Demos/TagBox/Grouping/ReactJs/App.js
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { TagBox } from 'devextreme-react/tag-box';
 import { DataSource } from 'devextreme-react/common/data';
 import Group from './Group.js';
-import productsData from './data.js';
+import { products } from './data.js';
 
 const defaultValues = {
   grouped: [17, 19],
@@ -11,20 +11,18 @@ const defaultValues = {
 };
 const productLabel = { 'aria-label': 'Product' };
 function App() {
-  const [products] = useState(
-    new DataSource({
-      store: productsData,
-      key: 'ID',
-      group: 'Category',
-    }),
-  );
+  const productStore = new DataSource({
+    store: products,
+    key: 'ID',
+    group: 'Category',
+  });
   return (
     <div className="dx-fieldset">
       <div className="dx-field">
         <div className="dx-field-label">Grouped items</div>
         <div className="dx-field-value">
           <TagBox
-            dataSource={products}
+            dataSource={productStore}
             inputAttr={productLabel}
             valueExpr="ID"
             defaultValue={defaultValues.grouped}
@@ -38,7 +36,7 @@ function App() {
         <div className="dx-field-label">Grouped items with search enabled</div>
         <div className="dx-field-value">
           <TagBox
-            dataSource={products}
+            dataSource={productStore}
             valueExpr="ID"
             inputAttr={productLabel}
             defaultValue={defaultValues.search}
@@ -53,7 +51,7 @@ function App() {
         <div className="dx-field-label">Grouped items with a custom group template</div>
         <div className="dx-field-value">
           <TagBox
-            dataSource={products}
+            dataSource={productStore}
             valueExpr="ID"
             inputAttr={productLabel}
             defaultValue={defaultValues.template}
diff --git a/apps/demos/Demos/TagBox/Grouping/ReactJs/data.js b/apps/demos/Demos/TagBox/Grouping/ReactJs/data.js
index 22f4b24474a8..bf49468cf290 100644
--- a/apps/demos/Demos/TagBox/Grouping/ReactJs/data.js
+++ b/apps/demos/Demos/TagBox/Grouping/ReactJs/data.js
@@ -1,4 +1,4 @@
-export default [
+export const products = [
   {
     ID: 1,
     Name: 'HD Video Player',
diff --git a/apps/demos/Demos/TagBox/Overview/React/App.tsx b/apps/demos/Demos/TagBox/Overview/React/App.tsx
index 7a7ac201d5f0..21df48dc19ee 100644
--- a/apps/demos/Demos/TagBox/Overview/React/App.tsx
+++ b/apps/demos/Demos/TagBox/Overview/React/App.tsx
@@ -6,26 +6,25 @@ import { ArrayStore } from 'devextreme-react/common/data';
 
 import Item from './Item.tsx';
 import Tag from './Tag.tsx';
-import {
-  simpleProducts, products, productLabel, Product,
-} from './data.ts';
+import { simpleProducts, products, productLabel } from './data.ts';
+import type { Product } from './types.ts';
 
-const disabledValue = [simpleProducts[0]];
-const value = [1, 2];
+const disabledValue: string[] = [simpleProducts[0]];
+const value: number[] = [1, 2];
 const dataSource = new ArrayStore({
   data: products,
   key: 'Id',
 });
 
 function App() {
-  const [editableProducts, setEditableProducts] = useState([...simpleProducts]);
-  const [target, setTarget] = useState(null);
-  const [product, setProduct] = useState<Product>({});
+  const [editableProducts, setEditableProducts] = useState<string[]>([...simpleProducts]);
+  const [target, setTarget] = useState<HTMLElement | null>(null);
+  const [product, setProduct] = useState<Product | null>(null);
 
   const onCustomItemCreating = useCallback(
-    (args: TagBoxTypes.CustomItemCreatingEvent) => {
+    (args: TagBoxTypes.CustomItemCreatingEvent): void => {
       const newValue = args.text;
-      const isItemInDataSource = editableProducts.some((item) => item === newValue);
+      const isItemInDataSource = editableProducts.some((item: string): boolean => item === newValue);
       if (!isItemInDataSource) {
         setEditableProducts([newValue, ...editableProducts]);
       }
@@ -34,15 +33,15 @@ function App() {
     [editableProducts],
   );
 
-  const onMouseEnter = useCallback((e: { currentTarget: any }, newProduct) => {
+  const onMouseEnter = useCallback((e: React.MouseEvent<HTMLElement>, newProduct: Product): void => {
     setTarget(e.currentTarget);
     setProduct(newProduct);
   }, []);
 
-  const getAltText = useCallback((text: String) => `${text}. Picture`, []);
+  const getAltText = useCallback((text: string): string => `${text}. Picture`, []);
 
   return (
-    <React.Fragment>
+    <>
       <div className="dx-fieldset">
         <div className="dx-field">
           <div className="dx-field-label">Default mode</div>
@@ -168,25 +167,25 @@ function App() {
             >
               <p>
                 <b>Name: </b>
-                <span>{product.Name}</span>
+                <span>{product?.Name}</span>
               </p>
               <p>
                 <b>Price: </b>
-                <span>{product.Price}</span>
+                <span>{product?.Price}</span>
               </p>
               <p>
                 <b>In-stock: </b>
-                <span>{product.Current_Inventory}</span>
+                <span>{product?.Current_Inventory}</span>
               </p>
               <p>
                 <b>Category: </b>
-                <span>{product.Category}</span>
+                <span>{product?.Category}</span>
               </p>
             </Popover>
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/TagBox/Overview/React/Item.tsx b/apps/demos/Demos/TagBox/Overview/React/Item.tsx
index 71d2f89141f3..c56bb8f2b2af 100644
--- a/apps/demos/Demos/TagBox/Overview/React/Item.tsx
+++ b/apps/demos/Demos/TagBox/Overview/React/Item.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import type { Product } from './types.ts';
 
 interface ItemProps {
-  data: any;
-  getAltText: any;
+  data: Product;
+  getAltText: (text: string) => string;
 }
 
 export default function Item({ data, getAltText }: ItemProps) {
diff --git a/apps/demos/Demos/TagBox/Overview/React/Tag.tsx b/apps/demos/Demos/TagBox/Overview/React/Tag.tsx
index 5b0202ab28bd..58c2d37b0407 100644
--- a/apps/demos/Demos/TagBox/Overview/React/Tag.tsx
+++ b/apps/demos/Demos/TagBox/Overview/React/Tag.tsx
@@ -1,18 +1,19 @@
 import React from 'react';
+import type { Product } from './types.ts';
 
 interface TagProps {
-  product: any;
-  onMouseEnter: any;
-  getAltText: any;
+  product: Product;
+  onMouseEnter: (e: React.MouseEvent, product: Product) => void;
+  getAltText: (text: string) => string;
 }
 
 export default function Tag({ product, onMouseEnter, getAltText }: TagProps) {
   const isDisabled = product.Name === 'SuperHD Video Player';
   return (
-    <React.Fragment>
+    <>
       <div
         className={`dx-tag-content ${isDisabled && 'disabled-tag'}`}
-        onMouseEnter={(e) => onMouseEnter(e, product)}
+        onMouseEnter={(e: React.MouseEvent): void => onMouseEnter(e, product)}
         aria-disabled={isDisabled}
       >
         <img
@@ -23,6 +24,6 @@ export default function Tag({ product, onMouseEnter, getAltText }: TagProps) {
         <span>{product.Name}</span>
         {!isDisabled && <div className="dx-tag-remove-button"></div>}
       </div>
-    </React.Fragment>
+    </>
   );
 }
diff --git a/apps/demos/Demos/TagBox/Overview/React/data.ts b/apps/demos/Demos/TagBox/Overview/React/data.ts
index fba2ba21f63d..d09d1155421f 100644
--- a/apps/demos/Demos/TagBox/Overview/React/data.ts
+++ b/apps/demos/Demos/TagBox/Overview/React/data.ts
@@ -1,4 +1,6 @@
-export const simpleProducts = [
+import type { Product } from './types.ts';
+
+export const simpleProducts: string[] = [
   'HD Video Player',
   'SuperHD Video Player',
   'SuperPlasma 50',
@@ -15,17 +17,6 @@ export const simpleProducts = [
   'ExcelRemote IP',
 ];
 
-export type Product = {
-  Id?: number,
-  Name?: string,
-  Price?: number,
-  Current_Inventory?: number,
-  Backorder?: number,
-  Manufacturing?: number,
-  Category?: string,
-  ImageSrc?: string,
-};
-
 export const products: Product[] = [{
   Id: 1,
   Name: 'HD Video Player',
diff --git a/apps/demos/Demos/TagBox/Overview/React/types.ts b/apps/demos/Demos/TagBox/Overview/React/types.ts
new file mode 100644
index 000000000000..f2201486b728
--- /dev/null
+++ b/apps/demos/Demos/TagBox/Overview/React/types.ts
@@ -0,0 +1,10 @@
+export type Product = {
+  Id: number,
+  Name: string,
+  Price: number,
+  Current_Inventory: number,
+  Backorder: number,
+  Manufacturing: number,
+  Category: string,
+  ImageSrc: string,
+};
diff --git a/apps/demos/Demos/TagBox/Overview/ReactJs/App.js b/apps/demos/Demos/TagBox/Overview/ReactJs/App.js
index 9ba14cdf1a7a..4196f8d27060 100644
--- a/apps/demos/Demos/TagBox/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/TagBox/Overview/ReactJs/App.js
@@ -15,7 +15,7 @@ const dataSource = new ArrayStore({
 function App() {
   const [editableProducts, setEditableProducts] = useState([...simpleProducts]);
   const [target, setTarget] = useState(null);
-  const [product, setProduct] = useState({});
+  const [product, setProduct] = useState(null);
   const onCustomItemCreating = useCallback(
     (args) => {
       const newValue = args.text;
@@ -33,7 +33,7 @@ function App() {
   }, []);
   const getAltText = useCallback((text) => `${text}. Picture`, []);
   return (
-    <React.Fragment>
+    <>
       <div className="dx-fieldset">
         <div className="dx-field">
           <div className="dx-field-label">Default mode</div>
@@ -159,25 +159,25 @@ function App() {
             >
               <p>
                 <b>Name: </b>
-                <span>{product.Name}</span>
+                <span>{product?.Name}</span>
               </p>
               <p>
                 <b>Price: </b>
-                <span>{product.Price}</span>
+                <span>{product?.Price}</span>
               </p>
               <p>
                 <b>In-stock: </b>
-                <span>{product.Current_Inventory}</span>
+                <span>{product?.Current_Inventory}</span>
               </p>
               <p>
                 <b>Category: </b>
-                <span>{product.Category}</span>
+                <span>{product?.Category}</span>
               </p>
             </Popover>
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/TagBox/Overview/ReactJs/Tag.js b/apps/demos/Demos/TagBox/Overview/ReactJs/Tag.js
index 8d3b202094f9..f5f219e120bf 100644
--- a/apps/demos/Demos/TagBox/Overview/ReactJs/Tag.js
+++ b/apps/demos/Demos/TagBox/Overview/ReactJs/Tag.js
@@ -3,7 +3,7 @@ import React from 'react';
 export default function Tag({ product, onMouseEnter, getAltText }) {
   const isDisabled = product.Name === 'SuperHD Video Player';
   return (
-    <React.Fragment>
+    <>
       <div
         className={`dx-tag-content ${isDisabled && 'disabled-tag'}`}
         onMouseEnter={(e) => onMouseEnter(e, product)}
@@ -17,6 +17,6 @@ export default function Tag({ product, onMouseEnter, getAltText }) {
         <span>{product.Name}</span>
         {!isDisabled && <div className="dx-tag-remove-button"></div>}
       </div>
-    </React.Fragment>
+    </>
   );
 }
diff --git a/apps/demos/Demos/TagBox/TagCountLimitation/React/App.tsx b/apps/demos/Demos/TagBox/TagCountLimitation/React/App.tsx
index 1b43997f1363..a23ca86cd806 100644
--- a/apps/demos/Demos/TagBox/TagCountLimitation/React/App.tsx
+++ b/apps/demos/Demos/TagBox/TagCountLimitation/React/App.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
-import { TagBox, type TagBoxTypes } from 'devextreme-react/tag-box';
+import { TagBox } from 'devextreme-react/tag-box';
+import type { TagBoxTypes } from 'devextreme-react/tag-box';
 import { products, productLabel } from './data.ts';
+import type { Product } from './types.ts';
 
 const defaultValues = {
   severalItems: [1, 2, 3, 4],
   allItems: [1, 2, 3, 4, 5],
   ordinaryTags: [1, 2, 3, 4, 5, 6, 7],
-};
-const items = products.slice(0, 5);
+} satisfies Record<string, number[]>;
+
+const items: Product[] = products.slice(0, 5);
 
-const onMultiTagPreparing = (args: TagBoxTypes.MultiTagPreparingEvent) => {
+const onMultiTagPreparing = (args: TagBoxTypes.MultiTagPreparingEvent): void => {
   const selectedItemsLength = args.selectedItems.length;
   const totalCount = 5;
 
diff --git a/apps/demos/Demos/TagBox/TagCountLimitation/React/data.ts b/apps/demos/Demos/TagBox/TagCountLimitation/React/data.ts
index 0df5d942b636..a839b74d1c1d 100644
--- a/apps/demos/Demos/TagBox/TagCountLimitation/React/data.ts
+++ b/apps/demos/Demos/TagBox/TagCountLimitation/React/data.ts
@@ -1,4 +1,6 @@
-export const products = [{
+import type { Product } from './types.ts';
+
+export const products: Product[] = [{
   ID: 1,
   Name: 'HD Video Player',
   Price: 330,
diff --git a/apps/demos/Demos/TagBox/TagCountLimitation/React/types.ts b/apps/demos/Demos/TagBox/TagCountLimitation/React/types.ts
new file mode 100644
index 000000000000..8a6a197899ce
--- /dev/null
+++ b/apps/demos/Demos/TagBox/TagCountLimitation/React/types.ts
@@ -0,0 +1,10 @@
+export type Product = {
+  ID: number;
+  Name: string;
+  Price: number;
+  Current_Inventory: number | null;
+  Backorder: number;
+  Manufacturing: number;
+  Category: string;
+  ImageSrc: string;
+};
diff --git a/apps/demos/Demos/TextArea/Overview/React/App.tsx b/apps/demos/Demos/TextArea/Overview/React/App.tsx
index fd363b14d922..d0674fd5c38b 100644
--- a/apps/demos/Demos/TextArea/Overview/React/App.tsx
+++ b/apps/demos/Demos/TextArea/Overview/React/App.tsx
@@ -1,44 +1,45 @@
 import React, { useCallback, useState } from 'react';
-import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
-import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
-import TextArea, { type TextAreaTypes } from 'devextreme-react/text-area';
+import CheckBox from 'devextreme-react/check-box';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
+import SelectBox from 'devextreme-react/select-box';
+import type { SelectBoxTypes } from 'devextreme-react/select-box';
+import TextArea from 'devextreme-react/text-area';
+import type { TextAreaTypes } from 'devextreme-react/text-area';
 
-import service from './data.ts';
+import { valueChangeEvents, content } from './data.ts';
 
-const content = service.getContent();
-const { valueChangeEvents } = service;
 const notesLabel = { 'aria-label': 'Notes' };
 const eventLabel = { 'aria-label': 'Event' };
 
 function App() {
-  const [value, setValue] = useState(content);
-  const [valueForEditableTestArea, setValueForEditableTestArea] = useState(content);
-  const [maxLength, setMaxLength] = useState(null);
-  const [eventValue, setEventValue] = useState(valueChangeEvents[0].name);
-  const [autoResizeEnabled, setAutoResizeEnabled] = useState(false);
-  const [height, setHeight] = useState(90);
+  const [value, setValue] = useState<string>(content);
+  const [valueForEditableTestArea, setValueForEditableTestArea] = useState<string>(content);
+  const [maxLength, setMaxLength] = useState<number | null>(null);
+  const [eventValue, setEventValue] = useState<string>(valueChangeEvents[0].name);
+  const [autoResizeEnabled, setAutoResizeEnabled] = useState<boolean>(false);
+  const [height, setHeight] = useState<number | undefined>(90);
 
-  const onCheckboxValueChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
+  const onCheckboxValueChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent): void => {
     const str = content;
     setValue(e.value ? str.substring(0, 100) : str);
     setMaxLength(e.value ? 100 : null);
   }, []);
 
-  const onAutoResizeChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
+  const onAutoResizeChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent): void => {
     setAutoResizeEnabled(e.value);
     setHeight(e.value ? undefined : 90);
   }, []);
 
-  const onSelectBoxValueChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
+  const onSelectBoxValueChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent): void => {
     setEventValue(e.value);
   }, []);
 
-  const onTextAreaValueChanged = useCallback((e: TextAreaTypes.ValueChangedEvent) => {
+  const onTextAreaValueChanged = useCallback((e: TextAreaTypes.ValueChangedEvent): void => {
     setValueForEditableTestArea(e.value);
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <div className="dx-fieldset">
         <div className="dx-fieldset-header">Default Mode</div>
         <div className="dx-field">
@@ -99,7 +100,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/TextArea/Overview/React/data.ts b/apps/demos/Demos/TextArea/Overview/React/data.ts
index 12b599ab7d4e..0f6b25983a06 100644
--- a/apps/demos/Demos/TextArea/Overview/React/data.ts
+++ b/apps/demos/Demos/TextArea/Overview/React/data.ts
@@ -1,16 +1,11 @@
-const valueChangeEvents = [{
+import type { ValueChangeEvent } from './types.ts';
+
+export const valueChangeEvents: ValueChangeEvent[] = [{
   title: 'On Change',
   name: 'change',
 }, {
   title: 'On Key Up',
   name: 'keyup',
 }];
-const content = 'Prepare 2013 Marketing Plan: We need to double revenues in 2013 and our marketing strategy is going to be key here. R&D is improving existing products and creating new products so we can deliver great AV equipment to our customers.Robert, please make certain to create a PowerPoint presentation for the members of the executive team.';
-
-export default {
-  valueChangeEvents,
-  getContent() {
-    return content;
-  },
 
-};
+export const content = 'Prepare 2013 Marketing Plan: We need to double revenues in 2013 and our marketing strategy is going to be key here. R&D is improving existing products and creating new products so we can deliver great AV equipment to our customers.Robert, please make certain to create a PowerPoint presentation for the members of the executive team.';
diff --git a/apps/demos/Demos/TextArea/Overview/React/types.ts b/apps/demos/Demos/TextArea/Overview/React/types.ts
new file mode 100644
index 000000000000..7ae389d61499
--- /dev/null
+++ b/apps/demos/Demos/TextArea/Overview/React/types.ts
@@ -0,0 +1,4 @@
+export type ValueChangeEvent = {
+  title: string;
+  name: string;
+};
diff --git a/apps/demos/Demos/TextArea/Overview/ReactJs/App.js b/apps/demos/Demos/TextArea/Overview/ReactJs/App.js
index 4414c0798f6d..3c1274107fe5 100644
--- a/apps/demos/Demos/TextArea/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/TextArea/Overview/ReactJs/App.js
@@ -2,10 +2,8 @@ import React, { useCallback, useState } from 'react';
 import CheckBox from 'devextreme-react/check-box';
 import SelectBox from 'devextreme-react/select-box';
 import TextArea from 'devextreme-react/text-area';
-import service from './data.js';
+import { valueChangeEvents, content } from './data.js';
 
-const content = service.getContent();
-const { valueChangeEvents } = service;
 const notesLabel = { 'aria-label': 'Notes' };
 const eventLabel = { 'aria-label': 'Event' };
 function App() {
@@ -31,7 +29,7 @@ function App() {
     setValueForEditableTestArea(e.value);
   }, []);
   return (
-    <React.Fragment>
+    <>
       <div className="dx-fieldset">
         <div className="dx-fieldset-header">Default Mode</div>
         <div className="dx-field">
@@ -92,7 +90,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/TextArea/Overview/ReactJs/data.js b/apps/demos/Demos/TextArea/Overview/ReactJs/data.js
index 0bae88e78d47..f6f78a6e98ca 100644
--- a/apps/demos/Demos/TextArea/Overview/ReactJs/data.js
+++ b/apps/demos/Demos/TextArea/Overview/ReactJs/data.js
@@ -1,4 +1,4 @@
-const valueChangeEvents = [
+export const valueChangeEvents = [
   {
     title: 'On Change',
     name: 'change',
@@ -8,11 +8,5 @@ const valueChangeEvents = [
     name: 'keyup',
   },
 ];
-const content =
+export const content =
   'Prepare 2013 Marketing Plan: We need to double revenues in 2013 and our marketing strategy is going to be key here. R&D is improving existing products and creating new products so we can deliver great AV equipment to our customers.Robert, please make certain to create a PowerPoint presentation for the members of the executive team.';
-export default {
-  valueChangeEvents,
-  getContent() {
-    return content;
-  },
-};
diff --git a/apps/demos/Demos/TextBox/Overview/React/App.tsx b/apps/demos/Demos/TextBox/Overview/React/App.tsx
index d9ba9ecb2ffe..edbadec954c4 100644
--- a/apps/demos/Demos/TextBox/Overview/React/App.tsx
+++ b/apps/demos/Demos/TextBox/Overview/React/App.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import TextBox, { type TextBoxTypes } from 'devextreme-react/text-box';
+import TextBox from 'devextreme-react/text-box';
+import type { TextBoxTypes } from 'devextreme-react/text-box';
 
 const nameLabel = { 'aria-label': 'Name' };
 const fullNameLabel = { 'aria-label': 'Full Name' };
@@ -9,9 +10,9 @@ const emailLabel = { 'aria-label': 'Email' };
 const rules = { X: /[02-9]/ };
 
 function App() {
-  const [emailValue, setEmailValue] = useState('smith@corp.com');
+  const [emailValue, setEmailValue] = useState<string>('smith@corp.com');
 
-  const valueChanged = useCallback((data: TextBoxTypes.ValueChangedEvent) => {
+  const valueChanged = useCallback((data: TextBoxTypes.ValueChangedEvent): void => {
     setEmailValue(`${data.value.replace(/\s/g, '').toLowerCase()}@corp.com`);
   }, []);
 
diff --git a/apps/demos/Demos/Toast/Overview/React/App.tsx b/apps/demos/Demos/Toast/Overview/React/App.tsx
index a51703b9086f..15600d6a46a2 100644
--- a/apps/demos/Demos/Toast/Overview/React/App.tsx
+++ b/apps/demos/Demos/Toast/Overview/React/App.tsx
@@ -1,22 +1,21 @@
 import React, { useCallback, useState } from 'react';
 import { Toast } from 'devextreme-react/toast';
+import type { ToastTypes } from 'devextreme-react/toast';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
 
 import { ProductItem } from './ProductItem.tsx';
 import { products } from './data.ts';
+import type { Product, ToastConfig } from './types.ts';
 
 function App() {
-  const [toastConfig, setToastConfig] = useState({
+  const [toastConfig, setToastConfig] = useState<ToastConfig>({
     isVisible: false,
     type: 'info',
     message: '',
-  } as {
-    isVisible: boolean,
-    type: 'info' | 'error' | 'success',
-    message: string,
   });
 
-  const checkAvailability = useCallback((e: { value: any; }, product: { Name: string | number; }) => {
-    const type = e.value ? 'success' : 'error';
+  const checkAvailability = useCallback((e: CheckBoxTypes.ValueChangedEvent, product: Product): void => {
+    const type: ToastTypes.ToastType = e.value ? 'success' : 'error';
     const message = product.Name + (e.value ? ' is available' : ' is not available');
 
     setToastConfig({
@@ -25,16 +24,16 @@ function App() {
       type,
       message,
     });
-  }, [toastConfig, setToastConfig]);
+  }, [toastConfig]);
 
   const onHiding = useCallback(() => {
     setToastConfig({
       ...toastConfig,
       isVisible: false,
     });
-  }, [toastConfig, setToastConfig]);
+  }, [toastConfig]);
 
-  const items = products.map((product) => (
+  const items = products.map((product: Product) => (
     <li key={product.ID}>
       <ProductItem product={product} checkAvailability={checkAvailability} />
     </li>
diff --git a/apps/demos/Demos/Toast/Overview/React/ProductItem.tsx b/apps/demos/Demos/Toast/Overview/React/ProductItem.tsx
index e42b225382f2..4e62defc84e4 100644
--- a/apps/demos/Demos/Toast/Overview/React/ProductItem.tsx
+++ b/apps/demos/Demos/Toast/Overview/React/ProductItem.tsx
@@ -1,25 +1,28 @@
 import React, { useCallback } from 'react';
 
 import { CheckBox } from 'devextreme-react/check-box';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
+
+import type { Product } from './types.ts';
 
 interface ProductItemProps {
-  product: { ID: number; Name: string; Price: number; Current_Inventory: number; Backorder: number; Manufacturing: number; Category: string; ImageSrc: string; };
-  checkAvailability: any;
+  product: Product;
+  checkAvailability: (e: CheckBoxTypes.ValueChangedEvent, product: Product) => void;
 }
 
-export function ProductItem(props: ProductItemProps) {
-  const onValueChanged = useCallback((e) => {
-    props.checkAvailability(e, props.product);
-  }, [props]);
+export function ProductItem({ product, checkAvailability }: ProductItemProps) {
+  const onValueChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent): void => {
+    checkAvailability(e, product);
+  }, [product, checkAvailability]);
 
   return (
-    <React.Fragment>
-      <img alt={props.product.Name} src={props.product.ImageSrc} />
-      <div>{props.product.Name}</div>
+    <>
+      <img alt={product.Name} src={product.ImageSrc} />
+      <div>{product.Name}</div>
       <CheckBox
         text="Available"
         onValueChanged={onValueChanged}
       />
-    </React.Fragment>
+    </>
   );
 }
diff --git a/apps/demos/Demos/Toast/Overview/React/data.ts b/apps/demos/Demos/Toast/Overview/React/data.ts
index d4b3eb0ab444..e83395b98563 100644
--- a/apps/demos/Demos/Toast/Overview/React/data.ts
+++ b/apps/demos/Demos/Toast/Overview/React/data.ts
@@ -1,4 +1,6 @@
-export const products = [{
+import type { Product } from './types.ts';
+
+export const products: Product[] = [{
   ID: 4,
   Name: 'SuperLED 50',
   Price: 1600,
diff --git a/apps/demos/Demos/Toast/Overview/React/types.ts b/apps/demos/Demos/Toast/Overview/React/types.ts
new file mode 100644
index 000000000000..a790e6df4381
--- /dev/null
+++ b/apps/demos/Demos/Toast/Overview/React/types.ts
@@ -0,0 +1,18 @@
+import type { ToastTypes } from 'devextreme-react/toast';
+
+export type Product = {
+  ID: number;
+  Name: string;
+  Price: number;
+  Current_Inventory: number;
+  Backorder: number;
+  Manufacturing: number;
+  Category: string;
+  ImageSrc: string;
+};
+
+export type ToastConfig = {
+  isVisible: boolean;
+  type: ToastTypes.ToastType;
+  message: string;
+};
diff --git a/apps/demos/Demos/Toast/Overview/ReactJs/App.js b/apps/demos/Demos/Toast/Overview/ReactJs/App.js
index 9a96892c0548..a5139c428861 100644
--- a/apps/demos/Demos/Toast/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/Toast/Overview/ReactJs/App.js
@@ -20,14 +20,14 @@ function App() {
         message,
       });
     },
-    [toastConfig, setToastConfig],
+    [toastConfig],
   );
   const onHiding = useCallback(() => {
     setToastConfig({
       ...toastConfig,
       isVisible: false,
     });
-  }, [toastConfig, setToastConfig]);
+  }, [toastConfig]);
   const items = products.map((product) => (
     <li key={product.ID}>
       <ProductItem
diff --git a/apps/demos/Demos/Toast/Overview/ReactJs/ProductItem.js b/apps/demos/Demos/Toast/Overview/ReactJs/ProductItem.js
index 41938187cccf..4764bae59255 100644
--- a/apps/demos/Demos/Toast/Overview/ReactJs/ProductItem.js
+++ b/apps/demos/Demos/Toast/Overview/ReactJs/ProductItem.js
@@ -1,24 +1,24 @@
 import React, { useCallback } from 'react';
 import { CheckBox } from 'devextreme-react/check-box';
 
-export function ProductItem(props) {
+export function ProductItem({ product, checkAvailability }) {
   const onValueChanged = useCallback(
     (e) => {
-      props.checkAvailability(e, props.product);
+      checkAvailability(e, product);
     },
-    [props],
+    [product, checkAvailability],
   );
   return (
-    <React.Fragment>
+    <>
       <img
-        alt={props.product.Name}
-        src={props.product.ImageSrc}
+        alt={product.Name}
+        src={product.ImageSrc}
       />
-      <div>{props.product.Name}</div>
+      <div>{product.Name}</div>
       <CheckBox
         text="Available"
         onValueChanged={onValueChanged}
       />
-    </React.Fragment>
+    </>
   );
 }
diff --git a/apps/demos/Demos/Toast/Stack/React/App.tsx b/apps/demos/Demos/Toast/Stack/React/App.tsx
index e015bd2ac2bf..08c1448de8ce 100644
--- a/apps/demos/Demos/Toast/Stack/React/App.tsx
+++ b/apps/demos/Demos/Toast/Stack/React/App.tsx
@@ -2,47 +2,55 @@ import React, { useCallback, useState } from 'react';
 import Button from 'devextreme-react/button';
 import RadioGroup from 'devextreme-react/radio-group';
 import SelectBox from 'devextreme-react/select-box';
+import type { SelectBoxTypes } from 'devextreme-react/select-box';
 import NumberBox from 'devextreme-react/number-box';
 import Notify from 'devextreme/ui/notify';
 import HideToasts from 'devextreme/ui/toast/hide_toasts';
+import type { NotifyStack } from './types.ts';
 
 import {
-  directions, positions, types, radioGroupItems, positionTopLabel, directionLabel,
-  positionBottomLabel, positionLeftLabel, positionRightLabel, positionLabel,
+  directions,
+  positions,
+  types,
+  radioGroupItems,
+  positionTopLabel,
+  directionLabel,
+  positionBottomLabel,
+  positionLeftLabel,
+  positionRightLabel,
+  positionLabel,
 } from './data.ts';
 
-type NotifyStack = (typeof Notify)['arguments'][1];
-
 function App() {
-  const [id, setId] = useState(1);
-  const [isPredefined, setIsPredefined] = useState(true);
-  const [predefinedPosition, setPredefinedPosition] = useState('bottom center');
-  const [coordinatePosition, setCoordinatePosition] = useState({
+  const [id, setId] = useState<number>(1);
+  const [isPredefined, setIsPredefined] = useState<boolean>(true);
+  const [predefinedPosition, setPredefinedPosition] = useState<NotifyStack['position']>('bottom center');
+  const [coordinatePosition, setCoordinatePosition] = useState<NotifyStack['position']>({
     top: undefined,
     left: undefined,
     bottom: undefined,
     right: undefined,
   });
-  const [direction, setDirection] = useState('up-push' as NotifyStack['direction']);
+  const [direction, setDirection] = useState<NotifyStack['direction']>('up-push');
 
   const topNumberBoxValueChanged = useCallback(
-    (top) => setCoordinatePosition({ ...coordinatePosition, top }),
-    [coordinatePosition, setCoordinatePosition],
+    (top: number | undefined): void => setCoordinatePosition({ ...coordinatePosition, top }),
+    [coordinatePosition],
   );
 
   const bottomNumberBoxValueChanged = useCallback(
-    (bottom) => setCoordinatePosition({ ...coordinatePosition, bottom }),
-    [coordinatePosition, setCoordinatePosition],
+    (bottom: number | undefined): void => setCoordinatePosition({ ...coordinatePosition, bottom }),
+    [coordinatePosition],
   );
 
   const leftNumberBoxValueChanged = useCallback(
-    (left) => setCoordinatePosition({ ...coordinatePosition, left }),
-    [coordinatePosition, setCoordinatePosition],
+    (left: number | undefined): void => setCoordinatePosition({ ...coordinatePosition, left }),
+    [coordinatePosition],
   );
 
   const rightNumberBoxValueChanged = useCallback(
-    (right) => setCoordinatePosition({ ...coordinatePosition, right }),
-    [coordinatePosition, setCoordinatePosition],
+    (right: number | undefined): void => setCoordinatePosition({ ...coordinatePosition, right }),
+    [coordinatePosition],
   );
 
   const show = useCallback(() => {
@@ -69,19 +77,19 @@ function App() {
   }, [id, isPredefined, predefinedPosition, coordinatePosition, direction]);
 
   return (
-    <React.Fragment>
+    <>
       <div className='options'>
         <div>Position</div>
         <RadioGroup
           layout='horizontal'
           defaultValue='predefined'
           items={radioGroupItems}
-          onValueChange={(value) => setIsPredefined(value === 'predefined')} />
+          onValueChange={(value: string): void => setIsPredefined(value === 'predefined')} />
         <SelectBox
           items={positions}
           value={predefinedPosition}
           inputAttr={positionLabel}
-          onSelectionChanged={({ selectedItem }) => setPredefinedPosition(selectedItem)}
+          onSelectionChanged={({ selectedItem }: SelectBoxTypes.SelectionChangedEvent): void => setPredefinedPosition(selectedItem)}
           visible={isPredefined} />
         <div className='section'>
           <NumberBox
@@ -124,13 +132,13 @@ function App() {
           items={directions}
           inputAttr={directionLabel}
           value={direction}
-          onSelectionChanged={({ selectedItem }) => setDirection(selectedItem)} />
+          onSelectionChanged={({ selectedItem }: SelectBoxTypes.SelectionChangedEvent): void => setDirection(selectedItem)} />
         <div className='section'>
           <Button text='Show' width='48%' onClick={show} />
           <Button text='Hide all' width='48%' onClick={() => HideToasts()} />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Toast/Stack/React/data.ts b/apps/demos/Demos/Toast/Stack/React/data.ts
index 19f19a1712fc..cde4619f5641 100644
--- a/apps/demos/Demos/Toast/Stack/React/data.ts
+++ b/apps/demos/Demos/Toast/Stack/React/data.ts
@@ -1,4 +1,7 @@
-export const directions = [
+import type { ToastType } from 'devextreme/ui/toast';
+import type { NotifyStack } from './types.ts';
+
+export const directions: NotifyStack['direction'][] = [
   'down-push',
   'down-stack',
   'up-push',
@@ -9,7 +12,7 @@ export const directions = [
   'right-stack',
 ];
 
-export const positions = [
+export const positions: NotifyStack['position'][] = [
   'top left',
   'top center',
   'top right',
@@ -21,9 +24,9 @@ export const positions = [
   'right center',
 ];
 
-export const types = ['error', 'info', 'success', 'warning'];
+export const types: ToastType[] = ['error', 'info', 'success', 'warning'];
 
-export const radioGroupItems = ['predefined', 'coordinates'];
+export const radioGroupItems: string[] = ['predefined', 'coordinates'];
 
 export const positionTopLabel = { 'aria-label': 'Position Top' };
 export const positionBottomLabel = { 'aria-label': 'Position Bottom' };
diff --git a/apps/demos/Demos/Toast/Stack/React/types.ts b/apps/demos/Demos/Toast/Stack/React/types.ts
new file mode 100644
index 000000000000..4c5cfb9eb4e3
--- /dev/null
+++ b/apps/demos/Demos/Toast/Stack/React/types.ts
@@ -0,0 +1,3 @@
+import Notify from 'devextreme/ui/notify';
+
+export type NotifyStack = (typeof Notify)['arguments'][1];
diff --git a/apps/demos/Demos/Toast/Stack/ReactJs/App.js b/apps/demos/Demos/Toast/Stack/ReactJs/App.js
index 4fe140f018f0..549bc1eae5bc 100644
--- a/apps/demos/Demos/Toast/Stack/ReactJs/App.js
+++ b/apps/demos/Demos/Toast/Stack/ReactJs/App.js
@@ -31,19 +31,19 @@ function App() {
   const [direction, setDirection] = useState('up-push');
   const topNumberBoxValueChanged = useCallback(
     (top) => setCoordinatePosition({ ...coordinatePosition, top }),
-    [coordinatePosition, setCoordinatePosition],
+    [coordinatePosition],
   );
   const bottomNumberBoxValueChanged = useCallback(
     (bottom) => setCoordinatePosition({ ...coordinatePosition, bottom }),
-    [coordinatePosition, setCoordinatePosition],
+    [coordinatePosition],
   );
   const leftNumberBoxValueChanged = useCallback(
     (left) => setCoordinatePosition({ ...coordinatePosition, left }),
-    [coordinatePosition, setCoordinatePosition],
+    [coordinatePosition],
   );
   const rightNumberBoxValueChanged = useCallback(
     (right) => setCoordinatePosition({ ...coordinatePosition, right }),
-    [coordinatePosition, setCoordinatePosition],
+    [coordinatePosition],
   );
   const show = useCallback(() => {
     const position = isPredefined ? predefinedPosition : coordinatePosition;
@@ -73,7 +73,7 @@ function App() {
     setId(id + 1);
   }, [id, isPredefined, predefinedPosition, coordinatePosition, direction]);
   return (
-    <React.Fragment>
+    <>
       <div className="options">
         <div>Position</div>
         <RadioGroup
@@ -149,7 +149,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Tooltip/Overview/React/App.tsx b/apps/demos/Demos/Tooltip/Overview/React/App.tsx
index 030fde4e1427..21b81ae14654 100644
--- a/apps/demos/Demos/Tooltip/Overview/React/App.tsx
+++ b/apps/demos/Demos/Tooltip/Overview/React/App.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { Tooltip, ITooltipOptions } from 'devextreme-react/tooltip';
+import { Tooltip } from 'devextreme-react/tooltip';
+import type { TooltipTypes } from 'devextreme-react/tooltip';
 
-const animationConfig: ITooltipOptions['animation'] = {
+const animationConfig: TooltipTypes.Properties['animation'] = {
   show: {
     type: 'slide',
     from: {
diff --git a/apps/demos/Demos/Validation/Overview/React/App.tsx b/apps/demos/Demos/Validation/Overview/React/App.tsx
index 1f46bee8532e..c1d852717f98 100644
--- a/apps/demos/Demos/Validation/Overview/React/App.tsx
+++ b/apps/demos/Demos/Validation/Overview/React/App.tsx
@@ -1,12 +1,18 @@
 import React, {
-  useCallback, useMemo, useRef, useState,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
 } from 'react';
 import SelectBox from 'devextreme-react/select-box';
 import CheckBox from 'devextreme-react/check-box';
-import { TextBox, Button as TextBoxButton, type TextBoxTypes } from 'devextreme-react/text-box';
+import { TextBox, Button as TextBoxButton } from 'devextreme-react/text-box';
+import type { TextBoxTypes } from 'devextreme-react/text-box';
 import DateBox from 'devextreme-react/date-box';
 import DateRangeBox from 'devextreme-react/date-range-box';
-import Button, { type ButtonTypes } from 'devextreme-react/button';
+import Button from 'devextreme-react/button';
+import type { ButtonTypes } from 'devextreme-react/button';
+import type { ValidationCallbackData } from 'devextreme/common';
 import ValidationSummary from 'devextreme-react/validation-summary';
 import {
   Validator,
@@ -19,6 +25,7 @@ import {
   AsyncRule,
   CustomRule,
 } from 'devextreme-react/validator';
+import type { ValidatorRef } from 'devextreme-react/validator';
 
 import notify from 'devextreme/ui/notify';
 import {
@@ -40,8 +47,8 @@ const phoneRules = {
   X: /[02-9]/,
 };
 
-const checkComparison: any = () => true;
-const onFormSubmit = (e: { preventDefault: () => void }) => {
+const checkComparison = (): boolean => true;
+const onFormSubmit = (e: { preventDefault: () => void }): void => {
   notify(
     {
       message: 'You have submitted the form',
@@ -61,47 +68,47 @@ function App() {
   const currentDate = new Date();
   const maxDate = new Date(currentDate.setFullYear(currentDate.getFullYear() - 21));
 
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
+  const [password, setPassword] = useState<string>('');
+  const [confirmPassword, setConfirmPassword] = useState<string>('');
   const [passwordMode, setPasswordMode] = useState<TextBoxTypes.TextBoxType>('password');
   const [confirmPasswordMode, setConfirmPasswordMode] = useState<TextBoxTypes.TextBoxType>('password');
-  const validatorRef = useRef(null);
+  const validatorRef = useRef<ValidatorRef>(null);
 
   const passwordButton = useMemo<ButtonTypes.Properties>(
-    () => ({
+    (): ButtonTypes.Properties => ({
       icon: 'eyeopen',
       stylingMode: 'text',
-      onClick: () => {
+      onClick: (): void => {
         setPasswordMode(passwordMode === 'text' ? 'password' : 'text');
       },
     }),
-    [passwordMode, setPasswordMode],
+    [passwordMode],
   );
 
   const confirmPasswordButton = useMemo<ButtonTypes.Properties>(
-    () => ({
+    (): ButtonTypes.Properties => ({
       icon: 'eyeopen',
       stylingMode: 'text',
-      onClick: () => {
+      onClick: (): void => {
         setConfirmPasswordMode(confirmPasswordMode === 'text' ? 'password' : 'text');
       },
     }),
-    [confirmPasswordMode, setConfirmPasswordMode],
+    [confirmPasswordMode],
   );
 
-  const passwordComparison = useCallback<any>(() => password, [password]);
+  const passwordComparison = useCallback((): string => password, [password]);
 
   const onPasswordChanged = useCallback(
-    (e: TextBoxTypes.ValueChangedEvent) => {
+    (e: TextBoxTypes.ValueChangedEvent): void => {
       setPassword(e.value);
       if (confirmPassword) {
         validatorRef.current.instance().validate();
       }
     },
-    [confirmPassword, setPassword],
+    [confirmPassword],
   );
 
-  const onConfirmPasswordChanged = useCallback((e: TextBoxTypes.ValueChangedEvent) => {
+  const onConfirmPasswordChanged = useCallback((e: TextBoxTypes.ValueChangedEvent): void => {
     setConfirmPassword(e.value);
   }, []);
 
@@ -330,20 +337,20 @@ function App() {
   );
 }
 
-function sendRequest(value: string) {
+function sendRequest(value: string): Promise<boolean> {
   const invalidEmail = 'test@dx-email.com';
-  return new Promise((resolve) => {
-    setTimeout(() => {
+  return new Promise((resolve): void => {
+    setTimeout((): void => {
       resolve(value !== invalidEmail);
     }, 1000);
   });
 }
 
-function asyncValidation(params: { value: any }) {
+function asyncValidation(params: ValidationCallbackData): Promise<boolean> {
   return sendRequest(params.value);
 }
 
-function validateVacationDatesRange({ value }) {
+function validateVacationDatesRange({ value }: ValidationCallbackData): boolean {
   const [startDate, endDate] = value;
 
   if (startDate === null || endDate === null) {
@@ -356,7 +363,7 @@ function validateVacationDatesRange({ value }) {
   return daysDifference < 25;
 }
 
-function validateVacationDatesPresence({ value }) {
+function validateVacationDatesPresence({ value }: ValidationCallbackData): boolean {
   const [startDate, endDate] = value;
 
   if (startDate === null && endDate === null) {
diff --git a/apps/demos/Demos/Validation/Overview/ReactJs/App.js b/apps/demos/Demos/Validation/Overview/ReactJs/App.js
index 2873b03ebe11..839e7082388a 100644
--- a/apps/demos/Demos/Validation/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/Validation/Overview/ReactJs/App.js
@@ -69,7 +69,7 @@ function App() {
         setPasswordMode(passwordMode === 'text' ? 'password' : 'text');
       },
     }),
-    [passwordMode, setPasswordMode],
+    [passwordMode],
   );
   const confirmPasswordButton = useMemo(
     () => ({
@@ -79,7 +79,7 @@ function App() {
         setConfirmPasswordMode(confirmPasswordMode === 'text' ? 'password' : 'text');
       },
     }),
-    [confirmPasswordMode, setConfirmPasswordMode],
+    [confirmPasswordMode],
   );
   const passwordComparison = useCallback(() => password, [password]);
   const onPasswordChanged = useCallback(
@@ -89,7 +89,7 @@ function App() {
         validatorRef.current.instance().validate();
       }
     },
-    [confirmPassword, setPassword],
+    [confirmPassword],
   );
   const onConfirmPasswordChanged = useCallback((e) => {
     setConfirmPassword(e.value);
diff --git a/apps/demos/tsconfig.react-check.json b/apps/demos/tsconfig.react-check.json
index 288691fec413..48e9619831c2 100644
--- a/apps/demos/tsconfig.react-check.json
+++ b/apps/demos/tsconfig.react-check.json
@@ -126,6 +126,20 @@
     "Demos/ProgressBar/**/React/**/*.tsx",
     "Demos/ProgressBar/**/React/**/*.ts",
     "Demos/RangeSlider/**/React/**/*.tsx",
-    "Demos/RangeSlider/**/React/**/*.ts"
+    "Demos/RangeSlider/**/React/**/*.ts",
+    "Demos/Switch/**/React/**/*.ts",
+    "Demos/Switch/**/React/**/*.tsx",
+    "Demos/TagBox/**/React/**/*.ts",
+    "Demos/TagBox/**/React/**/*.tsx",
+    "Demos/TextArea/**/React/**/*.ts",
+    "Demos/TextArea/**/React/**/*.tsx",
+    "Demos/TextBox/**/React/**/*.ts",
+    "Demos/TextBox/**/React/**/*.tsx",
+    "Demos/Toast/**/React/**/*.ts",
+    "Demos/Toast/**/React/**/*.tsx",
+    "Demos/Tooltip/**/React/**/*.ts",
+    "Demos/Tooltip/**/React/**/*.tsx",
+    "Demos/Validation/**/React/**/*.ts",
+    "Demos/Validation/**/React/**/*.tsx"
   ]
 }