diff --git a/apps/demos/Demos/Button/PredefinedTypes/React/App.tsx b/apps/demos/Demos/Button/PredefinedTypes/React/App.tsx
index f8689ad7234c..baee86a61048 100644
--- a/apps/demos/Demos/Button/PredefinedTypes/React/App.tsx
+++ b/apps/demos/Demos/Button/PredefinedTypes/React/App.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
-import { Button, type ButtonTypes } from 'devextreme-react/button';
+import { Button } from 'devextreme-react/button';
+import type { ButtonTypes } from 'devextreme-react/button';
 import notify from 'devextreme/ui/notify';
 
-const onClick = (e: ButtonTypes.ClickEvent) => {
-  const buttonText = e.component.option('text');
+const onClick = (e: ButtonTypes.ClickEvent): void => {
+  const buttonText = e.component.option('text') ?? '';
   notify(`The ${capitalize(buttonText)} button was clicked`);
 };
 
-function capitalize(text: string) {
+function capitalize(text: string): string {
   return text.charAt(0).toUpperCase() + text.slice(1);
 }
 
diff --git a/apps/demos/Demos/Button/PredefinedTypes/ReactJs/App.js b/apps/demos/Demos/Button/PredefinedTypes/ReactJs/App.js
index ce188927bca0..9c25c763cfe5 100644
--- a/apps/demos/Demos/Button/PredefinedTypes/ReactJs/App.js
+++ b/apps/demos/Demos/Button/PredefinedTypes/ReactJs/App.js
@@ -3,7 +3,7 @@ import { Button } from 'devextreme-react/button';
 import notify from 'devextreme/ui/notify';
 
 const onClick = (e) => {
-  const buttonText = e.component.option('text');
+  const buttonText = e.component.option('text') ?? '';
   notify(`The ${capitalize(buttonText)} button was clicked`);
 };
 function capitalize(text) {
diff --git a/apps/demos/Demos/Charts/AjaxRequest/React/App.tsx b/apps/demos/Demos/Charts/AjaxRequest/React/App.tsx
index bf0634443896..dbedfed273e5 100644
--- a/apps/demos/Demos/Charts/AjaxRequest/React/App.tsx
+++ b/apps/demos/Demos/Charts/AjaxRequest/React/App.tsx
@@ -9,7 +9,7 @@ import Chart, {
   Tick,
 } from 'devextreme-react/chart';
 
-const customizeText = (e) => `Day ${e.value}`;
+const customizeText = (e: { value: string | number | Date }): string => `Day ${e.value}`;
 
 function App() {
   return (
diff --git a/apps/demos/Demos/Charts/Annotation/React/App.tsx b/apps/demos/Demos/Charts/Annotation/React/App.tsx
index 1d826c166a34..297d2d25ce23 100644
--- a/apps/demos/Demos/Charts/Annotation/React/App.tsx
+++ b/apps/demos/Demos/Charts/Annotation/React/App.tsx
@@ -14,7 +14,7 @@ import {
 } from 'devextreme-react/chart';
 import { dataSource, annotationSources } from './data.ts';
 
-const customizeTooltip = (annotation) => ({
+const customizeTooltip = (annotation: { description: string }): Record<string, string> => ({
   html: `<div class='tooltip'>${annotation.description}</div>`,
 });
 
diff --git a/apps/demos/Demos/Charts/AreaSelectionZooming/React/App.tsx b/apps/demos/Demos/Charts/AreaSelectionZooming/React/App.tsx
index e34e43441755..c3be7b5226d9 100644
--- a/apps/demos/Demos/Charts/AreaSelectionZooming/React/App.tsx
+++ b/apps/demos/Demos/Charts/AreaSelectionZooming/React/App.tsx
@@ -11,23 +11,23 @@ import Chart, {
   Crosshair,
   Legend,
   Border,
-  type ChartTypes,
 } from 'devextreme-react/chart';
+import type { ChartTypes, ChartRef } from 'devextreme-react/chart';
 import Button from 'devextreme-react/button';
 import { birthLife } from './data.ts';
 
-function customizeTooltip(pointInfo: ChartTypes.CommonPointInfo) {
-  const { data } = pointInfo.point;
+function customizeTooltip(pointInfo: ChartTypes.CommonPointInfo): Record<string, string> {
+  const { data } = pointInfo.point ?? {};
   return {
     text: `${data.country} ${data.year}`,
   };
 }
 
 function App() {
-  const chartRef = useRef(null);
+  const chartRef = useRef<ChartRef>(null);
 
   const resetZoom = useCallback(() => {
-    chartRef.current.instance().resetVisualRange();
+    chartRef.current?.instance().resetVisualRange();
   }, []);
 
   return (
diff --git a/apps/demos/Demos/Charts/AreaSelectionZooming/ReactJs/App.js b/apps/demos/Demos/Charts/AreaSelectionZooming/ReactJs/App.js
index 56197a773e39..6636578fba4d 100644
--- a/apps/demos/Demos/Charts/AreaSelectionZooming/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/AreaSelectionZooming/ReactJs/App.js
@@ -16,7 +16,7 @@ import Button from 'devextreme-react/button';
 import { birthLife } from './data.js';
 
 function customizeTooltip(pointInfo) {
-  const { data } = pointInfo.point;
+  const { data } = pointInfo.point ?? {};
   return {
     text: `${data.country} ${data.year}`,
   };
@@ -24,7 +24,7 @@ function customizeTooltip(pointInfo) {
 function App() {
   const chartRef = useRef(null);
   const resetZoom = useCallback(() => {
-    chartRef.current.instance().resetVisualRange();
+    chartRef.current?.instance().resetVisualRange();
   }, []);
   return (
     <div>
diff --git a/apps/demos/Demos/Charts/BarDrillDown/React/App.tsx b/apps/demos/Demos/Charts/BarDrillDown/React/App.tsx
index d3fcc39a4969..16b7c7563257 100644
--- a/apps/demos/Demos/Charts/BarDrillDown/React/App.tsx
+++ b/apps/demos/Demos/Charts/BarDrillDown/React/App.tsx
@@ -4,15 +4,15 @@ import {
   Series,
   Legend,
   ValueAxis,
-  type ChartTypes,
 } from 'devextreme-react/chart';
+import type { ChartTypes } from 'devextreme-react/chart';
 import { Button } from 'devextreme-react/button';
 import service from './data.ts';
 
 const colors = ['#6babac', '#e55253'];
 
 function App() {
-  const [isFirstLevel, setIsFirstLevel] = useState(true);
+  const [isFirstLevel, setIsFirstLevel] = useState<boolean>(true);
   const [data, setData] = useState(service.filterData(''));
 
   const customizePoint = useCallback((): {
@@ -28,19 +28,19 @@ function App() {
     } : {},
   }), [isFirstLevel]);
 
-  const onPointClick = useCallback((e: ChartTypes.PointClickEvent) => {
+  const onPointClick = useCallback((e: ChartTypes.PointClickEvent): void => {
     if (isFirstLevel) {
       setIsFirstLevel(false);
-      setData(service.filterData(e.target.originalArgument.toString()));
+      setData(service.filterData(e.target.originalArgument?.toString() ?? ''));
     }
-  }, [isFirstLevel, setData, setIsFirstLevel]);
+  }, [isFirstLevel]);
 
   const onButtonClick = useCallback(() => {
     if (!isFirstLevel) {
       setIsFirstLevel(true);
       setData(service.filterData(''));
     }
-  }, [isFirstLevel, setData, setIsFirstLevel]);
+  }, [isFirstLevel]);
 
   return (
     <div>
diff --git a/apps/demos/Demos/Charts/BarDrillDown/ReactJs/App.js b/apps/demos/Demos/Charts/BarDrillDown/ReactJs/App.js
index fa9b45916d7e..3950a86fb968 100644
--- a/apps/demos/Demos/Charts/BarDrillDown/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/BarDrillDown/ReactJs/App.js
@@ -24,17 +24,17 @@ function App() {
     (e) => {
       if (isFirstLevel) {
         setIsFirstLevel(false);
-        setData(service.filterData(e.target.originalArgument.toString()));
+        setData(service.filterData(e.target.originalArgument?.toString() ?? ''));
       }
     },
-    [isFirstLevel, setData, setIsFirstLevel],
+    [isFirstLevel],
   );
   const onButtonClick = useCallback(() => {
     if (!isFirstLevel) {
       setIsFirstLevel(true);
       setData(service.filterData(''));
     }
-  }, [isFirstLevel, setData, setIsFirstLevel]);
+  }, [isFirstLevel]);
   return (
     <div>
       <Chart
diff --git a/apps/demos/Demos/Charts/Bubble/React/App.tsx b/apps/demos/Demos/Charts/Bubble/React/App.tsx
index efea67a6bb15..0f48c75b9e52 100644
--- a/apps/demos/Demos/Charts/Bubble/React/App.tsx
+++ b/apps/demos/Demos/Charts/Bubble/React/App.tsx
@@ -10,17 +10,17 @@ import {
   Border,
   Tooltip,
   Export,
-  type ChartTypes,
 } from 'devextreme-react/chart';
+import type { ChartTypes } from 'devextreme-react/chart';
 import { dataSource } from './data.ts';
 
-const palette = ['#00ced1', '#008000', '#ffd700', '#ff7f50'];
+const palette: string[] = ['#00ced1', '#008000', '#ffd700', '#ff7f50'];
 
-const customizeTooltip = (pointInfo) => ({
-  text: `${pointInfo.point.tag}<br/>Total Population: ${pointInfo.argumentText}M<br/>Population with Age over 60: ${pointInfo.valueText}M (${pointInfo.size}%)`,
+const customizeTooltip = (pointInfo: ChartTypes.BubblePointInfo): Record<string, string> => ({
+  text: `${pointInfo.point?.tag}<br/>Total Population: ${pointInfo.argumentText}M<br/>Population with Age over 60: ${pointInfo.valueText}M (${pointInfo.size}%)`,
 });
 
-function seriesClick(e: ChartTypes.SeriesClickEvent) {
+function seriesClick(e: ChartTypes.SeriesClickEvent): void {
   const series = e.target;
   if (series.isVisible()) {
     series.hide();
@@ -29,7 +29,7 @@ function seriesClick(e: ChartTypes.SeriesClickEvent) {
   }
 }
 
-const customizeText = (e) => `${e.value}M`;
+const customizeText = (e: { value: string | number | Date }): string => `${e.value}M`;
 
 function App() {
   return (
diff --git a/apps/demos/Demos/Charts/Bubble/ReactJs/App.js b/apps/demos/Demos/Charts/Bubble/ReactJs/App.js
index 3a7145f69f9e..83e3c114852f 100644
--- a/apps/demos/Demos/Charts/Bubble/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/Bubble/ReactJs/App.js
@@ -15,7 +15,7 @@ import { dataSource } from './data.js';
 
 const palette = ['#00ced1', '#008000', '#ffd700', '#ff7f50'];
 const customizeTooltip = (pointInfo) => ({
-  text: `${pointInfo.point.tag}<br/>Total Population: ${pointInfo.argumentText}M<br/>Population with Age over 60: ${pointInfo.valueText}M (${pointInfo.size}%)`,
+  text: `${pointInfo.point?.tag}<br/>Total Population: ${pointInfo.argumentText}M<br/>Population with Age over 60: ${pointInfo.valueText}M (${pointInfo.size}%)`,
 });
 function seriesClick(e) {
   const series = e.target;
diff --git a/apps/demos/Demos/Charts/Candlestick/React/App.tsx b/apps/demos/Demos/Charts/Candlestick/React/App.tsx
index 5367bcb582c1..a2bf77f8e791 100644
--- a/apps/demos/Demos/Charts/Candlestick/React/App.tsx
+++ b/apps/demos/Demos/Charts/Candlestick/React/App.tsx
@@ -12,14 +12,21 @@ import Chart, {
   Export,
   Tooltip,
 } from 'devextreme-react/chart';
+import type { ChartTypes } from 'devextreme-react/chart';
 import { dataSource } from './data.ts';
 
-const customizeTooltip = (arg) => ({
-  text: `Open: $${arg.openValue}<br/>
-Close: $${arg.closeValue}<br/>
-High: $${arg.highValue}<br/>
-Low: $${arg.lowValue}<br/>`,
-});
+const customizeTooltip = (arg: ChartTypes.CandleStickPointInfo | ChartTypes.PointInfo): Record<string, string> => {
+  if (!('openValue' in arg)) {
+    return { text: '' };
+  }
+
+  return {
+    text: `Open: $${arg.openValue}<br/>
+          Close: $${arg.closeValue}<br/>
+          High: $${arg.highValue}<br/>
+          Low: $${arg.lowValue}<br/>`,
+  };
+};
 
 function App() {
   return (
diff --git a/apps/demos/Demos/Charts/Candlestick/ReactJs/App.js b/apps/demos/Demos/Charts/Candlestick/ReactJs/App.js
index 1d03d4551783..f14294f3c2ae 100644
--- a/apps/demos/Demos/Charts/Candlestick/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/Candlestick/ReactJs/App.js
@@ -14,12 +14,17 @@ import Chart, {
 } from 'devextreme-react/chart';
 import { dataSource } from './data.js';
 
-const customizeTooltip = (arg) => ({
-  text: `Open: $${arg.openValue}<br/>
-Close: $${arg.closeValue}<br/>
-High: $${arg.highValue}<br/>
-Low: $${arg.lowValue}<br/>`,
-});
+const customizeTooltip = (arg) => {
+  if (!('openValue' in arg)) {
+    return { text: '' };
+  }
+  return {
+    text: `Open: $${arg.openValue}<br/>
+          Close: $${arg.closeValue}<br/>
+          High: $${arg.highValue}<br/>
+          Low: $${arg.lowValue}<br/>`,
+  };
+};
 function App() {
   return (
     <Chart
diff --git a/apps/demos/Demos/Charts/CenterLabelCustomization/React/App.tsx b/apps/demos/Demos/Charts/CenterLabelCustomization/React/App.tsx
index 7b938f71a7b8..9f85d9dceadd 100644
--- a/apps/demos/Demos/Charts/CenterLabelCustomization/React/App.tsx
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/React/App.tsx
@@ -6,20 +6,22 @@ import PieChart, {
   Label,
   Connector,
 } from 'devextreme-react/pie-chart';
+import type { PieChartTypes } from 'devextreme-react/pie-chart';
 
 import { data } from './data.ts';
+import type { CountryData } from './types.ts';
 import CenterTemplate from './CenterTemplate.tsx';
 
-const countries = Array.from(new Set(data.map((item) => item.country)));
+const countries: string[] = Array.from(new Set(data.map((item: CountryData): string => item.country)));
 
-const customizeLabel = (e) => `${e.argumentText}\n${e.valueText}`;
+const customizeLabel = (e: PieChartTypes.PointInfo): string => `${e.argumentText}\n${e.valueText}`;
 
 function App() {
-  const pies = countries.map((country) => (
+  const pies = countries.map((country: string) => (
     <PieChart
       id="pie-chart"
       key={country}
-      dataSource={data.filter((i) => i.country === country)}
+      dataSource={data.filter((i: CountryData): boolean => i.country === country)}
       resolveLabelOverlapping="shift"
       sizeGroup="piesGroup"
       innerRadius={0.65}
diff --git a/apps/demos/Demos/Charts/CenterLabelCustomization/React/CenterTemplate.tsx b/apps/demos/Demos/Charts/CenterLabelCustomization/React/CenterTemplate.tsx
index 0ae81969e053..a1bb21f9b49a 100644
--- a/apps/demos/Demos/Charts/CenterLabelCustomization/React/CenterTemplate.tsx
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/React/CenterTemplate.tsx
@@ -1,18 +1,18 @@
-import type { PieChartRef } from 'devextreme-react/pie-chart';
 import React from 'react';
+import type { PieChartRef } from 'devextreme-react/pie-chart';
 
 const formatNumber = new Intl.NumberFormat('en-US', {
   minimumFractionDigits: 0,
 }).format;
 
-function calculateTotal(pieChart: ReturnType<PieChartRef['instance']>) {
+function calculateTotal(pieChart: ReturnType<PieChartRef['instance']>): string {
   return formatNumber(pieChart
     .getAllSeries()[0]
     .getVisiblePoints()
-    .reduce((s, p) => s + Number(p.originalValue), 0));
+    .reduce((s, p): number => s + Number(p.originalValue), 0));
 }
 
-function getImagePath(country: string) {
+function getImagePath(country: string): string {
   return `../../../../images/flags/${country.replace(/\s/, '').toLowerCase()}.svg`;
 }
 
diff --git a/apps/demos/Demos/Charts/CenterLabelCustomization/React/data.ts b/apps/demos/Demos/Charts/CenterLabelCustomization/React/data.ts
index 3f65242c4184..17555541a3c8 100644
--- a/apps/demos/Demos/Charts/CenterLabelCustomization/React/data.ts
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/React/data.ts
@@ -1,4 +1,6 @@
-export const data = [
+import type { CountryData } from './types.ts';
+
+export const data: CountryData[] = [
   { country: 'France', commodity: 'Nuclear', total: 413278 },
   { country: 'Germany', commodity: 'Nuclear', total: 76536 },
   { country: 'France', commodity: 'Thermal', total: 47594 },
diff --git a/apps/demos/Demos/Charts/CenterLabelCustomization/React/types.ts b/apps/demos/Demos/Charts/CenterLabelCustomization/React/types.ts
new file mode 100644
index 000000000000..85ee9f09d280
--- /dev/null
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/React/types.ts
@@ -0,0 +1,5 @@
+export type CountryData = {
+  country: string;
+  commodity: string;
+  total: number;
+};
diff --git a/apps/demos/Demos/Charts/CustomAnnotations/React/AnnotationTemplate.tsx b/apps/demos/Demos/Charts/CustomAnnotations/React/AnnotationTemplate.tsx
index 80d99822115e..fabd7d4e0d71 100644
--- a/apps/demos/Demos/Charts/CustomAnnotations/React/AnnotationTemplate.tsx
+++ b/apps/demos/Demos/Charts/CustomAnnotations/React/AnnotationTemplate.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
+import type { PopulationData } from './types.ts';
+
+function getImagePath(data?: { name: string; }): string {
+  if (!data) {
+    return '';
+  }
 
-function getImagePath(data: { name: string; }) {
   return `../../../../images/flags/${data.name.replace(/\s/, '')}.svg`;
 }
 
@@ -8,14 +13,7 @@ const formatNumber = new Intl.NumberFormat('en-US', {
   minimumFractionDigits: 0,
 }).format;
 
-interface AnnotationData {
-  name: string,
-  capital: string,
-  population: number,
-  area: number,
-}
-
-export default function AnnotationTemplate(annotation: { argument?: string; data?: AnnotationData; }) {
+export default function AnnotationTemplate(annotation: { argument?: string; data?: PopulationData; }) {
   const { data } = annotation;
   return (
     <svg className="annotation">
@@ -24,11 +22,11 @@ export default function AnnotationTemplate(annotation: { argument?: string; data
       <text x="70" y="25" className="state">{annotation.argument}</text>
       <text x="0" y="60">
         <tspan className="caption">Capital:</tspan>
-        <tspan className="capital" dx="5">{data.capital}</tspan>
+        <tspan className="capital" dx="5">{data?.capital}</tspan>
         <tspan dy="14" x="0" className="caption">Population:</tspan>
-        <tspan className="population" dx="5">{formatNumber(data.population)}</tspan>
+        <tspan className="population" dx="5">{formatNumber(data?.population ?? 0)}</tspan>
         <tspan dy="14" x="0" className="caption">Area:</tspan>
-        <tspan className="area" dx="5">{formatNumber(data.area)}</tspan>
+        <tspan className="area" dx="5">{formatNumber(data?.area ?? 0)}</tspan>
         <tspan dx="5">km</tspan>
         <tspan className="sup" dy="-2">2</tspan>
       </text>
diff --git a/apps/demos/Demos/Charts/CustomAnnotations/React/data.ts b/apps/demos/Demos/Charts/CustomAnnotations/React/data.ts
index 608581f5fb54..ec9cb5be2a79 100644
--- a/apps/demos/Demos/Charts/CustomAnnotations/React/data.ts
+++ b/apps/demos/Demos/Charts/CustomAnnotations/React/data.ts
@@ -1,4 +1,6 @@
-export const populationData = [{
+import type { PopulationData } from './types.ts';
+
+export const populationData: PopulationData[] = [{
   name: 'California',
   population: 38802500,
   capital: 'Sacramento',
diff --git a/apps/demos/Demos/Charts/CustomAnnotations/React/types.ts b/apps/demos/Demos/Charts/CustomAnnotations/React/types.ts
new file mode 100644
index 000000000000..9e3b4bc66645
--- /dev/null
+++ b/apps/demos/Demos/Charts/CustomAnnotations/React/types.ts
@@ -0,0 +1,6 @@
+export type PopulationData = {
+  name: string;
+  population: number;
+  capital: string;
+  area: number;
+};
diff --git a/apps/demos/Demos/Charts/CustomAnnotations/ReactJs/AnnotationTemplate.js b/apps/demos/Demos/Charts/CustomAnnotations/ReactJs/AnnotationTemplate.js
index 6a2df7e3f887..8824ff56c0d4 100644
--- a/apps/demos/Demos/Charts/CustomAnnotations/ReactJs/AnnotationTemplate.js
+++ b/apps/demos/Demos/Charts/CustomAnnotations/ReactJs/AnnotationTemplate.js
@@ -1,6 +1,9 @@
 import React from 'react';
 
 function getImagePath(data) {
+  if (!data) {
+    return '';
+  }
   return `../../../../images/flags/${data.name.replace(/\s/, '')}.svg`;
 }
 const formatNumber = new Intl.NumberFormat('en-US', {
@@ -36,7 +39,7 @@ export default function AnnotationTemplate(annotation) {
           className="capital"
           dx="5"
         >
-          {data.capital}
+          {data?.capital}
         </tspan>
         <tspan
           dy="14"
@@ -49,7 +52,7 @@ export default function AnnotationTemplate(annotation) {
           className="population"
           dx="5"
         >
-          {formatNumber(data.population)}
+          {formatNumber(data?.population ?? 0)}
         </tspan>
         <tspan
           dy="14"
@@ -62,7 +65,7 @@ export default function AnnotationTemplate(annotation) {
           className="area"
           dx="5"
         >
-          {formatNumber(data.area)}
+          {formatNumber(data?.area ?? 0)}
         </tspan>
         <tspan dx="5">km</tspan>
         <tspan
diff --git a/apps/demos/Demos/Charts/CustomFillStyles/React/App.tsx b/apps/demos/Demos/Charts/CustomFillStyles/React/App.tsx
index 1cd3d8ab70e9..0a13b8c2c31a 100644
--- a/apps/demos/Demos/Charts/CustomFillStyles/React/App.tsx
+++ b/apps/demos/Demos/Charts/CustomFillStyles/React/App.tsx
@@ -1,17 +1,32 @@
 import React from 'react';
 import PieChart, {
-  Series, Label, Connector, Export,
+  Series,
+  Label,
+  Connector,
+  Export,
 } from 'devextreme-react/pie-chart';
+import type { SeriesPoint } from 'devextreme/common/charts';
 import {
-  getStrokePattern, getSquarePattern, getLinearGradient, getRadialGradient, getPatternImage,
+  getStrokePattern,
+  getSquarePattern,
+  getLinearGradient,
+  getRadialGradient,
+  getPatternImage,
 } from './utils.ts';
 import { data } from './data.ts';
 
-function customizeText(info: { argument: string; }) {
+function customizeText(info: { argument: string; }): string {
   return info.argument;
 }
 
-function customizePoint(point) {
+type CustomizePointArg = {
+  series: {
+    getPointsByArg: (arg: string) => { getColor: () => string; }[];
+  };
+  argument: string;
+};
+
+function customizePoint(point: CustomizePointArg): SeriesPoint {
   const color = point.series.getPointsByArg(point.argument)[0].getColor();
   let fillId;
   switch (point.argument) {
diff --git a/apps/demos/Demos/Charts/CustomFillStyles/React/utils.ts b/apps/demos/Demos/Charts/CustomFillStyles/React/utils.ts
index 37550dc8f884..efa760bac20c 100644
--- a/apps/demos/Demos/Charts/CustomFillStyles/React/utils.ts
+++ b/apps/demos/Demos/Charts/CustomFillStyles/React/utils.ts
@@ -3,12 +3,12 @@ import { registerGradient, registerPattern } from 'devextreme/common/charts';
 const imagePatternSize = 12;
 const shapePatternSize = 6;
 
-function hexToRgb(hex: string, opacity = 1) {
+function hexToRgb(hex: string, opacity = 1): string {
   const hexColorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return `rgba(${parseInt(hexColorParts[1], 16)}, ${parseInt(hexColorParts[2], 16)}, ${parseInt(hexColorParts[3], 16)}, ${opacity})`;
+  return `rgba(${parseInt(hexColorParts?.[1] ?? '', 16)}, ${parseInt(hexColorParts?.[2] ?? '', 16)}, ${parseInt(hexColorParts?.[3] ?? '', 16)}, ${opacity})`;
 }
 
-function getGradient(type: string, color1: string, color2: string) {
+function getGradient(type: string, color1: string, color2: string): string {
   return registerGradient(type, {
     colors: [{
       offset: '20%',
@@ -20,15 +20,15 @@ function getGradient(type: string, color1: string, color2: string) {
   });
 }
 
-export function getLinearGradient(color: string) { return getGradient('linear', color, hexToRgb(color, 0.5)); }
+export function getLinearGradient(color: string): string { return getGradient('linear', color, hexToRgb(color, 0.5)); }
 
-export function getRadialGradient(color: string) { return getGradient('radial', hexToRgb(color, 0.5), color); }
+export function getRadialGradient(color: string): string { return getGradient('radial', hexToRgb(color, 0.5), color); }
 
-export function getPatternImage(color: string) {
+export function getPatternImage(color: string): string {
   return registerPattern({
     width: imagePatternSize,
     height: imagePatternSize,
-    template: (container) => {
+    template: (container: SVGGElement): void => {
       const rect = createRect(imagePatternSize, color);
       const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
       image.setAttribute('x', '0');
@@ -44,11 +44,11 @@ export function getPatternImage(color: string) {
   });
 }
 
-export function getStrokePattern(color: string) {
+export function getStrokePattern(color: string): string {
   return registerPattern({
     width: shapePatternSize,
     height: shapePatternSize,
-    template: (container) => {
+    template: (container: SVGGElement): void => {
       const halfSize = shapePatternSize / 2;
       const oneAndAHalfSize = shapePatternSize * 1.5;
       const d = `M ${halfSize} ${-halfSize} L ${-halfSize} ${halfSize} M 0 ${shapePatternSize} L ${shapePatternSize} 0 M ${oneAndAHalfSize} ${halfSize} L ${halfSize} ${oneAndAHalfSize}`;
@@ -62,27 +62,27 @@ export function getStrokePattern(color: string) {
   });
 }
 
-export function getSquarePattern(color: string) {
+export function getSquarePattern(color: string): string {
   return registerPattern({
     width: shapePatternSize,
     height: shapePatternSize,
-    template: (container) => {
+    template: (container: SVGGElement): void => {
       const rect = createRect(shapePatternSize, null, color, 2);
       container.appendChild(rect);
     },
   });
 }
 
-export function createRect(size: string | number, fill: string, stroke?: string, strokeWidth?: string | number) {
+export function createRect(size: string | number, fill: string | null, stroke?: string, strokeWidth?: string | number): SVGRectElement {
   const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
 
   rect.setAttribute('x', '0');
   rect.setAttribute('y', '0');
   rect.setAttribute('width', size.toString());
   rect.setAttribute('height', size.toString());
-  rect.setAttribute('fill', fill);
-  rect.setAttribute('stroke', stroke);
-  rect.setAttribute('stroke-width', strokeWidth?.toString());
+  rect.setAttribute('fill', fill ?? '');
+  rect.setAttribute('stroke', stroke ?? '');
+  rect.setAttribute('stroke-width', strokeWidth?.toString() ?? '');
 
   return rect;
 }
diff --git a/apps/demos/Demos/Charts/CustomFillStyles/ReactJs/utils.js b/apps/demos/Demos/Charts/CustomFillStyles/ReactJs/utils.js
index c9f3a18535e7..d47dd70be99d 100644
--- a/apps/demos/Demos/Charts/CustomFillStyles/ReactJs/utils.js
+++ b/apps/demos/Demos/Charts/CustomFillStyles/ReactJs/utils.js
@@ -4,10 +4,10 @@ const imagePatternSize = 12;
 const shapePatternSize = 6;
 function hexToRgb(hex, opacity = 1) {
   const hexColorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return `rgba(${parseInt(hexColorParts[1], 16)}, ${parseInt(hexColorParts[2], 16)}, ${parseInt(
-    hexColorParts[3],
+  return `rgba(${parseInt(hexColorParts?.[1] ?? '', 16)}, ${parseInt(
+    hexColorParts?.[2] ?? '',
     16,
-  )}, ${opacity})`;
+  )}, ${parseInt(hexColorParts?.[3] ?? '', 16)}, ${opacity})`;
 }
 function getGradient(type, color1, color2) {
   return registerGradient(type, {
@@ -79,8 +79,8 @@ export function createRect(size, fill, stroke, strokeWidth) {
   rect.setAttribute('y', '0');
   rect.setAttribute('width', size.toString());
   rect.setAttribute('height', size.toString());
-  rect.setAttribute('fill', fill);
-  rect.setAttribute('stroke', stroke);
-  rect.setAttribute('stroke-width', strokeWidth?.toString());
+  rect.setAttribute('fill', fill ?? '');
+  rect.setAttribute('stroke', stroke ?? '');
+  rect.setAttribute('stroke-width', strokeWidth?.toString() ?? '');
   return rect;
 }
diff --git a/apps/demos/Demos/Charts/CustomizePointsAndLabels/React/App.tsx b/apps/demos/Demos/Charts/CustomizePointsAndLabels/React/App.tsx
index 996f5cc6d2ee..271169c4acae 100644
--- a/apps/demos/Demos/Charts/CustomizePointsAndLabels/React/App.tsx
+++ b/apps/demos/Demos/Charts/CustomizePointsAndLabels/React/App.tsx
@@ -9,37 +9,38 @@ import {
   ConstantLine,
   Export,
 } from 'devextreme-react/chart';
+import type { SeriesPoint, SeriesLabel } from 'devextreme-react/common/charts';
 import { temperaturesData } from './data.ts';
 
 const highAverage = 77;
 const lowAverage = 58;
 
-function customizeText(arg: { valueText: string; }) {
+function customizeText(arg: { valueText: string; }): string {
   return `${arg.valueText}&#176F`;
 }
 
 function App() {
-  const customizePoint = useCallback((arg: { value: number; }) => {
+  const customizePoint = useCallback((arg: { value: number; }): SeriesPoint => {
     if (arg.value > highAverage) {
       return { color: '#ff7c7c', hoverStyle: { color: '#ff7c7c' } };
     }
     if (arg.value < lowAverage) {
       return { color: '#8c8cff', hoverStyle: { color: '#8c8cff' } };
     }
-    return null;
+    return {};
   }, []);
 
-  const customizeLabel = useCallback((arg: { value: number; }) => {
+  const customizeLabel = useCallback((arg: { value: number; }): SeriesLabel => {
     if (arg.value > highAverage) {
       return {
         visible: true,
         backgroundColor: '#ff7c7c',
-        customizeText(e) {
+        customizeText(e: { valueText: string }): string {
           return `${e.valueText}&#176F`;
         },
       };
     }
-    return null;
+    return {};
   }, []);
 
   return (
diff --git a/apps/demos/Demos/Charts/CustomizePointsAndLabels/ReactJs/App.js b/apps/demos/Demos/Charts/CustomizePointsAndLabels/ReactJs/App.js
index 9f1c2b2348f3..3cb7da7de53c 100644
--- a/apps/demos/Demos/Charts/CustomizePointsAndLabels/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/CustomizePointsAndLabels/ReactJs/App.js
@@ -24,7 +24,7 @@ function App() {
     if (arg.value < lowAverage) {
       return { color: '#8c8cff', hoverStyle: { color: '#8c8cff' } };
     }
-    return null;
+    return {};
   }, []);
   const customizeLabel = useCallback((arg) => {
     if (arg.value > highAverage) {
@@ -36,7 +36,7 @@ function App() {
         },
       };
     }
-    return null;
+    return {};
   }, []);
   return (
     <Chart
diff --git a/apps/demos/Demos/Charts/DiscreteData/React/data.ts b/apps/demos/Demos/Charts/DiscreteData/React/data.ts
index 7e06c7faaa1e..40ac876ea3d1 100644
--- a/apps/demos/Demos/Charts/DiscreteData/React/data.ts
+++ b/apps/demos/Demos/Charts/DiscreteData/React/data.ts
@@ -1,6 +1,6 @@
-import type { Properties as PolarChartPropsType } from 'devextreme/viz/polar_chart';
+import type { Properties as PolarChartPropsType, PolarChartSeriesType } from 'devextreme/viz/polar_chart';
 
-export const types: (PolarChartPropsType['commonSeriesSettings']['type'])[] = ['scatter', 'line', 'area', 'bar', 'stackedbar'];
+export const types: PolarChartSeriesType[] = ['scatter', 'line', 'area', 'bar', 'stackedbar'];
 
 export const dataSource = [{
   arg: 'January',
diff --git a/apps/demos/Demos/Charts/DiscreteData/ReactJs/App.js b/apps/demos/Demos/Charts/DiscreteData/ReactJs/App.js
index fed22e615368..53737012e5a2 100644
--- a/apps/demos/Demos/Charts/DiscreteData/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/DiscreteData/ReactJs/App.js
@@ -14,7 +14,7 @@ function App() {
     [setCurrentType],
   );
   return (
-    <React.Fragment>
+    <>
       <div className="long-title">
         <h3>Average temperature in London</h3>
       </div>
@@ -51,7 +51,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/Doughnut/React/App.tsx b/apps/demos/Demos/Charts/Doughnut/React/App.tsx
index 1609131ca345..259890438881 100644
--- a/apps/demos/Demos/Charts/Doughnut/React/App.tsx
+++ b/apps/demos/Demos/Charts/Doughnut/React/App.tsx
@@ -8,11 +8,12 @@ import PieChart, {
   Connector,
   Export,
 } from 'devextreme-react/pie-chart';
+import type { PieChartTypes } from 'devextreme-react/pie-chart';
 import { populationByRegions } from './data.ts';
 
-function customizeTooltip(arg: { valueText: string; percent: number; }) {
+function customizeTooltip(arg: PieChartTypes.PointInfo): Record<string, string> {
   return {
-    text: `${arg.valueText} - ${(arg.percent * 100).toFixed(2)}%`,
+    text: `${arg.valueText} - ${((arg.percent ?? 0) * 100).toFixed(2)}%`,
   };
 }
 
diff --git a/apps/demos/Demos/Charts/Doughnut/ReactJs/App.js b/apps/demos/Demos/Charts/Doughnut/ReactJs/App.js
index f42e6f860408..dd48200a0bf7 100644
--- a/apps/demos/Demos/Charts/Doughnut/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/Doughnut/ReactJs/App.js
@@ -12,7 +12,7 @@ import { populationByRegions } from './data.js';
 
 function customizeTooltip(arg) {
   return {
-    text: `${arg.valueText} - ${(arg.percent * 100).toFixed(2)}%`,
+    text: `${arg.valueText} - ${((arg.percent ?? 0) * 100).toFixed(2)}%`,
   };
 }
 function App() {
diff --git a/apps/demos/Demos/Charts/DrillDown/React/App.tsx b/apps/demos/Demos/Charts/DrillDown/React/App.tsx
index e5bd80135070..a939f08abb47 100644
--- a/apps/demos/Demos/Charts/DrillDown/React/App.tsx
+++ b/apps/demos/Demos/Charts/DrillDown/React/App.tsx
@@ -1,27 +1,30 @@
 import React, { useCallback, useState } from 'react';
 import TreeMap, {
-  Size, Title, Colorizer, type TreeMapTypes,
+  Size,
+  Title,
+  Colorizer,
 } from 'devextreme-react/tree-map';
+import type { TreeMapTypes } from 'devextreme-react/tree-map';
 
 import { citiesPopulation } from './data.ts';
 import type { DrillInfo } from './data.ts';
 
 import TreeMapBreadcrumbs from './TreeMapBreadcrumbs.tsx';
 
-function drillInfoClick(node: DrillInfo['node']) {
+function drillInfoClick(node: DrillInfo['node']): void {
   if (node) {
     node.drillDown();
   }
 }
 
-function nodeClick(e: TreeMapTypes.ClickEvent) {
+function nodeClick(e: TreeMapTypes.ClickEvent): void {
   e.node.drillDown();
 }
 
 function App() {
   const [drillInfo, setDrillInfo] = useState<DrillInfo[]>([]);
 
-  const drill = useCallback((e: TreeMapTypes.DrillEvent) => {
+  const drill = useCallback((e: TreeMapTypes.DrillEvent): void => {
     const newDrillInfo = [];
     for (let node = e.node.getParent(); node; node = node.getParent()) {
       newDrillInfo.unshift({
@@ -36,10 +39,10 @@ function App() {
     }
 
     setDrillInfo(newDrillInfo);
-  }, [setDrillInfo]);
+  }, []);
 
   return (
-    <React.Fragment>
+    <>
       <TreeMap
         dataSource={citiesPopulation}
         interactWithGroup={true}
@@ -59,7 +62,7 @@ function App() {
         onItemClick={drillInfoClick}
         treeInfo={drillInfo}
       />
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/DrillDown/React/data.ts b/apps/demos/Demos/Charts/DrillDown/React/data.ts
index b09d88e90512..97e8e20cb138 100644
--- a/apps/demos/Demos/Charts/DrillDown/React/data.ts
+++ b/apps/demos/Demos/Charts/DrillDown/React/data.ts
@@ -1,6 +1,6 @@
 import type { TreeMapTypes } from 'devextreme-react/tree-map';
 
-export type DrillInfo = { text?: string, node?: TreeMapTypes.DrillEvent['node'] };
+export type DrillInfo = { text: string, node?: TreeMapTypes.DrillEvent['node'] };
 
 export const citiesPopulation = [{
   name: 'Africa',
diff --git a/apps/demos/Demos/Charts/DrillDown/ReactJs/App.js b/apps/demos/Demos/Charts/DrillDown/ReactJs/App.js
index 1afbb8129122..46346a722a50 100644
--- a/apps/demos/Demos/Charts/DrillDown/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/DrillDown/ReactJs/App.js
@@ -13,26 +13,23 @@ function nodeClick(e) {
 }
 function App() {
   const [drillInfo, setDrillInfo] = useState([]);
-  const drill = useCallback(
-    (e) => {
-      const newDrillInfo = [];
-      for (let node = e.node.getParent(); node; node = node.getParent()) {
-        newDrillInfo.unshift({
-          text: node.label() || 'All Continents',
-          node,
-        });
-      }
-      if (newDrillInfo.length) {
-        newDrillInfo.push({
-          text: e.node.label(),
-        });
-      }
-      setDrillInfo(newDrillInfo);
-    },
-    [setDrillInfo],
-  );
+  const drill = useCallback((e) => {
+    const newDrillInfo = [];
+    for (let node = e.node.getParent(); node; node = node.getParent()) {
+      newDrillInfo.unshift({
+        text: node.label() || 'All Continents',
+        node,
+      });
+    }
+    if (newDrillInfo.length) {
+      newDrillInfo.push({
+        text: e.node.label(),
+      });
+    }
+    setDrillInfo(newDrillInfo);
+  }, []);
   return (
-    <React.Fragment>
+    <>
       <TreeMap
         dataSource={citiesPopulation}
         interactWithGroup={true}
@@ -52,7 +49,7 @@ function App() {
         onItemClick={drillInfoClick}
         treeInfo={drillInfo}
       />
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/ErrorBars/React/App.tsx b/apps/demos/Demos/Charts/ErrorBars/React/App.tsx
index 10f9f77fe814..6e15d039ff24 100644
--- a/apps/demos/Demos/Charts/ErrorBars/React/App.tsx
+++ b/apps/demos/Demos/Charts/ErrorBars/React/App.tsx
@@ -13,9 +13,10 @@ import Chart, {
   Tooltip,
   Grid,
 } from 'devextreme-react/chart';
+import type { ChartTypes } from 'devextreme-react/chart';
 import { weatherData } from './data.ts';
 
-const customizeTooltip = (pointInfo) => ({
+const customizeTooltip = (pointInfo: ChartTypes.CommonPointInfo): Record<string, string> => ({
   text: `${pointInfo.seriesName}: ${pointInfo.value} (range: ${pointInfo.lowErrorValue} - ${pointInfo.highErrorValue})`,
 });
 
diff --git a/apps/demos/Demos/Charts/ExportAndPrintingAPI/React/App.tsx b/apps/demos/Demos/Charts/ExportAndPrintingAPI/React/App.tsx
index f6ffaf66c60a..428e13c8b9f3 100644
--- a/apps/demos/Demos/Charts/ExportAndPrintingAPI/React/App.tsx
+++ b/apps/demos/Demos/Charts/ExportAndPrintingAPI/React/App.tsx
@@ -8,32 +8,33 @@ import Chart, {
   ValueAxis,
   VisualRange,
 } from 'devextreme-react/chart';
+import type { ChartTypes, ChartRef } from 'devextreme-react/chart';
 import Button from 'devextreme-react/button';
 import { mountains } from './data.ts';
 
-function customizeTooltipText(pointInfo) {
+function customizeTooltipText(pointInfo: ChartTypes.CommonPointInfo): Record<string, string> {
   return {
-    text: `<span class='title'>${pointInfo.argumentText}</span><br />&nbsp;<br />System: ${pointInfo.point.data.system}<br />Height: ${pointInfo.valueText} m`,
+    text: `<span class='title'>${pointInfo.argumentText}</span><br />&nbsp;<br />System: ${pointInfo.point?.data?.system}<br />Height: ${pointInfo.valueText} m`,
   };
 }
 
-function customizeLabelText({ value }) {
+function customizeLabelText({ value }: { value: string | number | Date }): string {
   return `${value} m`;
 }
 
 function App() {
-  const chartRef = useRef(null);
+  const chartRef = useRef<ChartRef>(null);
 
   const printChart = useCallback(() => {
-    chartRef.current.instance().print();
+    chartRef.current?.instance().print();
   }, []);
 
   const exportChart = useCallback(() => {
-    chartRef.current.instance().exportTo('Example', 'png');
+    chartRef.current?.instance().exportTo('Example', 'png');
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <Chart
         id="chart"
         ref={chartRef}
@@ -54,7 +55,7 @@ function App() {
         &nbsp;
         <Button icon="export" text="Export" onClick={exportChart} />
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/ExportAndPrintingAPI/ReactJs/App.js b/apps/demos/Demos/Charts/ExportAndPrintingAPI/ReactJs/App.js
index 967624e511af..bb926512892a 100644
--- a/apps/demos/Demos/Charts/ExportAndPrintingAPI/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/ExportAndPrintingAPI/ReactJs/App.js
@@ -13,7 +13,7 @@ import { mountains } from './data.js';
 
 function customizeTooltipText(pointInfo) {
   return {
-    text: `<span class='title'>${pointInfo.argumentText}</span><br />&nbsp;<br />System: ${pointInfo.point.data.system}<br />Height: ${pointInfo.valueText} m`,
+    text: `<span class='title'>${pointInfo.argumentText}</span><br />&nbsp;<br />System: ${pointInfo.point?.data?.system}<br />Height: ${pointInfo.valueText} m`,
   };
 }
 function customizeLabelText({ value }) {
@@ -22,13 +22,13 @@ function customizeLabelText({ value }) {
 function App() {
   const chartRef = useRef(null);
   const printChart = useCallback(() => {
-    chartRef.current.instance().print();
+    chartRef.current?.instance().print();
   }, []);
   const exportChart = useCallback(() => {
-    chartRef.current.instance().exportTo('Example', 'png');
+    chartRef.current?.instance().exportTo('Example', 'png');
   }, []);
   return (
-    <React.Fragment>
+    <>
       <Chart
         id="chart"
         ref={chartRef}
@@ -65,7 +65,7 @@ function App() {
           onClick={exportChart}
         />
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/React/App.tsx b/apps/demos/Demos/Charts/ExportCustomMarkup/React/App.tsx
index 68bfb047f4fb..c419d77ee303 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/React/App.tsx
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/React/App.tsx
@@ -1,7 +1,13 @@
 import React, { useCallback, useRef } from 'react';
 import {
-  Chart, CommonSeriesSettings, Series, Legend, Title, Subtitle,
+  Chart,
+  CommonSeriesSettings,
+  Series,
+  Legend,
+  Title,
+  Subtitle,
 } from 'devextreme-react/chart';
+import type { ChartRef } from 'devextreme-react/chart';
 import { Button } from 'devextreme-react/button';
 import { exportFromMarkup } from 'devextreme/viz/export';
 import { Canvg } from 'canvg';
@@ -10,7 +16,7 @@ import Form from './Form.tsx';
 
 const barPadding = 0.3;
 
-const prepareMarkup = (chartSVG, markup) => {
+const prepareMarkup = (chartSVG: string, markup: string) => {
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
   svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
@@ -28,21 +34,28 @@ const prepareMarkup = (chartSVG, markup) => {
 };
 
 function App() {
-  const childRef = useRef(null);
-  const chartRef = useRef(null);
+  const childRef = useRef<HTMLDivElement>(null);
+  const chartRef = useRef<ChartRef>(null);
 
   const onClick = useCallback(() => {
     exportFromMarkup(
-      prepareMarkup(chartRef.current.instance().svg(),
-        childRef.current.innerHTML), {
+      prepareMarkup(chartRef.current?.instance().svg() ?? '',
+        childRef.current?.innerHTML ?? ''), {
         width: 820,
         height: 420,
         margin: 0,
         format: 'png',
-        svgToCanvas(svg: Node, canvas) {
-          return new Promise((resolve) => {
+        svgToCanvas(svg: Node, canvas: HTMLCanvasElement) {
+          return new Promise((resolve): void => {
+            const ctx = canvas.getContext('2d');
+
+            if (!ctx) {
+              resolve(() => {});
+              return;
+            }
+
             const v = Canvg.fromString(
-              canvas.getContext('2d'),
+              ctx,
               new XMLSerializer().serializeToString(svg)
             );
 
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/App.js b/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/App.js
index 47fd71006276..0e8dfbf8e978 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/App.js
@@ -32,21 +32,26 @@ function App() {
   const childRef = useRef(null);
   const chartRef = useRef(null);
   const onClick = useCallback(() => {
-    exportFromMarkup(prepareMarkup(chartRef.current.instance().svg(), childRef.current.innerHTML), {
-      width: 820,
-      height: 420,
-      margin: 0,
-      format: 'png',
-      svgToCanvas(svg, canvas) {
-        return new Promise((resolve) => {
-          const v = Canvg.fromString(
-            canvas.getContext('2d'),
-            new XMLSerializer().serializeToString(svg),
-          );
-          resolve(v.render());
-        });
+    exportFromMarkup(
+      prepareMarkup(chartRef.current?.instance().svg() ?? '', childRef.current?.innerHTML ?? ''),
+      {
+        width: 820,
+        height: 420,
+        margin: 0,
+        format: 'png',
+        svgToCanvas(svg, canvas) {
+          return new Promise((resolve) => {
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+              resolve(() => {});
+              return;
+            }
+            const v = Canvg.fromString(ctx, new XMLSerializer().serializeToString(svg));
+            resolve(v.render());
+          });
+        },
       },
-    });
+    );
   }, []);
   return (
     <div id="chart-demo">
diff --git a/apps/demos/Demos/Charts/ExportSeveralCharts/React/App.tsx b/apps/demos/Demos/Charts/ExportSeveralCharts/React/App.tsx
index a7afdc063bf1..e7485fefb565 100644
--- a/apps/demos/Demos/Charts/ExportSeveralCharts/React/App.tsx
+++ b/apps/demos/Demos/Charts/ExportSeveralCharts/React/App.tsx
@@ -1,16 +1,25 @@
 import React, { useCallback, useRef } from 'react';
 import Chart, { Series, Label, Legend } from 'devextreme-react/chart';
+import type { ChartRef } from 'devextreme-react/chart';
 import PieChart, { Series as PieSeries, Label as PieLabel, Connector } from 'devextreme-react/pie-chart';
+import type { PieChartRef } from 'devextreme-react/pie-chart';
 import { Button } from 'devextreme-react/button';
 import { exportWidgets } from 'devextreme/viz/export';
 import { allMedals, goldMedals } from './data.ts';
 
 function App() {
-  const chartRef = useRef(null);
-  const pieChartRef = useRef(null);
+  const chartRef = useRef<ChartRef>(null);
+  const pieChartRef = useRef<PieChartRef>(null);
 
   const onClick = useCallback(() => {
-    exportWidgets([[chartRef.current.instance(), pieChartRef.current.instance()]], {
+    const chart = chartRef.current?.instance();
+    const pieChart = pieChartRef.current?.instance();
+
+    if (!chart || !pieChart) {
+      return;
+    }
+
+    exportWidgets([[chart, pieChart]], {
       fileName: 'chart',
       format: 'PNG',
     });
diff --git a/apps/demos/Demos/Charts/ExportSeveralCharts/ReactJs/App.js b/apps/demos/Demos/Charts/ExportSeveralCharts/ReactJs/App.js
index f6d11063b55a..f6ad9d4419d5 100644
--- a/apps/demos/Demos/Charts/ExportSeveralCharts/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/ExportSeveralCharts/ReactJs/App.js
@@ -13,7 +13,12 @@ function App() {
   const chartRef = useRef(null);
   const pieChartRef = useRef(null);
   const onClick = useCallback(() => {
-    exportWidgets([[chartRef.current.instance(), pieChartRef.current.instance()]], {
+    const chart = chartRef.current?.instance();
+    const pieChart = pieChartRef.current?.instance();
+    if (!chart || !pieChart) {
+      return;
+    }
+    exportWidgets([[chart, pieChart]], {
       fileName: 'chart',
       format: 'PNG',
     });
diff --git a/apps/demos/Demos/Charts/FullStackedBar/React/App.tsx b/apps/demos/Demos/Charts/FullStackedBar/React/App.tsx
index a7710f5267de..d156bbc1f154 100644
--- a/apps/demos/Demos/Charts/FullStackedBar/React/App.tsx
+++ b/apps/demos/Demos/Charts/FullStackedBar/React/App.tsx
@@ -1,12 +1,19 @@
 import React from 'react';
 import {
-  Chart, Series, CommonSeriesSettings, Legend, Export, Tooltip, Title,
+  Chart,
+  Series,
+  CommonSeriesSettings,
+  Legend,
+  Export,
+  Tooltip,
+  Title,
 } from 'devextreme-react/chart';
+import type { ChartTypes } from 'devextreme-react/chart';
 import service from './data.ts';
 
 const dataSource = service.dataSource();
 
-function customizeTooltip(arg: { percentText: string; valueText: string; }) {
+function customizeTooltip(arg: ChartTypes.StackedPointInfo): Record<string, string> {
   return {
     text: `${arg.percentText} years: ${arg.valueText}`,
   };
diff --git a/apps/demos/Demos/Charts/LegendMarkersCustomization/React/App.tsx b/apps/demos/Demos/Charts/LegendMarkersCustomization/React/App.tsx
index d55cf8a70b0e..868a17c5a262 100644
--- a/apps/demos/Demos/Charts/LegendMarkersCustomization/React/App.tsx
+++ b/apps/demos/Demos/Charts/LegendMarkersCustomization/React/App.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
 
 import {
-  Chart, type ChartTypes, Series, CommonSeriesSettings, Point, Legend,
+  Chart,
+  Series,
+  CommonSeriesSettings,
+  Point,
+  Legend,
 } from 'devextreme-react/chart';
+import type { ChartTypes } from 'devextreme-react/chart';
 import { dataSource } from './data.ts';
 import markerTemplate from './MarkerTemplate.tsx';
 
-function onLegendClick(e: ChartTypes.LegendClickEvent) {
+function onLegendClick(e: ChartTypes.LegendClickEvent): void {
   e.target.isVisible() ? e.target.hide() : e.target.show();
 }
 
diff --git a/apps/demos/Demos/Charts/LegendMarkersCustomization/React/MarkerTemplate.tsx b/apps/demos/Demos/Charts/LegendMarkersCustomization/React/MarkerTemplate.tsx
index fa91cd4b30ac..bb0a9fe01eaa 100644
--- a/apps/demos/Demos/Charts/LegendMarkersCustomization/React/MarkerTemplate.tsx
+++ b/apps/demos/Demos/Charts/LegendMarkersCustomization/React/MarkerTemplate.tsx
@@ -5,12 +5,22 @@ const markerPath = {
   'Noisy Signal': 'M 18 8 L 12 12 L 7 3 L 0 7.4 L 0 10 L 6 6 L 11 15 L 18 10.6 Z',
 };
 
-export default function MarkerTemplate(item) {
+interface MarkerTemplateProps {
+  series: {
+    isVisible: () => boolean;
+    name: string;
+  };
+  marker: {
+    fill: string;
+  };
+}
+
+export default function MarkerTemplate(item: MarkerTemplateProps) {
   const color = item.series.isVisible() ? item.marker.fill : '#888';
   return (
     <svg>
       <rect x={0} y={0} width={18} height={18} fill={color} opacity={0.3}></rect>
-      <path d={markerPath[item.series.name]} fill={color}></path>
+      <path d={markerPath[item.series.name as keyof typeof markerPath]} fill={color}></path>
     </svg>
   );
 }
diff --git a/apps/demos/Demos/Charts/Line/React/App.tsx b/apps/demos/Demos/Charts/Line/React/App.tsx
index 6c0c52373bf2..df23498b9124 100644
--- a/apps/demos/Demos/Charts/Line/React/App.tsx
+++ b/apps/demos/Demos/Charts/Line/React/App.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
+import SelectBox from 'devextreme-react/select-box';
+import type { SelectBoxTypes } from 'devextreme-react/select-box';
 import {
   Chart,
   Series,
@@ -20,7 +21,7 @@ import service from './data.ts';
 const countriesInfo = service.getCountriesInfo();
 const energySources = service.getEnergySources();
 
-const types: (ChartPropsType['commonSeriesSettings']['type'])[] = ['line', 'stackedline', 'fullstackedline'];
+const types: (NonNullable<ChartPropsType['commonSeriesSettings']>['type'])[] = ['line', 'stackedline', 'fullstackedline'];
 const seriesTypeLabel = { 'aria-label': 'Series Type' };
 
 function App() {
diff --git a/apps/demos/Demos/Charts/Line/ReactJs/App.js b/apps/demos/Demos/Charts/Line/ReactJs/App.js
index 2be1e03c11e1..69c95833be75 100644
--- a/apps/demos/Demos/Charts/Line/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/Line/ReactJs/App.js
@@ -25,7 +25,7 @@ function App() {
     setType(e.value);
   }, []);
   return (
-    <React.Fragment>
+    <>
       <Chart
         palette="Violet"
         dataSource={countriesInfo}
@@ -71,7 +71,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/LoadDataOnDemand/React/App.tsx b/apps/demos/Demos/Charts/LoadDataOnDemand/React/App.tsx
index ea00f40b195d..666befcfe774 100644
--- a/apps/demos/Demos/Charts/LoadDataOnDemand/React/App.tsx
+++ b/apps/demos/Demos/Charts/LoadDataOnDemand/React/App.tsx
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { DataSource } from 'devextreme-react/common/data';
 import {
   Chart,
-  type ChartTypes,
   ZoomAndPan,
   ScrollBar,
   ArgumentAxis,
@@ -15,6 +14,10 @@ import {
   Animation,
   LoadingIndicator,
 } from 'devextreme-react/chart';
+import type { ChartTypes, ChartRef } from 'devextreme-react/chart';
+import type { VisualRange } from 'devextreme/common/charts';
+
+type ChartType = ReturnType<ChartRef['instance']>;
 
 const HALFDAY = 43200000;
 let packetsLock = 0;
@@ -36,7 +39,7 @@ function App() {
     endValue: new Date(2017, 3, 15),
   });
 
-  const handleChange = (e: ChartTypes.OptionChangedEvent) => {
+  const handleChange = (e: ChartTypes.OptionChangedEvent): void => {
     if (e.fullName === 'argumentAxis.visualRange') {
       const stateStart = visualRange.startValue;
       const currentStart = e.value.startValue;
@@ -87,11 +90,11 @@ function App() {
   );
 }
 
-const uploadDataByVisualRange = (visualRange, component) => {
+const uploadDataByVisualRange = (visualRange: VisualRange, component: ChartType): void => {
   const dataSource = component.getDataSource();
   const ajaxArgs = {
-    startVisible: getDateString(visualRange.startValue),
-    endVisible: getDateString(visualRange.endValue),
+    startVisible: getDateString(visualRange.startValue as Date),
+    endVisible: getDateString(visualRange.endValue as Date),
   };
 
   if (!packetsLock) {
@@ -105,12 +108,12 @@ const uploadDataByVisualRange = (visualRange, component) => {
         const componentStorage = dataSource.store();
 
         dataFrame
-          .map((i) => ({
+          .map((i: any) => ({
             date: new Date(i.Date),
             minTemp: i.MinTemp,
             maxTemp: i.MaxTemp,
           }))
-          .forEach((item) => componentStorage.insert(item));
+          .forEach((item: any) => componentStorage.insert(item));
 
         dataSource.reload();
 
@@ -123,18 +126,18 @@ const uploadDataByVisualRange = (visualRange, component) => {
   }
 };
 
-const onVisualRangeChanged = (visualRange, component) => {
+const onVisualRangeChanged = (visualRange: VisualRange, component: ChartType): void => {
   const items = component.getDataSource().items();
   if (
     !items.length
-    || items[0].date - visualRange.startValue.getTime() >= HALFDAY
-    || visualRange.endValue.getTime() - items[items.length - 1].date >= HALFDAY
+    || items[0].date - (visualRange.startValue as Date)?.getTime() >= HALFDAY
+    || (visualRange.endValue as Date)?.getTime() - items[items.length - 1].date >= HALFDAY
   ) {
     uploadDataByVisualRange(visualRange, component);
   }
 };
 
-function getDataFrame(args) {
+function getDataFrame(args: { startVisible: string; endVisible: string }) {
   let params = '?';
 
   params += `startVisible=${args.startVisible}
@@ -145,7 +148,7 @@ function getDataFrame(args) {
   ).then((response) => response.json());
 }
 
-function getDateString(dateTime) {
+function getDateString(dateTime?: Date): string {
   return dateTime ? dateTime.toLocaleDateString('en-US') : '';
 }
 
diff --git a/apps/demos/Demos/Charts/LoadDataOnDemand/ReactJs/App.js b/apps/demos/Demos/Charts/LoadDataOnDemand/ReactJs/App.js
index 75aa89f9ac4d..fd429ae81c1a 100644
--- a/apps/demos/Demos/Charts/LoadDataOnDemand/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/LoadDataOnDemand/ReactJs/App.js
@@ -116,8 +116,8 @@ const onVisualRangeChanged = (visualRange, component) => {
   const items = component.getDataSource().items();
   if (
     !items.length ||
-    items[0].date - visualRange.startValue.getTime() >= HALFDAY ||
-    visualRange.endValue.getTime() - items[items.length - 1].date >= HALFDAY
+    items[0].date - visualRange.startValue?.getTime() >= HALFDAY ||
+    visualRange.endValue?.getTime() - items[items.length - 1].date >= HALFDAY
   ) {
     uploadDataByVisualRange(visualRange, component);
   }
diff --git a/apps/demos/Demos/Charts/LogarithmicAxis/React/App.tsx b/apps/demos/Demos/Charts/LogarithmicAxis/React/App.tsx
index 555024501696..60c8aa0e5c4b 100644
--- a/apps/demos/Demos/Charts/LogarithmicAxis/React/App.tsx
+++ b/apps/demos/Demos/Charts/LogarithmicAxis/React/App.tsx
@@ -13,9 +13,10 @@ import {
   Label,
   Export,
 } from 'devextreme-react/chart';
+import type { SeriesPoint } from 'devextreme/common/charts';
 import { dataSource } from './data.ts';
 
-function customizePoint({ data }) {
+function customizePoint({ data }: { data: { type: string } }): SeriesPoint {
   let color;
   let hoverStyle;
   switch (data.type) {
diff --git a/apps/demos/Demos/Charts/MultipleAxes/React/App.tsx b/apps/demos/Demos/Charts/MultipleAxes/React/App.tsx
index 454710c7dcc0..7bcda94850e3 100644
--- a/apps/demos/Demos/Charts/MultipleAxes/React/App.tsx
+++ b/apps/demos/Demos/Charts/MultipleAxes/React/App.tsx
@@ -10,18 +10,23 @@ import Chart, {
   Grid,
   Format,
 } from 'devextreme-react/chart';
+import type { ChartTypes } from 'devextreme-react/chart';
 import { continentSources, populationData } from './data.ts';
 
-const customizeTooltip = (pointInfo) => {
-  const items = pointInfo.valueText.split('\n');
-  const color = pointInfo.point.getColor();
+const customizeTooltip = (pointInfo: ChartTypes.CommonPointInfo): Record<string, string> => {
+  const items = pointInfo.valueText?.split('\n');
+  const color = pointInfo.point?.getColor();
 
-  items.forEach((item, index) => {
-    if (item.indexOf(pointInfo.seriesName) === 0) {
+  if (!items) {
+    return { text: '' };
+  }
+
+  items.forEach((item: string, index: number): void => {
+    if (item.startsWith(pointInfo.seriesName)) {
       const element = document.createElement('span');
 
       element.textContent = item;
-      element.style.color = color;
+      element.style.color = color ?? '';
       element.className = 'active';
 
       items[index] = element.outerHTML;
diff --git a/apps/demos/Demos/Charts/MultipleAxes/ReactJs/App.js b/apps/demos/Demos/Charts/MultipleAxes/ReactJs/App.js
index bdf455803c6e..84b1a3f34498 100644
--- a/apps/demos/Demos/Charts/MultipleAxes/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/MultipleAxes/ReactJs/App.js
@@ -13,13 +13,16 @@ import Chart, {
 import { continentSources, populationData } from './data.js';
 
 const customizeTooltip = (pointInfo) => {
-  const items = pointInfo.valueText.split('\n');
-  const color = pointInfo.point.getColor();
+  const items = pointInfo.valueText?.split('\n');
+  const color = pointInfo.point?.getColor();
+  if (!items) {
+    return { text: '' };
+  }
   items.forEach((item, index) => {
-    if (item.indexOf(pointInfo.seriesName) === 0) {
+    if (item.startsWith(pointInfo.seriesName)) {
       const element = document.createElement('span');
       element.textContent = item;
-      element.style.color = color;
+      element.style.color = color ?? '';
       element.className = 'active';
       items[index] = element.outerHTML;
     }
diff --git a/apps/demos/Demos/Charts/MultiplePanes/React/App.tsx b/apps/demos/Demos/Charts/MultiplePanes/React/App.tsx
index 738fabf1c958..e23039a96ca6 100644
--- a/apps/demos/Demos/Charts/MultiplePanes/React/App.tsx
+++ b/apps/demos/Demos/Charts/MultiplePanes/React/App.tsx
@@ -12,11 +12,11 @@ import Chart, {
 } from 'devextreme-react/chart';
 import { weatherData } from './data.ts';
 
-function temperatureCustomizeText({ valueText }) {
+function temperatureCustomizeText({ valueText }: { valueText: string }): string {
   return `${valueText} °C`;
 }
 
-function precipitationCustomizeText({ valueText }) {
+function precipitationCustomizeText({ valueText }: { valueText: string }): string {
   return `${valueText} mm`;
 }
 
diff --git a/apps/demos/Demos/Charts/MultiplePointSelection/React/App.tsx b/apps/demos/Demos/Charts/MultiplePointSelection/React/App.tsx
index 2f59d15948f0..7054000a2757 100644
--- a/apps/demos/Demos/Charts/MultiplePointSelection/React/App.tsx
+++ b/apps/demos/Demos/Charts/MultiplePointSelection/React/App.tsx
@@ -7,13 +7,14 @@ import Chart, {
   Legend,
   Export,
 } from 'devextreme-react/chart';
+import type { ChartTypes } from 'devextreme-react/chart';
 import { medalSources, medalStatistics } from './data.ts';
 
-function onPointClick({ target: point }) {
-  if (point.isSelected()) {
-    point.clearSelection();
+function onPointClick(e: ChartTypes.PointClickEvent): void {
+  if (e.target.isSelected()) {
+    e.target.clearSelection();
   } else {
-    point.select();
+    e.target.select();
   }
 }
 
diff --git a/apps/demos/Demos/Charts/MultiplePointSelection/ReactJs/App.js b/apps/demos/Demos/Charts/MultiplePointSelection/ReactJs/App.js
index 30876a98d574..b7a61f62576b 100644
--- a/apps/demos/Demos/Charts/MultiplePointSelection/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/MultiplePointSelection/ReactJs/App.js
@@ -9,11 +9,11 @@ import Chart, {
 } from 'devextreme-react/chart';
 import { medalSources, medalStatistics } from './data.js';
 
-function onPointClick({ target: point }) {
-  if (point.isSelected()) {
-    point.clearSelection();
+function onPointClick(e) {
+  if (e.target.isSelected()) {
+    e.target.clearSelection();
   } else {
-    point.select();
+    e.target.select();
   }
 }
 function App() {
diff --git a/apps/demos/Demos/Charts/MultipleSeriesSelection/React/App.tsx b/apps/demos/Demos/Charts/MultipleSeriesSelection/React/App.tsx
index 7e6266991e0f..d4b1b9aa6049 100644
--- a/apps/demos/Demos/Charts/MultipleSeriesSelection/React/App.tsx
+++ b/apps/demos/Demos/Charts/MultipleSeriesSelection/React/App.tsx
@@ -10,13 +10,14 @@ import Chart, {
   Legend,
   Export,
 } from 'devextreme-react/chart';
+import type { ChartTypes } from 'devextreme-react/chart';
 import { versionSources, statisticsData } from './data.ts';
 
-function onSeriesClick({ target: series }) {
-  if (series.isSelected()) {
-    series.clearSelection();
+function onSeriesClick(e: ChartTypes.SeriesClickEvent): void {
+  if (e.target.isSelected()) {
+    e.target.clearSelection();
   } else {
-    series.select();
+    e.target.select();
   }
 }
 
diff --git a/apps/demos/Demos/Charts/MultipleSeriesSelection/ReactJs/App.js b/apps/demos/Demos/Charts/MultipleSeriesSelection/ReactJs/App.js
index c69b0fe86e6f..3bddff9924a5 100644
--- a/apps/demos/Demos/Charts/MultipleSeriesSelection/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/MultipleSeriesSelection/ReactJs/App.js
@@ -12,11 +12,11 @@ import Chart, {
 } from 'devextreme-react/chart';
 import { versionSources, statisticsData } from './data.js';
 
-function onSeriesClick({ target: series }) {
-  if (series.isSelected()) {
-    series.clearSelection();
+function onSeriesClick(e) {
+  if (e.target.isSelected()) {
+    e.target.clearSelection();
   } else {
-    series.select();
+    e.target.select();
   }
 }
 function App() {
diff --git a/apps/demos/Demos/Charts/Overview/React/App.tsx b/apps/demos/Demos/Charts/Overview/React/App.tsx
index ee0aeb103af9..f1d3f930df6a 100644
--- a/apps/demos/Demos/Charts/Overview/React/App.tsx
+++ b/apps/demos/Demos/Charts/Overview/React/App.tsx
@@ -9,6 +9,7 @@ import Chart, {
   ConstantLine,
   Label,
 } from 'devextreme-react/chart';
+import type { ChartTypes } from 'devextreme-react/chart';
 import { complaintsData } from './data.ts';
 
 const data = complaintsData.sort((a, b) => b.count - a.count);
@@ -24,21 +25,21 @@ const dataArray = data.map((item) => {
   };
 });
 
-const customizeTooltip = (pointInfo) => ({
+const customizeTooltip = (pointInfo: ChartTypes.CommonPointInfo): Record<string, string> => ({
   html: `<div><div class="tooltip-header">${
     pointInfo.argumentText
   }</div><div class="tooltip-body"><div class="series-name"><span class='top-series-name'>${
-    pointInfo.points[0].seriesName
+    pointInfo.points?.[0]?.seriesName
   }</span>: </div><div class="value-text"><span class='top-series-value'>${
-    pointInfo.points[0].valueText
+    pointInfo.points?.[0]?.valueText
   }</span></div><div class="series-name"><span class='bottom-series-name'>${
-    pointInfo.points[1].seriesName
+    pointInfo.points?.[1]?.seriesName
   }</span>: </div><div class="value-text"><span class='bottom-series-value'>${
-    pointInfo.points[1].valueText
+    pointInfo.points?.[1]?.valueText
   }</span>% </div></div></div>`,
 });
 
-function customizePercentageText({ valueText }) {
+function customizePercentageText({ valueText }: { valueText: string }): string {
   return `${valueText}%`;
 }
 
diff --git a/apps/demos/Demos/Charts/Overview/ReactJs/App.js b/apps/demos/Demos/Charts/Overview/ReactJs/App.js
index ada1fad3f6af..85ce09ac246c 100644
--- a/apps/demos/Demos/Charts/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/Overview/ReactJs/App.js
@@ -23,7 +23,7 @@ const dataArray = data.map((item) => {
   };
 });
 const customizeTooltip = (pointInfo) => ({
-  html: `<div><div class="tooltip-header">${pointInfo.argumentText}</div><div class="tooltip-body"><div class="series-name"><span class='top-series-name'>${pointInfo.points[0].seriesName}</span>: </div><div class="value-text"><span class='top-series-value'>${pointInfo.points[0].valueText}</span></div><div class="series-name"><span class='bottom-series-name'>${pointInfo.points[1].seriesName}</span>: </div><div class="value-text"><span class='bottom-series-value'>${pointInfo.points[1].valueText}</span>% </div></div></div>`,
+  html: `<div><div class="tooltip-header">${pointInfo.argumentText}</div><div class="tooltip-body"><div class="series-name"><span class='top-series-name'>${pointInfo.points?.[0]?.seriesName}</span>: </div><div class="value-text"><span class='top-series-value'>${pointInfo.points?.[0]?.valueText}</span></div><div class="series-name"><span class='bottom-series-name'>${pointInfo.points?.[1]?.seriesName}</span>: </div><div class="value-text"><span class='bottom-series-value'>${pointInfo.points?.[1]?.valueText}</span>% </div></div></div>`,
 });
 function customizePercentageText({ valueText }) {
   return `${valueText}%`;
diff --git a/apps/demos/Demos/Charts/Palette/React/App.tsx b/apps/demos/Demos/Charts/Palette/React/App.tsx
index ac4c7d073d22..6642b120c69f 100644
--- a/apps/demos/Demos/Charts/Palette/React/App.tsx
+++ b/apps/demos/Demos/Charts/Palette/React/App.tsx
@@ -3,26 +3,31 @@ import PieChart, {
   Series,
   Legend,
 } from 'devextreme-react/pie-chart';
-import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
+import SelectBox from 'devextreme-react/select-box';
+import type { SelectBoxTypes } from 'devextreme-react/select-box';
 import { getPalette } from 'devextreme/viz/palette';
 import {
-  paletteCollection, paletteExtensionModes, dataSource, paletteLabel, paletteExtensionLabel,
+  paletteCollection,
+  paletteExtensionModes,
+  dataSource,
+  paletteLabel,
+  paletteExtensionLabel,
 } from './data.ts';
 
 function App() {
   const [palette, setPalette] = useState(paletteCollection[0]);
   const [extensionMode, setExtensionMode] = useState(paletteExtensionModes[1]);
 
-  const handlePaletteChange = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
+  const handlePaletteChange = useCallback((e: SelectBoxTypes.ValueChangedEvent): void => {
     setPalette(e.value);
-  }, [setPalette]);
+  }, []);
 
-  const handleExtensionModeChange = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
+  const handleExtensionModeChange = useCallback((e: SelectBoxTypes.ValueChangedEvent): void => {
     setExtensionMode(e.value);
-  }, [setExtensionMode]);
+  }, []);
 
   return (
-    <React.Fragment>
+    <>
       <div className="flex-container">
         <PieChart
           id="pie"
@@ -35,7 +40,7 @@ function App() {
         </PieChart>
 
         <div className="palette-container flex-block">
-          {getPalette(palette).simpleSet.map((color) => (
+          {getPalette(palette).simpleSet.map((color: string) => (
             <div
               className="palette-item"
               style={{ backgroundColor: color }}
@@ -68,7 +73,7 @@ function App() {
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/Palette/ReactJs/App.js b/apps/demos/Demos/Charts/Palette/ReactJs/App.js
index 7540643e8e53..34db2fc64167 100644
--- a/apps/demos/Demos/Charts/Palette/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/Palette/ReactJs/App.js
@@ -13,20 +13,14 @@ import {
 function App() {
   const [palette, setPalette] = useState(paletteCollection[0]);
   const [extensionMode, setExtensionMode] = useState(paletteExtensionModes[1]);
-  const handlePaletteChange = useCallback(
-    (e) => {
-      setPalette(e.value);
-    },
-    [setPalette],
-  );
-  const handleExtensionModeChange = useCallback(
-    (e) => {
-      setExtensionMode(e.value);
-    },
-    [setExtensionMode],
-  );
+  const handlePaletteChange = useCallback((e) => {
+    setPalette(e.value);
+  }, []);
+  const handleExtensionModeChange = useCallback((e) => {
+    setExtensionMode(e.value);
+  }, []);
   return (
-    <React.Fragment>
+    <>
       <div className="flex-container">
         <PieChart
           id="pie"
@@ -72,7 +66,7 @@ function App() {
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/ParetoChart/React/App.tsx b/apps/demos/Demos/Charts/ParetoChart/React/App.tsx
index 5482fdf79818..56680466304d 100644
--- a/apps/demos/Demos/Charts/ParetoChart/React/App.tsx
+++ b/apps/demos/Demos/Charts/ParetoChart/React/App.tsx
@@ -9,6 +9,7 @@ import Chart, {
   ConstantLine,
   Label,
 } from 'devextreme-react/chart';
+import type { ChartTypes } from 'devextreme-react/chart';
 import { complaintsData } from './data.ts';
 
 const data = complaintsData.sort((a, b) => b.count - a.count);
@@ -23,23 +24,23 @@ const dataArray = data.map((item) => {
   };
 });
 
-function customizeTooltip(pointInfo) {
+function customizeTooltip(pointInfo: ChartTypes.CommonPointInfo): Record<string, string> {
   return {
     html: `<div><div class="tooltip-header">${
       pointInfo.argumentText
     }</div><div class="tooltip-body"><div class="series-name"><span class='top-series-name'>${
-      pointInfo.points[0].seriesName
+      pointInfo.points?.[0]?.seriesName
     }</span>: </div><div class="value-text"><span class='top-series-value'>${
-      pointInfo.points[0].valueText
+      pointInfo.points?.[0]?.valueText
     }</span></div><div class="series-name"><span class='bottom-series-name'>${
-      pointInfo.points[1].seriesName
+      pointInfo.points?.[1]?.seriesName
     }</span>: </div><div class="value-text"><span class='bottom-series-value'>${
-      pointInfo.points[1].valueText
+      pointInfo.points?.[1]?.valueText
     }</span>% </div></div></div>`,
   };
 }
 
-function customizePercentageText({ valueText }) {
+function customizePercentageText({ valueText }: { valueText: string }): string {
   return `${valueText}%`;
 }
 
diff --git a/apps/demos/Demos/Charts/ParetoChart/ReactJs/App.js b/apps/demos/Demos/Charts/ParetoChart/ReactJs/App.js
index 29317dee7f21..33ac8d33d040 100644
--- a/apps/demos/Demos/Charts/ParetoChart/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/ParetoChart/ReactJs/App.js
@@ -24,7 +24,7 @@ const dataArray = data.map((item) => {
 });
 function customizeTooltip(pointInfo) {
   return {
-    html: `<div><div class="tooltip-header">${pointInfo.argumentText}</div><div class="tooltip-body"><div class="series-name"><span class='top-series-name'>${pointInfo.points[0].seriesName}</span>: </div><div class="value-text"><span class='top-series-value'>${pointInfo.points[0].valueText}</span></div><div class="series-name"><span class='bottom-series-name'>${pointInfo.points[1].seriesName}</span>: </div><div class="value-text"><span class='bottom-series-value'>${pointInfo.points[1].valueText}</span>% </div></div></div>`,
+    html: `<div><div class="tooltip-header">${pointInfo.argumentText}</div><div class="tooltip-body"><div class="series-name"><span class='top-series-name'>${pointInfo.points?.[0]?.seriesName}</span>: </div><div class="value-text"><span class='top-series-value'>${pointInfo.points?.[0]?.valueText}</span></div><div class="series-name"><span class='bottom-series-name'>${pointInfo.points?.[1]?.seriesName}</span>: </div><div class="value-text"><span class='bottom-series-value'>${pointInfo.points?.[1]?.valueText}</span>% </div></div></div>`,
   };
 }
 function customizePercentageText({ valueText }) {
diff --git a/apps/demos/Demos/Charts/Pie/React/App.tsx b/apps/demos/Demos/Charts/Pie/React/App.tsx
index 3058a3ed8def..62ebf56ab521 100644
--- a/apps/demos/Demos/Charts/Pie/React/App.tsx
+++ b/apps/demos/Demos/Charts/Pie/React/App.tsx
@@ -5,21 +5,22 @@ import PieChart, {
   Connector,
   Size,
   Export,
-  type PieChartTypes,
 } from 'devextreme-react/pie-chart';
+import type { PieChartTypes } from 'devextreme-react/pie-chart';
+import type { piePointObject } from 'devextreme/viz/pie_chart';
 import { areas } from './data.ts';
 
-function pointClickHandler(e: PieChartTypes.PointClickEvent) {
+function pointClickHandler(e: PieChartTypes.PointClickEvent): void {
   toggleVisibility(e.target);
 }
 
-function legendClickHandler(e: PieChartTypes.LegendClickEvent) {
+function legendClickHandler(e: PieChartTypes.LegendClickEvent): void {
   const arg = e.target;
   const item = e.component.getAllSeries()[0].getPointsByArg(arg)[0];
-  toggleVisibility(item);
+  toggleVisibility(item as piePointObject);
 }
 
-function toggleVisibility(item) {
+function toggleVisibility(item: piePointObject): void {
   item.isVisible() ? item.hide() : item.show();
 }
 
diff --git a/apps/demos/Demos/Charts/PieAnnotations/React/App.tsx b/apps/demos/Demos/Charts/PieAnnotations/React/App.tsx
index 027eae9bcd2b..ea0a6bf843d1 100644
--- a/apps/demos/Demos/Charts/PieAnnotations/React/App.tsx
+++ b/apps/demos/Demos/Charts/PieAnnotations/React/App.tsx
@@ -12,6 +12,7 @@ import PieChart, {
   Legend,
 } from 'devextreme-react/pie-chart';
 import { dataSource, getAnnotationSources } from './data.ts';
+import type { AnnotationSource } from './types.ts';
 import TooltipTemplate from './TooltipTemplate.tsx';
 
 const annotationSources = getAnnotationSources();
@@ -38,7 +39,7 @@ function App() {
         <Border color="transparent" />
       </CommonAnnotationSettings>
       {
-        annotationSources.map((item) => (
+        annotationSources.map((item: AnnotationSource) => (
           <Annotation
             key={item.country}
             argument={item.country}
diff --git a/apps/demos/Demos/Charts/PieAnnotations/React/data.ts b/apps/demos/Demos/Charts/PieAnnotations/React/data.ts
index 3410f4a6bc96..d2f4d3d22729 100644
--- a/apps/demos/Demos/Charts/PieAnnotations/React/data.ts
+++ b/apps/demos/Demos/Charts/PieAnnotations/React/data.ts
@@ -1,4 +1,6 @@
-const annotationSources = [{
+import type { AnnotationSource, DataSourceItem } from './types.ts';
+
+const annotationSources: AnnotationSource[] = [{
   country: 'Russia',
   offsetX: 15,
   offsetY: 5,
@@ -41,7 +43,7 @@ const edgeAnnotationSettings = {
   shadowOpacity: 0.3,
 };
 
-export const dataSource = [{
+export const dataSource: DataSourceItem[] = [{
   country: 'Russia',
   oldCountryName: 'Soviet Union',
   gold: 27,
@@ -85,13 +87,13 @@ export const dataSource = [{
   bronze: 1,
 }];
 
-export function getAnnotationSources() {
-  const annotations = [];
+export function getAnnotationSources(): AnnotationSource[] {
+  const annotations: AnnotationSource[] = [];
   for (let i = 0; i < annotationSources.length; i += 1) {
     const annotation = annotationSources[i];
     const { country } = annotation;
     const image = `../../../../images/flags/3x2/${country.replace(/\s/, '')}.svg`;
-    const data = { ...dataSource.filter((d) => (d.country === country))[0] };
+    const data = { ...dataSource.filter((d: DataSourceItem): boolean => (d.country === country))[0] };
 
     annotations.push({
       ...annotation,
diff --git a/apps/demos/Demos/Charts/PieAnnotations/React/types.ts b/apps/demos/Demos/Charts/PieAnnotations/React/types.ts
new file mode 100644
index 000000000000..778c1e114aa4
--- /dev/null
+++ b/apps/demos/Demos/Charts/PieAnnotations/React/types.ts
@@ -0,0 +1,21 @@
+import type { PieChartAnnotationLocation } from 'devextreme/viz/pie_chart';
+
+export type AnnotationSource = {
+  country: string;
+  location?: PieChartAnnotationLocation;
+  offsetX?: number;
+  offsetY?: number;
+  image?: string;
+  data?: DataSourceItem;
+  color?: string;
+  borderColor?: string;
+  shadowOpacity?: number;
+};
+
+export type DataSourceItem = {
+  country: string;
+  oldCountryName?: string;
+  gold: number;
+  silver: number;
+  bronze: number;
+};
diff --git a/apps/demos/Demos/Charts/PieWithMultipleSeries/React/App.tsx b/apps/demos/Demos/Charts/PieWithMultipleSeries/React/App.tsx
index 7dd791ec8136..16c08b17a832 100644
--- a/apps/demos/Demos/Charts/PieWithMultipleSeries/React/App.tsx
+++ b/apps/demos/Demos/Charts/PieWithMultipleSeries/React/App.tsx
@@ -9,10 +9,11 @@ import PieChart, {
   Tooltip,
   Subtitle,
 } from 'devextreme-react/pie-chart';
+import type { PieChartTypes } from 'devextreme-react/pie-chart';
 import { exportImportData } from './data.ts';
 
-function customizeTooltip(arg: { argumentText: string; seriesName: string; valueText: string; }) {
-  return { text: `${arg.argumentText}<br>${arg.seriesName}: ${arg.valueText}B` };
+function customizeTooltip(arg: PieChartTypes.PointInfo): Record<string, string> {
+  return { text: `${arg?.argumentText}<br>${arg.seriesName}: ${arg.valueText}B` };
 }
 
 function App() {
diff --git a/apps/demos/Demos/Charts/PieWithMultipleSeries/ReactJs/App.js b/apps/demos/Demos/Charts/PieWithMultipleSeries/ReactJs/App.js
index 7e2d3c01b578..fdee4361d789 100644
--- a/apps/demos/Demos/Charts/PieWithMultipleSeries/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/PieWithMultipleSeries/ReactJs/App.js
@@ -12,7 +12,7 @@ import PieChart, {
 import { exportImportData } from './data.js';
 
 function customizeTooltip(arg) {
-  return { text: `${arg.argumentText}<br>${arg.seriesName}: ${arg.valueText}B` };
+  return { text: `${arg?.argumentText}<br>${arg.seriesName}: ${arg.valueText}B` };
 }
 function App() {
   return (
diff --git a/apps/demos/Demos/Charts/PointImage/React/App.tsx b/apps/demos/Demos/Charts/PointImage/React/App.tsx
index 204ca412405c..657dca04ff53 100644
--- a/apps/demos/Demos/Charts/PointImage/React/App.tsx
+++ b/apps/demos/Demos/Charts/PointImage/React/App.tsx
@@ -17,7 +17,7 @@ import { iceHockeyStatistics } from './data.ts';
 
 const exportFormats: IExportProps['formats'] = ['PNG', 'PDF', 'JPEG', 'GIF', 'SVG'];
 
-function customizePoint(e: { value: number; }) {
+function customizePoint(e: { value: number; }): Record<string, unknown> {
   if (e.value === 1) {
     return { image: { url: '../../../../images/Charts/PointImage/icon-medal-gold.png', width: 20, height: 20 }, visible: true };
   }
@@ -27,10 +27,10 @@ function customizePoint(e: { value: number; }) {
   if (e.value === 3) {
     return { image: { url: '../../../../images/Charts/PointImage/icon-medal-bronse.png', width: 20, height: 20 }, visible: true };
   }
-  return null;
+  return {};
 }
 
-function customizeText(e: { valueText: string; }) {
+function customizeText(e: { valueText: string; }): string {
   if (e.valueText === '1') {
     return `${e.valueText}st place`;
   } if (e.valueText === '2') {
diff --git a/apps/demos/Demos/Charts/PointImage/ReactJs/App.js b/apps/demos/Demos/Charts/PointImage/ReactJs/App.js
index 028bd120b77b..b577eeab2b64 100644
--- a/apps/demos/Demos/Charts/PointImage/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/PointImage/ReactJs/App.js
@@ -46,7 +46,7 @@ function customizePoint(e) {
       visible: true,
     };
   }
-  return null;
+  return {};
 }
 function customizeText(e) {
   if (e.valueText === '1') {
diff --git a/apps/demos/Demos/Charts/PointsAggregation/React/App.tsx b/apps/demos/Demos/Charts/PointsAggregation/React/App.tsx
index cec5997c17b3..9f0ef31f4a38 100644
--- a/apps/demos/Demos/Charts/PointsAggregation/React/App.tsx
+++ b/apps/demos/Demos/Charts/PointsAggregation/React/App.tsx
@@ -12,37 +12,62 @@ import Chart, {
   Label,
   Tooltip,
 } from 'devextreme-react/chart';
-import type { IAggregationProps } from 'devextreme-react/chart';
+import type { ChartTypes, IAggregationProps } from 'devextreme-react/chart';
 import CheckBox from 'devextreme-react/check-box';
 import SelectBox from 'devextreme-react/select-box';
 import {
-  weatherData, aggregationFunctions, aggregationIntervals, functionLabel, intervalLabel,
+  weatherData,
+  aggregationFunctions,
+  aggregationIntervals,
+  functionLabel,
+  intervalLabel,
 } from './data.ts';
 
-const customizeTooltip = (pointInfo) => {
-  const { aggregationInfo } = pointInfo.point;
-  const start: Date = aggregationInfo?.intervalStart;
-  const end: Date = aggregationInfo?.intervalEnd;
+const customizeTooltip = (pointInfo: ChartTypes.PointInfo): Record<string, string> => {
   const handlers = {
-    'Average temperature': (arg: { argument: Date; value: number; }) => ({
-      text: `${(!aggregationInfo
-        ? `Date: ${arg.argument.toDateString()}`
-        : `Interval: ${start.toDateString()} - ${end.toDateString()}`)
-      }<br/>Temperature: ${arg.value.toFixed(2)} °C`,
-    }),
-    'Temperature range': (arg: { rangeValue1: number; rangeValue2: number; }) => ({
-      text: `Interval: ${start.toDateString()
-      } - ${end.toDateString()
-      }<br/>Temperature range: ${arg.rangeValue1
-      } - ${arg.rangeValue2} °C`,
-    }),
-    Precipitation: (arg: { argument: Date; valueText: string; }) => ({
-      text: `Date: ${arg.argument.toDateString()
-      }<br/>Precipitation: ${arg.valueText} mm`,
-    }),
+    'Average temperature': (info: ChartTypes.PointInfo): Record<string, string> => {
+      const { aggregationInfo } = info.point ?? {};
+      const arg = info.argument;
+
+      if (!(arg instanceof Date)
+        || !('value' in info)
+        || typeof info.value !== 'number') {
+        return { text: '' };
+      }
+
+      return {
+        text: `${(!aggregationInfo
+          ? `Date: ${arg.toDateString()}`
+          : `Interval: ${aggregationInfo.intervalStart.toDateString()} - ${aggregationInfo.intervalEnd.toDateString()}`)
+        }<br/>Temperature: ${(info.value).toFixed(2)} °C`,
+      };
+    },
+    'Temperature range': (info: ChartTypes.PointInfo): Record<string, string> => {
+      const { aggregationInfo } = info.point ?? {};
+
+      if (!('rangeValue1' in info)) {
+        return { text: '' };
+      }
+
+      return {
+        text: `Interval: ${aggregationInfo?.intervalStart.toDateString()} - ${aggregationInfo?.intervalEnd.toDateString()}
+               <br/>Temperature range: ${info.rangeValue1} - ${info.rangeValue2} °C`,
+      };
+    },
+    Precipitation: (info: ChartTypes.PointInfo): Record<string, string> => {
+      const arg = info.argument;
+
+      if (!(arg instanceof Date)) {
+        return { text: '' };
+      }
+
+      return {
+        text: `Date: ${arg.toDateString()}<br/>Precipitation: ${info.valueText} mm`,
+      };
+    },
   };
 
-  return handlers[pointInfo.seriesName](pointInfo);
+  return handlers[pointInfo.seriesName as keyof typeof handlers](pointInfo);
 };
 
 function App() {
@@ -50,21 +75,21 @@ function App() {
   const [currentFunction, setCurrentFunction] = useState(aggregationFunctions[0].func);
   const [currentInterval, setCurrentInterval] = useState(aggregationIntervals[0].interval);
 
-  const updateAggregationUsage = useCallback(({ value }) => {
+  const updateAggregationUsage = useCallback(({ value }): void => {
     setUseAggregation(value);
-  }, [setUseAggregation]);
+  }, []);
 
-  const updateInterval = useCallback(({ value }) => {
+  const updateInterval = useCallback(({ value }): void => {
     setCurrentInterval(value);
-  }, [setCurrentInterval]);
+  }, []);
 
-  const updateMethod = useCallback(({ value }) => {
+  const updateMethod = useCallback(({ value }): void => {
     setCurrentFunction(value);
-  }, [setCurrentFunction]);
+  }, []);
 
-  const calculateRangeArea = useCallback<IAggregationProps['calculate']>((aggregationInfo) => {
-    if (!aggregationInfo.data.length) {
-      return null;
+  const calculateRangeArea = useCallback<NonNullable<IAggregationProps['calculate']>>((aggregationInfo) => {
+    if (!aggregationInfo.data?.length) {
+      return {};
     }
 
     const temp = aggregationInfo.data.map((item: { temp: number; }) => item.temp);
diff --git a/apps/demos/Demos/Charts/PointsAggregation/ReactJs/App.js b/apps/demos/Demos/Charts/PointsAggregation/ReactJs/App.js
index 67fb18af510a..877e107a2859 100644
--- a/apps/demos/Demos/Charts/PointsAggregation/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/PointsAggregation/ReactJs/App.js
@@ -23,25 +23,40 @@ import {
 } from './data.js';
 
 const customizeTooltip = (pointInfo) => {
-  const { aggregationInfo } = pointInfo.point;
-  const start = aggregationInfo?.intervalStart;
-  const end = aggregationInfo?.intervalEnd;
   const handlers = {
-    'Average temperature': (arg) => ({
-      text: `${
-        !aggregationInfo
-          ? `Date: ${arg.argument.toDateString()}`
-          : `Interval: ${start.toDateString()} - ${end.toDateString()}`
-      }<br/>Temperature: ${arg.value.toFixed(2)} °C`,
-    }),
-    'Temperature range': (arg) => ({
-      text: `Interval: ${start.toDateString()} - ${end.toDateString()}<br/>Temperature range: ${
-        arg.rangeValue1
-      } - ${arg.rangeValue2} °C`,
-    }),
-    Precipitation: (arg) => ({
-      text: `Date: ${arg.argument.toDateString()}<br/>Precipitation: ${arg.valueText} mm`,
-    }),
+    'Average temperature': (info) => {
+      const { aggregationInfo } = info.point ?? {};
+      const arg = info.argument;
+      if (!(arg instanceof Date) || !('value' in info) || typeof info.value !== 'number') {
+        return { text: '' };
+      }
+      return {
+        text: `${
+          !aggregationInfo
+            ? `Date: ${arg.toDateString()}`
+            : `Interval: ${aggregationInfo.intervalStart.toDateString()} - ${aggregationInfo.intervalEnd.toDateString()}`
+        }<br/>Temperature: ${info.value.toFixed(2)} °C`,
+      };
+    },
+    'Temperature range': (info) => {
+      const { aggregationInfo } = info.point ?? {};
+      if (!('rangeValue1' in info)) {
+        return { text: '' };
+      }
+      return {
+        text: `Interval: ${aggregationInfo?.intervalStart.toDateString()} - ${aggregationInfo?.intervalEnd.toDateString()}
+               <br/>Temperature range: ${info.rangeValue1} - ${info.rangeValue2} °C`,
+      };
+    },
+    Precipitation: (info) => {
+      const arg = info.argument;
+      if (!(arg instanceof Date)) {
+        return { text: '' };
+      }
+      return {
+        text: `Date: ${arg.toDateString()}<br/>Precipitation: ${info.valueText} mm`,
+      };
+    },
   };
   return handlers[pointInfo.seriesName](pointInfo);
 };
@@ -49,27 +64,18 @@ function App() {
   const [useAggregation, setUseAggregation] = useState(true);
   const [currentFunction, setCurrentFunction] = useState(aggregationFunctions[0].func);
   const [currentInterval, setCurrentInterval] = useState(aggregationIntervals[0].interval);
-  const updateAggregationUsage = useCallback(
-    ({ value }) => {
-      setUseAggregation(value);
-    },
-    [setUseAggregation],
-  );
-  const updateInterval = useCallback(
-    ({ value }) => {
-      setCurrentInterval(value);
-    },
-    [setCurrentInterval],
-  );
-  const updateMethod = useCallback(
-    ({ value }) => {
-      setCurrentFunction(value);
-    },
-    [setCurrentFunction],
-  );
+  const updateAggregationUsage = useCallback(({ value }) => {
+    setUseAggregation(value);
+  }, []);
+  const updateInterval = useCallback(({ value }) => {
+    setCurrentInterval(value);
+  }, []);
+  const updateMethod = useCallback(({ value }) => {
+    setCurrentFunction(value);
+  }, []);
   const calculateRangeArea = useCallback((aggregationInfo) => {
-    if (!aggregationInfo.data.length) {
-      return null;
+    if (!aggregationInfo.data?.length) {
+      return {};
     }
     const temp = aggregationInfo.data.map((item) => item.temp);
     return {
diff --git a/apps/demos/Demos/Charts/RangeArea/React/App.tsx b/apps/demos/Demos/Charts/RangeArea/React/App.tsx
index 57e0ecec9667..1dd876d351a5 100644
--- a/apps/demos/Demos/Charts/RangeArea/React/App.tsx
+++ b/apps/demos/Demos/Charts/RangeArea/React/App.tsx
@@ -12,7 +12,7 @@ import Chart, {
 } from 'devextreme-react/chart';
 import { inflationData } from './data.ts';
 
-function customizeLabelText({ valueText }) {
+function customizeLabelText({ valueText }: { valueText: string }): string {
   return `${valueText} %`;
 }
 
diff --git a/apps/demos/Demos/Charts/Selection/React/App.tsx b/apps/demos/Demos/Charts/Selection/React/App.tsx
index c8c337851d00..64069c8e8d31 100644
--- a/apps/demos/Demos/Charts/Selection/React/App.tsx
+++ b/apps/demos/Demos/Charts/Selection/React/App.tsx
@@ -8,17 +8,18 @@ import Chart, {
   Legend,
   Export,
 } from 'devextreme-react/chart';
+import type { ChartTypes } from 'devextreme-react/chart';
 import { exportData } from './data.ts';
 
-function onPointClick({ target: point }) {
-  point.select();
+function onPointClick(e: ChartTypes.PointClickEvent): void {
+  e.target.select();
 }
 
-function onLegendClick({ target: series }) {
-  if (series.isVisible()) {
-    series.hide();
+function onLegendClick(e: ChartTypes.LegendClickEvent): void {
+  if (e.target.isVisible()) {
+    e.target.hide();
   } else {
-    series.show();
+    e.target.show();
   }
 }
 
diff --git a/apps/demos/Demos/Charts/Selection/ReactJs/App.js b/apps/demos/Demos/Charts/Selection/ReactJs/App.js
index fe78cfe38b6c..cf81822785b3 100644
--- a/apps/demos/Demos/Charts/Selection/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/Selection/ReactJs/App.js
@@ -10,14 +10,14 @@ import Chart, {
 } from 'devextreme-react/chart';
 import { exportData } from './data.js';
 
-function onPointClick({ target: point }) {
-  point.select();
+function onPointClick(e) {
+  e.target.select();
 }
-function onLegendClick({ target: series }) {
-  if (series.isVisible()) {
-    series.hide();
+function onLegendClick(e) {
+  if (e.target.isVisible()) {
+    e.target.hide();
   } else {
-    series.show();
+    e.target.show();
   }
 }
 function App() {
diff --git a/apps/demos/Demos/Charts/ServerSideDataProcessing/React/App.tsx b/apps/demos/Demos/Charts/ServerSideDataProcessing/React/App.tsx
index a465ae628811..70cbe0744714 100644
--- a/apps/demos/Demos/Charts/ServerSideDataProcessing/React/App.tsx
+++ b/apps/demos/Demos/Charts/ServerSideDataProcessing/React/App.tsx
@@ -15,7 +15,9 @@ import Chart, {
   Export,
   LoadingIndicator,
 } from 'devextreme-react/chart';
-import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
+import type { ChartTypes } from 'devextreme-react/chart';
+import SelectBox from 'devextreme-react/select-box';
+import type { SelectBoxTypes } from 'devextreme-react/select-box';
 import { months, monthLabel } from './data.ts';
 
 const year = 2017;
@@ -47,7 +49,7 @@ const chartDataSource = new DataSource({
         if (!r.ok) throw new Error(`Network response fails: ${r.status}`);
         return r.json();
       })
-      .then((arr) => arr.map((item) => ({
+      .then((arr) => arr.map((item: { MinTemp: number, MaxTemp: number, Date: string }) => ({
         ...item,
         Temperature: (item.MinTemp + item.MaxTemp) / 2,
         Date: new Date(item.Date),
@@ -56,22 +58,22 @@ const chartDataSource = new DataSource({
   paginate: false,
 });
 
-function onValueChanged(data: SelectBoxTypes.ValueChangedEvent) {
+function onValueChanged(data: SelectBoxTypes.ValueChangedEvent): void {
   selectedMonth = data.value;
   chartDataSource.load();
 }
 
-function customizeLabel(e: { valueText: string; }) {
+function customizeLabel(e: { valueText: string; }): string {
   return `${e.valueText}${'&#176C'}`;
 }
 
-function customizeArgumentAxisLabel(e: { value: string | number | Date, valueText: string; }) {
+function customizeArgumentAxisLabel(e: { value: string | number | Date, valueText: string; }): string {
   return new Date(e.value).getDate().toString();
 }
 
-function customizeTooltip(arg: { valueText: string; }) {
+function customizeTooltip({ valueText }: ChartTypes.PointInfo): Record<string, string> {
   return {
-    text: `${arg.valueText}${'&#176C'}`,
+    text: `${valueText}${'&#176C'}`,
   };
 }
 
diff --git a/apps/demos/Demos/Charts/ServerSideDataProcessing/ReactJs/App.js b/apps/demos/Demos/Charts/ServerSideDataProcessing/ReactJs/App.js
index 86cc6153cba4..e370f55b14c8 100644
--- a/apps/demos/Demos/Charts/ServerSideDataProcessing/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/ServerSideDataProcessing/ReactJs/App.js
@@ -62,9 +62,9 @@ function customizeLabel(e) {
 function customizeArgumentAxisLabel(e) {
   return new Date(e.value).getDate().toString();
 }
-function customizeTooltip(arg) {
+function customizeTooltip({ valueText }) {
   return {
-    text: `${arg.valueText}${'&#176C'}`,
+    text: `${valueText}${'&#176C'}`,
   };
 }
 function App() {
diff --git a/apps/demos/Demos/Charts/SideBySideStackedBar/React/App.tsx b/apps/demos/Demos/Charts/SideBySideStackedBar/React/App.tsx
index 6eb89d33b75a..e161eabb0a5f 100644
--- a/apps/demos/Demos/Charts/SideBySideStackedBar/React/App.tsx
+++ b/apps/demos/Demos/Charts/SideBySideStackedBar/React/App.tsx
@@ -1,16 +1,25 @@
 import React from 'react';
 import {
-  Chart, Series, CommonSeriesSettings, Legend, ValueAxis, Title, Export, Tooltip, Border,
+  Chart,
+  Series,
+  CommonSeriesSettings,
+  Legend,
+  ValueAxis,
+  Title,
+  Export,
+  Tooltip,
+  Border,
 } from 'devextreme-react/chart';
-import service from './data.ts';
+import type { LegendItem as LegendItemBase } from 'devextreme/common/charts';
+import { maleAgeData } from './data.ts';
 
-const dataSource = service.getMaleAgeData();
+type LegendItem = LegendItemBase & { series?: { stack?: string } };
 
-function customizeItems(items) {
-  const sortedItems = [];
+function customizeItems(items: LegendItem[]): LegendItem[] {
+  const sortedItems: LegendItem[] = [];
 
-  items.forEach((item) => {
-    const startIndex = item.series.stack === 'male' ? 0 : 3;
+  items.forEach((item: LegendItem): void => {
+    const startIndex = item.series?.stack === 'male' ? 0 : 3;
     sortedItems.splice(startIndex, 0, item);
   });
   return sortedItems;
@@ -21,7 +30,7 @@ function App() {
     <Chart
       id="chart"
       title="Population: Age Structure"
-      dataSource={dataSource}
+      dataSource={maleAgeData}
     >
       <CommonSeriesSettings argumentField="state" type="stackedbar" />
       <Series
diff --git a/apps/demos/Demos/Charts/SideBySideStackedBar/React/data.ts b/apps/demos/Demos/Charts/SideBySideStackedBar/React/data.ts
index cdf5faf79e8e..34e22cc19088 100644
--- a/apps/demos/Demos/Charts/SideBySideStackedBar/React/data.ts
+++ b/apps/demos/Demos/Charts/SideBySideStackedBar/React/data.ts
@@ -1,4 +1,6 @@
-const maleAgeData = [{
+import type { MaleAgeData } from './types.ts';
+
+export const maleAgeData: MaleAgeData[] = [{
   state: 'USA',
   maleyoung: 29.956,
   malemiddle: 90.354,
@@ -55,9 +57,3 @@ const maleAgeData = [{
   femalemiddle: 19.228,
   femaleolder: 5.459,
 }];
-
-export default {
-  getMaleAgeData() {
-    return maleAgeData;
-  },
-};
diff --git a/apps/demos/Demos/Charts/SideBySideStackedBar/React/types.ts b/apps/demos/Demos/Charts/SideBySideStackedBar/React/types.ts
new file mode 100644
index 000000000000..c977fe8d8ba3
--- /dev/null
+++ b/apps/demos/Demos/Charts/SideBySideStackedBar/React/types.ts
@@ -0,0 +1,9 @@
+export type MaleAgeData = {
+  state: string;
+  maleyoung: number;
+  malemiddle: number;
+  maleolder: number;
+  femaleyoung: number;
+  femalemiddle: number;
+  femaleolder: number;
+};
diff --git a/apps/demos/Demos/Charts/SideBySideStackedBar/ReactJs/App.js b/apps/demos/Demos/Charts/SideBySideStackedBar/ReactJs/App.js
index 2fc21d2b31dd..b07d8c14de37 100644
--- a/apps/demos/Demos/Charts/SideBySideStackedBar/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/SideBySideStackedBar/ReactJs/App.js
@@ -10,13 +10,12 @@ import {
   Tooltip,
   Border,
 } from 'devextreme-react/chart';
-import service from './data.js';
+import { maleAgeData } from './data.js';
 
-const dataSource = service.getMaleAgeData();
 function customizeItems(items) {
   const sortedItems = [];
   items.forEach((item) => {
-    const startIndex = item.series.stack === 'male' ? 0 : 3;
+    const startIndex = item.series?.stack === 'male' ? 0 : 3;
     sortedItems.splice(startIndex, 0, item);
   });
   return sortedItems;
@@ -26,7 +25,7 @@ function App() {
     <Chart
       id="chart"
       title="Population: Age Structure"
-      dataSource={dataSource}
+      dataSource={maleAgeData}
     >
       <CommonSeriesSettings
         argumentField="state"
diff --git a/apps/demos/Demos/Charts/SideBySideStackedBar/ReactJs/data.js b/apps/demos/Demos/Charts/SideBySideStackedBar/ReactJs/data.js
index 23cf38f51af5..7bc79ae502df 100644
--- a/apps/demos/Demos/Charts/SideBySideStackedBar/ReactJs/data.js
+++ b/apps/demos/Demos/Charts/SideBySideStackedBar/ReactJs/data.js
@@ -1,4 +1,4 @@
-const maleAgeData = [
+export const maleAgeData = [
   {
     state: 'USA',
     maleyoung: 29.956,
@@ -63,8 +63,3 @@ const maleAgeData = [
     femaleolder: 5.459,
   },
 ];
-export default {
-  getMaleAgeData() {
-    return maleAgeData;
-  },
-};
diff --git a/apps/demos/Demos/Charts/SignalRService/React/App.tsx b/apps/demos/Demos/Charts/SignalRService/React/App.tsx
index 5bd8f81fb64d..764f45e86b63 100644
--- a/apps/demos/Demos/Charts/SignalRService/React/App.tsx
+++ b/apps/demos/Demos/Charts/SignalRService/React/App.tsx
@@ -1,5 +1,8 @@
 import React, {
-  useCallback, useEffect, useRef, useState,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
 } from 'react';
 import Chart, {
   ArgumentAxis,
@@ -16,7 +19,8 @@ import Chart, {
   Margin,
   HorizontalLine,
 } from 'devextreme-react/chart';
-import type { IAggregationProps } from 'devextreme-react/chart';
+import type { SeriesPoint } from 'devextreme/common/charts';
+import type { ChartRef, IAggregationProps } from 'devextreme-react/chart';
 import type { VisualRange } from 'devextreme-react/common/charts';
 import { CustomStore } from 'devextreme-react/common/data';
 import { HubConnectionBuilder, HttpTransportType } from '@aspnet/signalr';
@@ -26,22 +30,22 @@ const minVisualRangeLength = { minutes: 10 };
 const defaultVisualRange: VisualRange = { length: 'hour' };
 
 function App() {
-  const [dataSource, setDataSource] = useState(null);
-  const chartRef = useRef(null);
+  const [dataSource, setDataSource] = useState<CustomStore | null>(null);
+  const chartRef = useRef<ChartRef>(null);
 
-  const customizePoint = useCallback((arg) => {
+  const customizePoint = useCallback((arg): SeriesPoint => {
     if (arg.seriesName === 'Volume') {
-      const point = chartRef.current.instance().getAllSeries()[0]
+      const point = chartRef.current?.instance().getAllSeries()[0]
         .getPointsByArg(arg.argument)[0].data;
       if (point && point.close >= point.open) {
         return { color: '#1db2f5' };
       }
     }
-    return null;
+    return {};
   }, []);
 
-  const calculateCandle = useCallback<IAggregationProps['calculate']>((e) => {
-    const prices = e.data.map((d) => d.price);
+  const calculateCandle = useCallback<NonNullable<IAggregationProps['calculate']>>((e): Record<string, unknown> => {
+    const prices = e.data?.map((d) => d.price) ?? [];
     if (prices.length) {
       return {
         date: new Date((e.intervalStart.valueOf() + e.intervalEnd.valueOf()) / 2),
@@ -51,7 +55,7 @@ function App() {
         close: prices[prices.length - 1],
       };
     }
-    return null;
+    return {};
   }, []);
 
   useEffect(() => {
diff --git a/apps/demos/Demos/Charts/SignalRService/React/TooltipTemplate.tsx b/apps/demos/Demos/Charts/SignalRService/React/TooltipTemplate.tsx
index 0f1ad729713a..48165e5ac1a4 100644
--- a/apps/demos/Demos/Charts/SignalRService/React/TooltipTemplate.tsx
+++ b/apps/demos/Demos/Charts/SignalRService/React/TooltipTemplate.tsx
@@ -7,9 +7,9 @@ const formatNumber = new Intl.NumberFormat('en-US', {
   minimumFractionDigits: 0,
 }).format;
 
-export default function TooltipTemplate(pointInfo) {
-  const volume = pointInfo.points.filter((point: { seriesName: string; }) => point.seriesName === 'Volume')[0];
-  const prices = pointInfo.points.filter((point: { seriesName: string; }) => point.seriesName !== 'Volume')[0];
+export default function TooltipTemplate(pointInfo: any) {
+  const volume = pointInfo.points.filter((point: { seriesName: string; }): boolean => point.seriesName === 'Volume')[0];
+  const prices = pointInfo.points.filter((point: { seriesName: string; }): boolean => point.seriesName !== 'Volume')[0];
 
   return (
     <div className="tooltip-template">
diff --git a/apps/demos/Demos/Charts/SignalRService/ReactJs/App.js b/apps/demos/Demos/Charts/SignalRService/ReactJs/App.js
index ec6e821fe337..b2e2196f8d90 100644
--- a/apps/demos/Demos/Charts/SignalRService/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/SignalRService/ReactJs/App.js
@@ -28,17 +28,17 @@ function App() {
   const customizePoint = useCallback((arg) => {
     if (arg.seriesName === 'Volume') {
       const point = chartRef.current
-        .instance()
+        ?.instance()
         .getAllSeries()[0]
         .getPointsByArg(arg.argument)[0].data;
       if (point && point.close >= point.open) {
         return { color: '#1db2f5' };
       }
     }
-    return null;
+    return {};
   }, []);
   const calculateCandle = useCallback((e) => {
-    const prices = e.data.map((d) => d.price);
+    const prices = e.data?.map((d) => d.price) ?? [];
     if (prices.length) {
       return {
         date: new Date((e.intervalStart.valueOf() + e.intervalEnd.valueOf()) / 2),
@@ -48,7 +48,7 @@ function App() {
         close: prices[prices.length - 1],
       };
     }
-    return null;
+    return {};
   }, []);
   useEffect(() => {
     const hubConnection = new HubConnectionBuilder()
diff --git a/apps/demos/Demos/Charts/StackedBar/React/App.tsx b/apps/demos/Demos/Charts/StackedBar/React/App.tsx
index fffd3b6ef421..94c079919982 100644
--- a/apps/demos/Demos/Charts/StackedBar/React/App.tsx
+++ b/apps/demos/Demos/Charts/StackedBar/React/App.tsx
@@ -1,12 +1,20 @@
 import React from 'react';
 import {
-  Chart, Series, CommonSeriesSettings, Legend, ValueAxis, Title, Export, Tooltip,
+  Chart,
+  Series,
+  CommonSeriesSettings,
+  Legend,
+  ValueAxis,
+  Title,
+  Export,
+  Tooltip,
 } from 'devextreme-react/chart';
+import type { ChartTypes } from 'devextreme-react/chart';
 import service from './data.ts';
 
 const dataSource = service.getMaleAgeData();
 
-function customizeTooltip(arg: { seriesName: string; valueText: string; }) {
+function customizeTooltip(arg: ChartTypes.PointInfo): Record<string, string> {
   return {
     text: `${arg.seriesName} years: ${arg.valueText}`,
   };
diff --git a/apps/demos/Demos/Charts/Stock/React/App.tsx b/apps/demos/Demos/Charts/Stock/React/App.tsx
index fce87b33fcca..fa73f5c3571e 100644
--- a/apps/demos/Demos/Charts/Stock/React/App.tsx
+++ b/apps/demos/Demos/Charts/Stock/React/App.tsx
@@ -11,14 +11,19 @@ import Chart, {
   Export,
   Tooltip,
 } from 'devextreme-react/chart';
+import type { ChartTypes } from 'devextreme-react/chart';
 import { dataSource } from './data.ts';
 
-function customizeTooltip(arg: { openValue: number, closeValue: number, highValue: number, lowValue: number }) {
+function customizeTooltip(arg: ChartTypes.PointInfo): Record<string, string> {
+  if (!('openValue' in arg)) {
+    return { text: '' };
+  }
+
   return {
     text: `Open: $${arg.openValue}<br/>
-Close: $${arg.closeValue}<br/>
-High: $${arg.highValue}<br/>
-Low: $${arg.lowValue}<br/>`,
+    Close: $${arg.closeValue}<br/>
+    High: $${arg.highValue}<br/>
+    Low: $${arg.lowValue}<br/>`,
   };
 }
 
diff --git a/apps/demos/Demos/Charts/Stock/ReactJs/App.js b/apps/demos/Demos/Charts/Stock/ReactJs/App.js
index be096e15483e..24cf604fc115 100644
--- a/apps/demos/Demos/Charts/Stock/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/Stock/ReactJs/App.js
@@ -14,11 +14,14 @@ import Chart, {
 import { dataSource } from './data.js';
 
 function customizeTooltip(arg) {
+  if (!('openValue' in arg)) {
+    return { text: '' };
+  }
   return {
     text: `Open: $${arg.openValue}<br/>
-Close: $${arg.closeValue}<br/>
-High: $${arg.highValue}<br/>
-Low: $${arg.lowValue}<br/>`,
+    Close: $${arg.closeValue}<br/>
+    High: $${arg.highValue}<br/>
+    Low: $${arg.lowValue}<br/>`,
   };
 }
 function App() {
diff --git a/apps/demos/Demos/Charts/Strips/React/App.tsx b/apps/demos/Demos/Charts/Strips/React/App.tsx
index 7f47a5fb4d5b..e0d9aea87573 100644
--- a/apps/demos/Demos/Charts/Strips/React/App.tsx
+++ b/apps/demos/Demos/Charts/Strips/React/App.tsx
@@ -10,29 +10,30 @@ import {
   Font,
   Export,
 } from 'devextreme-react/chart';
+import type { SeriesPoint, SeriesLabel } from 'devextreme/common/charts';
 import { temperaturesData, lowAverage, highAverage } from './data.ts';
 
 const highAverageColor = '#ff9b52';
 const lowAverageColor = '#6199e6';
 
-function customizePoint(arg: { value: number; }) {
+function customizePoint(arg: { value: number; }): SeriesPoint {
   if (arg.value > highAverage) {
     return { color: highAverageColor };
   }
   if (arg.value < lowAverage) {
     return { color: lowAverageColor };
   }
-  return null;
+  return {};
 }
 
-function customizeLabel(arg: { value: number; }) {
+function customizeLabel(arg: { value: number; }): SeriesLabel {
   if (arg.value > highAverage) {
     return getLabelsSettings(highAverageColor);
   }
   if (arg.value < lowAverage) {
     return getLabelsSettings(lowAverageColor);
   }
-  return null;
+  return {};
 }
 
 function getLabelsSettings(backgroundColor: string) {
@@ -43,7 +44,7 @@ function getLabelsSettings(backgroundColor: string) {
   };
 }
 
-function customizeText(arg: { valueText: string; }) {
+function customizeText(arg: { valueText: string; }): string {
   return `${arg.valueText}&#176F`;
 }
 
diff --git a/apps/demos/Demos/Charts/Strips/ReactJs/App.js b/apps/demos/Demos/Charts/Strips/ReactJs/App.js
index 2879fe7bc3a8..2df6c8e12604 100644
--- a/apps/demos/Demos/Charts/Strips/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/Strips/ReactJs/App.js
@@ -21,7 +21,7 @@ function customizePoint(arg) {
   if (arg.value < lowAverage) {
     return { color: lowAverageColor };
   }
-  return null;
+  return {};
 }
 function customizeLabel(arg) {
   if (arg.value > highAverage) {
@@ -30,7 +30,7 @@ function customizeLabel(arg) {
   if (arg.value < lowAverage) {
     return getLabelsSettings(lowAverageColor);
   }
-  return null;
+  return {};
 }
 function getLabelsSettings(backgroundColor) {
   return {
diff --git a/apps/demos/Demos/Charts/TilingAlgorithms/React/App.tsx b/apps/demos/Demos/Charts/TilingAlgorithms/React/App.tsx
index 9306cf7bdadc..214ac7261e7d 100644
--- a/apps/demos/Demos/Charts/TilingAlgorithms/React/App.tsx
+++ b/apps/demos/Demos/Charts/TilingAlgorithms/React/App.tsx
@@ -56,12 +56,16 @@ function App() {
   );
 }
 
-const customAlgorithm: ITreeMapOptions['layoutAlgorithm'] = (arg) => {
-  const totalRect = arg.rect.slice();
-  let totalSum = arg.sum;
+const customAlgorithm: ITreeMapOptions['layoutAlgorithm'] = (arg): void => {
+  const totalRect = arg.rect?.slice();
+  let totalSum = arg.sum ?? 0;
   let side = 0;
 
-  arg.items.forEach((item) => {
+  if (!totalRect || totalSum <= 0) {
+    return;
+  }
+
+  arg.items?.forEach((item): void => {
     const size = Math.round(((totalRect[side + 2] - totalRect[side]) * item.value) / totalSum);
     const rect = totalRect.slice();
 
diff --git a/apps/demos/Demos/Charts/TilingAlgorithms/ReactJs/App.js b/apps/demos/Demos/Charts/TilingAlgorithms/ReactJs/App.js
index 1a6778e71cf9..62022f5eeffb 100644
--- a/apps/demos/Demos/Charts/TilingAlgorithms/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/TilingAlgorithms/ReactJs/App.js
@@ -15,7 +15,7 @@ function App() {
     [setSelectedAlgorithm, setCurrentAlgorithm],
   );
   return (
-    <React.Fragment>
+    <>
       <TreeMap
         id="treemap"
         dataSource={populationByAge}
@@ -45,14 +45,17 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 const customAlgorithm = (arg) => {
-  const totalRect = arg.rect.slice();
-  let totalSum = arg.sum;
+  const totalRect = arg.rect?.slice();
+  let totalSum = arg.sum ?? 0;
   let side = 0;
-  arg.items.forEach((item) => {
+  if (!totalRect || totalSum <= 0) {
+    return;
+  }
+  arg.items?.forEach((item) => {
     const size = Math.round(((totalRect[side + 2] - totalRect[side]) * item.value) / totalSum);
     const rect = totalRect.slice();
     totalSum -= item.value;
diff --git a/apps/demos/Demos/Charts/TooltipAPI/React/App.tsx b/apps/demos/Demos/Charts/TooltipAPI/React/App.tsx
index 6c0c16fb5865..dcea40803b5c 100644
--- a/apps/demos/Demos/Charts/TooltipAPI/React/App.tsx
+++ b/apps/demos/Demos/Charts/TooltipAPI/React/App.tsx
@@ -1,6 +1,9 @@
 import React, { useCallback, useRef, useState } from 'react';
 import PieChart, {
-  Series, Tooltip, Size, Legend,
+  Series,
+  Tooltip,
+  Size,
+  Legend,
 } from 'devextreme-react/pie-chart';
 import type { PieChartTypes, PieChartRef } from 'devextreme-react/pie-chart';
 import { SelectBox } from 'devextreme-react/select-box';
@@ -19,17 +22,17 @@ function App() {
     setSelectedRegion(point.argument);
   }, [setSelectedRegion]);
 
-  const onPointClick = useCallback(({ target: point }: PieChartTypes.PointClickEvent) => {
+  const onPointClick = useCallback(({ target: point }: PieChartTypes.PointClickEvent): void => {
     showTooltip(point);
   }, [showTooltip]);
 
-  const onRegionChanged = useCallback(({ value }) => {
-    const point = pieChartRef.current.instance().getAllSeries()[0].getPointsByArg(value)[0];
+  const onRegionChanged = useCallback(({ value }): void => {
+    const point = pieChartRef.current?.instance().getAllSeries()[0].getPointsByArg(value)[0];
     showTooltip(point);
   }, [showTooltip]);
 
   return (
-    <React.Fragment>
+    <>
       <PieChart
         ref={pieChartRef}
         dataSource={populationData}
@@ -59,7 +62,7 @@ function App() {
           onValueChanged={onRegionChanged}
         />
       </div>
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/apps/demos/Demos/Charts/TooltipAPI/ReactJs/App.js b/apps/demos/Demos/Charts/TooltipAPI/ReactJs/App.js
index 419407b89e52..a3bbd7085df9 100644
--- a/apps/demos/Demos/Charts/TooltipAPI/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/TooltipAPI/ReactJs/App.js
@@ -26,13 +26,13 @@ function App() {
   );
   const onRegionChanged = useCallback(
     ({ value }) => {
-      const point = pieChartRef.current.instance().getAllSeries()[0].getPointsByArg(value)[0];
+      const point = pieChartRef.current?.instance().getAllSeries()[0].getPointsByArg(value)[0];
       showTooltip(point);
     },
     [showTooltip],
   );
   return (
-    <React.Fragment>
+    <>
       <PieChart
         ref={pieChartRef}
         dataSource={populationData}
@@ -62,7 +62,7 @@ function App() {
           onValueChanged={onRegionChanged}
         />
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;
diff --git a/apps/demos/Demos/Charts/TooltipCustomization/React/TooltipTemplate.tsx b/apps/demos/Demos/Charts/TooltipCustomization/React/TooltipTemplate.tsx
index ee6e0ab6a67e..169d7fc61cf1 100644
--- a/apps/demos/Demos/Charts/TooltipCustomization/React/TooltipTemplate.tsx
+++ b/apps/demos/Demos/Charts/TooltipCustomization/React/TooltipTemplate.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import type { PieChartTypes } from 'devextreme-react/pie-chart';
 
-function getImagePath(point: PieChartTypes.PointInfo['point']) {
-  return `../../../../images/flags/${point.data.name.replace(/\s/, '')}.svg`;
+function getImagePath(point: PieChartTypes.PointInfo['point']): string {
+  return `../../../../images/flags/${point?.data.name.replace(/\s/, '')}.svg`;
 }
 
 const formatNumber = new Intl.NumberFormat('en-US', {
@@ -14,13 +14,13 @@ export default function TooltipTemplate(info: PieChartTypes.PointInfo) {
     <div className="state-tooltip">
       <img src={getImagePath(info.point)} /><h4 className="state">{info.argument}</h4>
       <div className="capital">
-        <span className="caption">Capital</span>: {info.point.data.capital}
+        <span className="caption">Capital</span>: {info.point?.data.capital}
       </div>
       <div className="population">
         <span className="caption">Population</span>: {formatNumber(Number(info.value))} people
       </div>
       <div>
-        <span className="caption">Area</span>: <span className="area-km">{formatNumber(info.point.data.area)}</span> km<sup>2</sup> (<span className="area-mi">{formatNumber(0.3861 * info.point.data.area)}</span> mi<sup>2</sup>)
+        <span className="caption">Area</span>: <span className="area-km">{formatNumber(info.point?.data.area)}</span> km<sup>2</sup> (<span className="area-mi">{formatNumber(0.3861 * info.point?.data.area)}</span> mi<sup>2</sup>)
       </div>
     </div>
   );
diff --git a/apps/demos/Demos/Charts/TooltipCustomization/ReactJs/TooltipTemplate.js b/apps/demos/Demos/Charts/TooltipCustomization/ReactJs/TooltipTemplate.js
index bb30ddb79e02..46e2de7509e1 100644
--- a/apps/demos/Demos/Charts/TooltipCustomization/ReactJs/TooltipTemplate.js
+++ b/apps/demos/Demos/Charts/TooltipCustomization/ReactJs/TooltipTemplate.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 function getImagePath(point) {
-  return `../../../../images/flags/${point.data.name.replace(/\s/, '')}.svg`;
+  return `../../../../images/flags/${point?.data.name.replace(/\s/, '')}.svg`;
 }
 const formatNumber = new Intl.NumberFormat('en-US', {
   maximumFractionDigits: 0,
@@ -12,15 +12,15 @@ export default function TooltipTemplate(info) {
       <img src={getImagePath(info.point)} />
       <h4 className="state">{info.argument}</h4>
       <div className="capital">
-        <span className="caption">Capital</span>: {info.point.data.capital}
+        <span className="caption">Capital</span>: {info.point?.data.capital}
       </div>
       <div className="population">
         <span className="caption">Population</span>: {formatNumber(Number(info.value))} people
       </div>
       <div>
         <span className="caption">Area</span>:{' '}
-        <span className="area-km">{formatNumber(info.point.data.area)}</span> km<sup>2</sup> (
-        <span className="area-mi">{formatNumber(0.3861 * info.point.data.area)}</span> mi
+        <span className="area-km">{formatNumber(info.point?.data.area)}</span> km<sup>2</sup> (
+        <span className="area-mi">{formatNumber(0.3861 * info.point?.data.area)}</span> mi
         <sup>2</sup>)
       </div>
     </div>
diff --git a/apps/demos/Demos/Charts/WindRose/React/App.tsx b/apps/demos/Demos/Charts/WindRose/React/App.tsx
index 0a0fac2dca02..ba438d01337f 100644
--- a/apps/demos/Demos/Charts/WindRose/React/App.tsx
+++ b/apps/demos/Demos/Charts/WindRose/React/App.tsx
@@ -9,13 +9,14 @@ import {
   Margin,
   Export,
 } from 'devextreme-react/polar-chart';
+import type { LegendClickEvent } from 'devextreme/viz/polar_chart';
 import { windSources, windRoseData, periodLabel } from './data.ts';
 
-function onLegendClick({ target: series }) {
-  if (series.isVisible()) {
-    series.hide();
+function onLegendClick(e: LegendClickEvent): void {
+  if (e.target.isVisible()) {
+    e.target.hide();
   } else {
-    series.show();
+    e.target.show();
   }
 }
 
diff --git a/apps/demos/Demos/Charts/WindRose/ReactJs/App.js b/apps/demos/Demos/Charts/WindRose/ReactJs/App.js
index 9caabf69f6fe..3e6d96b9318f 100644
--- a/apps/demos/Demos/Charts/WindRose/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/WindRose/ReactJs/App.js
@@ -11,11 +11,11 @@ import {
 } from 'devextreme-react/polar-chart';
 import { windSources, windRoseData, periodLabel } from './data.js';
 
-function onLegendClick({ target: series }) {
-  if (series.isVisible()) {
-    series.hide();
+function onLegendClick(e) {
+  if (e.target.isVisible()) {
+    e.target.hide();
   } else {
-    series.show();
+    e.target.show();
   }
 }
 function App() {
diff --git a/apps/demos/Demos/Common/NavigationOverview/React/App.tsx b/apps/demos/Demos/Common/NavigationOverview/React/App.tsx
index 29d4b8f5c47b..1d59f2645976 100644
--- a/apps/demos/Demos/Common/NavigationOverview/React/App.tsx
+++ b/apps/demos/Demos/Common/NavigationOverview/React/App.tsx
@@ -64,7 +64,7 @@ function App() {
   const [citiesData, setCitiesData] = useState(continents[0].items[0].cities);
 
   const handleTreeViewSelectionChange = useCallback((
-    e: TreeViewTypes.SelectionChangedEvent & { itemData: any },
+    e: TreeViewTypes.ItemSelectionChangedEvent,
   ) => {
     const selectedCountryData = e.itemData;
     if (selectedCountryData.cities) {
@@ -75,9 +75,10 @@ function App() {
   }, []);
 
   const handleTabPanelSelectionChange = useCallback((
-    e: TabPanelTypes.SelectionChangedEvent & { value: any },
+    e: TabPanelTypes.SelectionChangedEvent,
   ) => {
-    setTabPanelIndex(e.value);
+    const index = e.component.option('selectedIndex') ?? 0;
+    setTabPanelIndex(index);
   }, []);
 
   return (
diff --git a/apps/demos/Demos/Common/NavigationOverview/ReactJs/App.js b/apps/demos/Demos/Common/NavigationOverview/ReactJs/App.js
index dc3408a12be6..b8e1db6104b3 100644
--- a/apps/demos/Demos/Common/NavigationOverview/ReactJs/App.js
+++ b/apps/demos/Demos/Common/NavigationOverview/ReactJs/App.js
@@ -56,7 +56,8 @@ function App() {
     }
   }, []);
   const handleTabPanelSelectionChange = useCallback((e) => {
-    setTabPanelIndex(e.value);
+    const index = e.component.option('selectedIndex') ?? 0;
+    setTabPanelIndex(index);
   }, []);
   return (
     <div className="container">
diff --git a/apps/demos/Demos/Form/Grouping/React/App.tsx b/apps/demos/Demos/Form/Grouping/React/App.tsx
index 596f988c3fe4..690bfd7babe0 100644
--- a/apps/demos/Demos/Form/Grouping/React/App.tsx
+++ b/apps/demos/Demos/Form/Grouping/React/App.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
 import 'devextreme-react/text-area';
-import Form, { GroupItem, SimpleItem, Tab, TabbedItem, TabPanelOptions } from 'devextreme-react/form';
+import Form, {
+  GroupItem,
+  SimpleItem,
+  Tab,
+  TabbedItem,
+  TabPanelOptions,
+} from 'devextreme-react/form';
 import GroupCaption from './GroupCaption.tsx';
 import type { GroupCaptionProps } from './GroupCaption.tsx';
 import { employee } from './data.ts';
@@ -8,8 +14,8 @@ import { employee } from './data.ts';
 const groupCaptionNamedRender = (iconName: string) =>
   (data: GroupCaptionProps) => (
     <GroupCaption
-      iconName={iconName}
       {...data}
+      iconName={iconName}
     />
   );
 
diff --git a/apps/demos/Demos/Form/Grouping/ReactJs/App.js b/apps/demos/Demos/Form/Grouping/ReactJs/App.js
index 7722e523ca93..75c0c2aee789 100644
--- a/apps/demos/Demos/Form/Grouping/ReactJs/App.js
+++ b/apps/demos/Demos/Form/Grouping/ReactJs/App.js
@@ -13,8 +13,8 @@ import { employee } from './data.js';
 const groupCaptionNamedRender = (iconName) => (data) =>
   (
     <GroupCaption
-      iconName={iconName}
       {...data}
+      iconName={iconName}
     />
   );
 export default function App() {
diff --git a/apps/demos/Demos/Form/UpdateItemsDynamically/React/App.tsx b/apps/demos/Demos/Form/UpdateItemsDynamically/React/App.tsx
index 7448b717c17c..173b66cb34eb 100644
--- a/apps/demos/Demos/Form/UpdateItemsDynamically/React/App.tsx
+++ b/apps/demos/Demos/Form/UpdateItemsDynamically/React/App.tsx
@@ -14,7 +14,7 @@ import type { Employee } from './types.ts';
 
 const App = () => {
   const [phones, setPhones] = useState<string[]>(employee.Phones);
-  const [isHomeAddressVisible, setIsHomeAddressVisible] = useState<boolean | null | undefined>(true);
+  const [isHomeAddressVisible, setIsHomeAddressVisible] = useState<CheckBoxTypes.Properties['value']>(true);
 
   const formData = useMemo((): Employee => ({ ...employee, Phones: phones }), [phones]);
 
@@ -78,7 +78,7 @@ const App = () => {
             <GroupItem>
               <GroupItem caption="Home Address"
                 name="HomeAddress"
-                visible={isHomeAddressVisible}>
+                visible={!!isHomeAddressVisible}>
                 <SimpleItem dataField="Address" />
                 <SimpleItem dataField="City" />
               </GroupItem>
diff --git a/apps/demos/Demos/Form/UpdateItemsDynamically/ReactJs/App.js b/apps/demos/Demos/Form/UpdateItemsDynamically/ReactJs/App.js
index 9135d5061466..596fa3bb31dd 100644
--- a/apps/demos/Demos/Form/UpdateItemsDynamically/ReactJs/App.js
+++ b/apps/demos/Demos/Form/UpdateItemsDynamically/ReactJs/App.js
@@ -83,7 +83,7 @@ const App = () => {
               <GroupItem
                 caption="Home Address"
                 name="HomeAddress"
-                visible={isHomeAddressVisible}
+                visible={!!isHomeAddressVisible}
               >
                 <SimpleItem dataField="Address" />
                 <SimpleItem dataField="City" />
diff --git a/apps/demos/Demos/Gauges/CircularGauge/React/App.tsx b/apps/demos/Demos/Gauges/CircularGauge/React/App.tsx
index 547b2c7697fb..eb14d167663e 100644
--- a/apps/demos/Demos/Gauges/CircularGauge/React/App.tsx
+++ b/apps/demos/Demos/Gauges/CircularGauge/React/App.tsx
@@ -1,11 +1,18 @@
 import React, { useCallback, useState } from 'react';
 import {
-  CircularGauge, Scale, Label, RangeContainer, Range, Tooltip, Title, Font,
+  CircularGauge,
+  Scale,
+  Label,
+  RangeContainer,
+  Range,
+  Tooltip,
+  Title,
+  Font,
 } from 'devextreme-react/circular-gauge';
 import { SelectBox } from 'devextreme-react/select-box';
 import { dataSource, seasonLabel } from './data.ts';
 
-function customizeText({ valueText }) {
+function customizeText({ valueText }: { valueText: string }): string {
   return `${valueText} °C`;
 }
 
diff --git a/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/React/App.tsx b/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/React/App.tsx
index 760eda5ac881..f2a31a1df893 100644
--- a/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/React/App.tsx
+++ b/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/React/App.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import {
-  LinearGauge, Scale, Label, SubvalueIndicator,
+  LinearGauge,
+  Scale,
+  Label,
+  SubvalueIndicator,
 } from 'devextreme-react/linear-gauge';
 
 const subValues = [18, 43];
 
-function customizeText({ valueText }) {
+function customizeText({ valueText }: { valueText: string }): string {
   return `$${valueText}`;
 }
 
diff --git a/apps/demos/Demos/Gauges/DifferentValueIndicatorTypes/React/App.tsx b/apps/demos/Demos/Gauges/DifferentValueIndicatorTypes/React/App.tsx
index 8d2a9fb29889..99568482bb1a 100644
--- a/apps/demos/Demos/Gauges/DifferentValueIndicatorTypes/React/App.tsx
+++ b/apps/demos/Demos/Gauges/DifferentValueIndicatorTypes/React/App.tsx
@@ -3,7 +3,7 @@ import {
   CircularGauge, ValueIndicator, Scale, Label, Geometry,
 } from 'devextreme-react/circular-gauge';
 
-function customizeText({ valueText }) {
+function customizeText({ valueText }: { valueText: string }): string {
   return `${valueText} %`;
 }
 
diff --git a/apps/demos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/React/App.tsx b/apps/demos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/React/App.tsx
index 1582978d8824..ee748115bc43 100644
--- a/apps/demos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/React/App.tsx
+++ b/apps/demos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/React/App.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import {
-  LinearGauge, Scale, Label, ValueIndicator,
+  LinearGauge,
+  Scale,
+  Label,
+  ValueIndicator,
 } from 'devextreme-react/linear-gauge';
 
-function customizeText({ valueText }) {
+function customizeText({ valueText }: { valueText: string }): string {
   return `${valueText} %`;
 }
 
diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/App.tsx b/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/App.tsx
index b937586a7f46..fd92e1e009fc 100644
--- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/App.tsx
+++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/App.tsx
@@ -1,10 +1,18 @@
 import React from 'react';
 import {
-  CircularGauge, Scale, Title, Font, Margin, MinorTick,
-  Export, RangeContainer, ValueIndicator,
+  CircularGauge,
+  Scale,
+  Title,
+  Font,
+  Margin,
+  MinorTick,
+  Export,
+  RangeContainer,
+  ValueIndicator,
 } from 'devextreme-react/circular-gauge';
+import type { CircularGaugeRef } from 'devextreme-react/circular-gauge';
 
-function CenterTemplate(gauge) {
+function CenterTemplate(gauge: ReturnType<CircularGaugeRef['instance']>) {
   return (
     <svg>
       <rect y="0" x="0" width="200" height="200" fill="transparent"></rect>
diff --git a/apps/demos/Demos/Gauges/GaugeTooltip/React/App.tsx b/apps/demos/Demos/Gauges/GaugeTooltip/React/App.tsx
index 709167ec29f3..ab616b0281c1 100644
--- a/apps/demos/Demos/Gauges/GaugeTooltip/React/App.tsx
+++ b/apps/demos/Demos/Gauges/GaugeTooltip/React/App.tsx
@@ -5,7 +5,7 @@ import {
 
 const subvalues = [8, 18];
 
-function customizeTooltip({ valueText }) {
+function customizeTooltip({ valueText }: { valueText: string }): Record<string, string> {
   return {
     text: `${valueText} ohm`,
   };
diff --git a/apps/demos/Demos/Gauges/LabelsCustomization/React/App.tsx b/apps/demos/Demos/Gauges/LabelsCustomization/React/App.tsx
index c27f9e8515ed..9a094874944f 100644
--- a/apps/demos/Demos/Gauges/LabelsCustomization/React/App.tsx
+++ b/apps/demos/Demos/Gauges/LabelsCustomization/React/App.tsx
@@ -10,7 +10,7 @@ const format = {
   precision: 1,
 };
 
-function customizeText({ valueText }) {
+function customizeText({ valueText }: { valueText: string }): string {
   return `${valueText} %`;
 }
 
diff --git a/apps/demos/Demos/Gauges/Overview/React/App.tsx b/apps/demos/Demos/Gauges/Overview/React/App.tsx
index 751a575dd341..88d96fb11742 100644
--- a/apps/demos/Demos/Gauges/Overview/React/App.tsx
+++ b/apps/demos/Demos/Gauges/Overview/React/App.tsx
@@ -5,6 +5,7 @@ import CircularGauge, {
   Size as CircularSize,
   ValueIndicator as CircularValueIndicator,
 } from 'devextreme-react/circular-gauge';
+import type { CircularGaugeRef } from 'devextreme-react/circular-gauge';
 import LinearGauge, {
   Label,
   MinorTick,
@@ -17,7 +18,7 @@ import Indicator from './Indicator.tsx';
 
 const color = '#f05b41';
 
-function CenterTemplate(gauge) {
+function CenterTemplate(gauge: ReturnType<CircularGaugeRef['instance']>) {
   return (
     <svg>
       <circle cx="100" cy="100" r="55" strokeWidth="2" stroke={color} fill="transparent"></circle>
@@ -29,9 +30,9 @@ function CenterTemplate(gauge) {
 function App() {
   const [speedValue, setSpeedValue] = useState(40);
 
-  const handleSpeedChange = useCallback(({ value }) => {
+  const handleSpeedChange = useCallback(({ value }): void => {
     setSpeedValue(value);
-  }, [setSpeedValue]);
+  }, []);
 
   return (
     <div id="gauge-demo">
diff --git a/apps/demos/Demos/Gauges/Overview/ReactJs/App.js b/apps/demos/Demos/Gauges/Overview/ReactJs/App.js
index 824dc6bd764e..d14f17f90f28 100644
--- a/apps/demos/Demos/Gauges/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/Gauges/Overview/ReactJs/App.js
@@ -43,12 +43,9 @@ function CenterTemplate(gauge) {
 }
 function App() {
   const [speedValue, setSpeedValue] = useState(40);
-  const handleSpeedChange = useCallback(
-    ({ value }) => {
-      setSpeedValue(value);
-    },
-    [setSpeedValue],
-  );
+  const handleSpeedChange = useCallback(({ value }) => {
+    setSpeedValue(value);
+  }, []);
   return (
     <div id="gauge-demo">
       <div id="gauge-container">
diff --git a/apps/demos/Demos/Gauges/RangeBarBaseValue/React/App.tsx b/apps/demos/Demos/Gauges/RangeBarBaseValue/React/App.tsx
index 2d5a0a457157..823d5d1959d3 100644
--- a/apps/demos/Demos/Gauges/RangeBarBaseValue/React/App.tsx
+++ b/apps/demos/Demos/Gauges/RangeBarBaseValue/React/App.tsx
@@ -10,7 +10,7 @@ import {
   ValueIndicator as LinearValueIndicator,
 } from 'devextreme-react/linear-gauge';
 
-function customizeText({ valueText }) {
+function customizeText({ valueText }: { valueText: string }): string {
   return `${valueText}°`;
 }
 
diff --git a/apps/demos/Demos/Gauges/ScaleLabelFormatting/React/App.tsx b/apps/demos/Demos/Gauges/ScaleLabelFormatting/React/App.tsx
index 95db4da8b4ab..e340ed4eef1f 100644
--- a/apps/demos/Demos/Gauges/ScaleLabelFormatting/React/App.tsx
+++ b/apps/demos/Demos/Gauges/ScaleLabelFormatting/React/App.tsx
@@ -3,7 +3,7 @@ import {
   CircularGauge, Scale, Label, RangeContainer, Range, Export, Title, Font,
 } from 'devextreme-react/circular-gauge';
 
-function customizeText({ valueText }) {
+function customizeText({ valueText }: { valueText: string }): string {
   return `${valueText} %`;
 }
 
diff --git a/apps/demos/Demos/Gauges/SubvalueIndicatorTextFormatting/React/App.tsx b/apps/demos/Demos/Gauges/SubvalueIndicatorTextFormatting/React/App.tsx
index c41bbf3de106..fc37f22b1f04 100644
--- a/apps/demos/Demos/Gauges/SubvalueIndicatorTextFormatting/React/App.tsx
+++ b/apps/demos/Demos/Gauges/SubvalueIndicatorTextFormatting/React/App.tsx
@@ -10,7 +10,7 @@ const format = {
   precision: 1,
 };
 
-function customizeText({ valueText }) {
+function customizeText({ valueText }: { valueText: string }): string {
   return `${valueText} °C`;
 }
 
diff --git a/apps/demos/Demos/Gauges/SubvalueIndicatorsRuntimeCustomization/React/App.tsx b/apps/demos/Demos/Gauges/SubvalueIndicatorsRuntimeCustomization/React/App.tsx
index 58e2aece2c97..2c009665efe8 100644
--- a/apps/demos/Demos/Gauges/SubvalueIndicatorsRuntimeCustomization/React/App.tsx
+++ b/apps/demos/Demos/Gauges/SubvalueIndicatorsRuntimeCustomization/React/App.tsx
@@ -5,13 +5,13 @@ import {
 import { SelectBox, type SelectBoxTypes } from 'devextreme-react/select-box';
 import { dataSource, departmentLabel } from './data.ts';
 
-function customizeText({ valueText }) {
+function customizeText({ valueText }: { valueText: string }): string {
   return `${valueText} kW`;
 }
 
-function customizeTooltip(arg: { valueText: string; index?: number; }) {
+function customizeTooltip(arg: { valueText: string; index?: number; }): Record<string, string> {
   let result = `${arg.valueText} kW`;
-  if (arg.index >= 0) {
+  if (typeof arg.index === 'number' && arg.index >= 0) {
     result = `Secondary ${(arg.index + 1)}: ${result}`;
   } else {
     result = `Primary: ${result}`;
diff --git a/apps/demos/Demos/Gauges/SubvalueIndicatorsRuntimeCustomization/ReactJs/App.js b/apps/demos/Demos/Gauges/SubvalueIndicatorsRuntimeCustomization/ReactJs/App.js
index 31869c51a148..63d0415c734c 100644
--- a/apps/demos/Demos/Gauges/SubvalueIndicatorsRuntimeCustomization/ReactJs/App.js
+++ b/apps/demos/Demos/Gauges/SubvalueIndicatorsRuntimeCustomization/ReactJs/App.js
@@ -16,7 +16,7 @@ function customizeText({ valueText }) {
 }
 function customizeTooltip(arg) {
   let result = `${arg.valueText} kW`;
-  if (arg.index >= 0) {
+  if (typeof arg.index === 'number' && arg.index >= 0) {
     result = `Secondary ${arg.index + 1}: ${result}`;
   } else {
     result = `Primary: ${result}`;
diff --git a/apps/demos/Demos/Gauges/Tooltip/React/App.tsx b/apps/demos/Demos/Gauges/Tooltip/React/App.tsx
index 3698c3b14e62..145872662d3b 100644
--- a/apps/demos/Demos/Gauges/Tooltip/React/App.tsx
+++ b/apps/demos/Demos/Gauges/Tooltip/React/App.tsx
@@ -30,8 +30,8 @@ function customizeText(arg: {
   return getText(arg.item, arg.text);
 }
 
-function getText(item: BarItem, text: string) {
-  return `Racer ${(item.index + 1)} - ${text} km/h`;
+function getText(item: BarItem, text: string): string {
+  return `Racer ${item.index !== undefined ? item.index + 1 : ''} - ${text} km/h`;
 }
 
 function App() {
diff --git a/apps/demos/Demos/Gauges/Tooltip/ReactJs/App.js b/apps/demos/Demos/Gauges/Tooltip/ReactJs/App.js
index cc5b10a66ef7..0b979924acd6 100644
--- a/apps/demos/Demos/Gauges/Tooltip/ReactJs/App.js
+++ b/apps/demos/Demos/Gauges/Tooltip/ReactJs/App.js
@@ -13,7 +13,7 @@ function customizeText(arg) {
   return getText(arg.item, arg.text);
 }
 function getText(item, text) {
-  return `Racer ${item.index + 1} - ${text} km/h`;
+  return `Racer ${item.index !== undefined ? item.index + 1 : ''} - ${text} km/h`;
 }
 function App() {
   return (
diff --git a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/React/App.tsx b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/React/App.tsx
index 7336a1608c68..2e667565014a 100644
--- a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/React/App.tsx
+++ b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/React/App.tsx
@@ -1,9 +1,18 @@
 import React, {
-  useCallback, useMemo, useRef, useState,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
 } from 'react';
 import {
-  CircularGauge, Scale, Label, Tooltip, Title, Font,
+  CircularGauge,
+  Scale,
+  Label,
+  Tooltip,
+  Title,
+  Font,
 } from 'devextreme-react/circular-gauge';
+import type { CircularGaugeRef } from 'devextreme-react/circular-gauge';
 import { NumberBox } from 'devextreme-react/number-box';
 import { Button } from 'devextreme-react/button';
 
@@ -11,20 +20,20 @@ const mainGeneratorLabel = { 'aria-label': 'Main Generator' };
 const additionalGeneratorOneLabel = { 'aria-label': 'Additional Generator One' };
 const additionalGeneratorTwoLabel = { 'aria-label': 'Additional Generator Two' };
 
-function customizeText({ valueText }) {
+function customizeText({ valueText }: { valueText: string }): string {
   return `${valueText} kV`;
 }
 
 function App() {
-  const [mainGeneratorValue, setMainGeneratorValue] = useState(34);
-  const [additionalGenerator1Value, setAdditionalGenerator1Value] = useState(12);
-  const [additionalGenerator2Value, setAdditionalGenerator2Value] = useState(23);
-  const gaugeRef = useRef(null);
+  const [mainGeneratorValue, setMainGeneratorValue] = useState<number>(34);
+  const [additionalGenerator1Value, setAdditionalGenerator1Value] = useState<number>(12);
+  const [additionalGenerator2Value, setAdditionalGenerator2Value] = useState<number>(23);
+  const gaugeRef = useRef<CircularGaugeRef>(null);
 
   const updateValues = useCallback(() => {
-    const gauge = gaugeRef.current.instance();
-    gauge.value(mainGeneratorValue);
-    gauge.subvalues([additionalGenerator1Value, additionalGenerator2Value]);
+    const gauge = gaugeRef.current?.instance();
+    gauge?.value(mainGeneratorValue);
+    gauge?.subvalues([additionalGenerator1Value, additionalGenerator2Value]);
   }, [
     gaugeRef,
     mainGeneratorValue,
diff --git a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/ReactJs/App.js b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/ReactJs/App.js
index cd9e1e26f45f..e76d3e53dc4f 100644
--- a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/ReactJs/App.js
+++ b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/ReactJs/App.js
@@ -19,9 +19,9 @@ function App() {
   const [additionalGenerator2Value, setAdditionalGenerator2Value] = useState(23);
   const gaugeRef = useRef(null);
   const updateValues = useCallback(() => {
-    const gauge = gaugeRef.current.instance();
-    gauge.value(mainGeneratorValue);
-    gauge.subvalues([additionalGenerator1Value, additionalGenerator2Value]);
+    const gauge = gaugeRef.current?.instance();
+    gauge?.value(mainGeneratorValue);
+    gauge?.subvalues([additionalGenerator1Value, additionalGenerator2Value]);
   }, [gaugeRef, mainGeneratorValue, additionalGenerator1Value, additionalGenerator2Value]);
   const defaultSubvalues = useMemo(
     () => [additionalGenerator1Value, additionalGenerator2Value],
diff --git a/apps/demos/Demos/Gauges/VariableNumberOfBars/React/App.tsx b/apps/demos/Demos/Gauges/VariableNumberOfBars/React/App.tsx
index 8733f117a320..a9a47fd5a1cc 100644
--- a/apps/demos/Demos/Gauges/VariableNumberOfBars/React/App.tsx
+++ b/apps/demos/Demos/Gauges/VariableNumberOfBars/React/App.tsx
@@ -1,7 +1,9 @@
 import React, { useCallback, useState } from 'react';
 import { BarGauge, Label } from 'devextreme-react/bar-gauge';
-import { CheckBox, type CheckBoxTypes } from 'devextreme-react/check-box';
+import { CheckBox } from 'devextreme-react/check-box';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
 import { products } from './data.ts';
+import type { Product } from './types.ts';
 
 const format = {
   type: 'fixedPoint',
@@ -9,10 +11,10 @@ const format = {
 };
 
 function App() {
-  const [productsActivity, setProductsActivity] = useState(products.map((p) => p.active));
-  const [values, setValues] = useState(products.map((p) => p.count));
+  const [productsActivity, setProductsActivity] = useState<boolean[]>(products.map((p: Product): boolean => p.active));
+  const [values, setValues] = useState<number[]>(products.map((p: Product): number => p.count));
 
-  const getValueChangedHandler = useCallback((productIndex: string | number) => (e: CheckBoxTypes.ValueChangedEvent) => {
+  const getValueChangedHandler = useCallback((productIndex: number) => (e: CheckBoxTypes.ValueChangedEvent): void => {
     const updatedProductsActivity = [...productsActivity];
     updatedProductsActivity[productIndex] = e.value;
     setProductsActivity(updatedProductsActivity);
diff --git a/apps/demos/Demos/Gauges/VariableNumberOfBars/React/data.ts b/apps/demos/Demos/Gauges/VariableNumberOfBars/React/data.ts
index 8b4fcf7d8492..b1daeaa044d0 100644
--- a/apps/demos/Demos/Gauges/VariableNumberOfBars/React/data.ts
+++ b/apps/demos/Demos/Gauges/VariableNumberOfBars/React/data.ts
@@ -1,4 +1,6 @@
-export const products = [{
+import type { Product } from './types.ts';
+
+export const products: Product[] = [{
   name: 'Hammers',
   count: 41,
   active: true,
diff --git a/apps/demos/Demos/Gauges/VariableNumberOfBars/React/types.ts b/apps/demos/Demos/Gauges/VariableNumberOfBars/React/types.ts
new file mode 100644
index 000000000000..1628b1dfb318
--- /dev/null
+++ b/apps/demos/Demos/Gauges/VariableNumberOfBars/React/types.ts
@@ -0,0 +1,5 @@
+export type Product = {
+  name: string;
+  count: number;
+  active: boolean;
+};
diff --git a/apps/demos/Demos/List/Selection/React/App.tsx b/apps/demos/Demos/List/Selection/React/App.tsx
index 78dc178cef11..3fe63ef45116 100644
--- a/apps/demos/Demos/List/Selection/React/App.tsx
+++ b/apps/demos/Demos/List/Selection/React/App.tsx
@@ -46,7 +46,7 @@ export default function App() {
           selectionMode={selectionMode}
           selectAllMode={selectAllMode}
           selectedItemKeys={selectedItemKeys}
-          selectByClick={selectByClick}
+          selectByClick={!!selectByClick}
           onOptionChanged={onSelectedItemKeysChange}>
         </List>
         <div className="selected-data">
diff --git a/apps/demos/Demos/List/Selection/ReactJs/App.js b/apps/demos/Demos/List/Selection/ReactJs/App.js
index 3a390856cc3d..b0dd52ff656a 100644
--- a/apps/demos/Demos/List/Selection/ReactJs/App.js
+++ b/apps/demos/Demos/List/Selection/ReactJs/App.js
@@ -38,7 +38,7 @@ export default function App() {
           selectionMode={selectionMode}
           selectAllMode={selectAllMode}
           selectedItemKeys={selectedItemKeys}
-          selectByClick={selectByClick}
+          selectByClick={!!selectByClick}
           onOptionChanged={onSelectedItemKeysChange}
         ></List>
         <div className="selected-data">
diff --git a/apps/demos/Demos/Menu/Scrolling/React/App.tsx b/apps/demos/Demos/Menu/Scrolling/React/App.tsx
index d1253af7e58a..d38934983782 100644
--- a/apps/demos/Demos/Menu/Scrolling/React/App.tsx
+++ b/apps/demos/Demos/Menu/Scrolling/React/App.tsx
@@ -22,8 +22,11 @@ const App = () => {
     setLimitSubmenuHeight(e.value);
   }, []);
 
-  const onSubmenuShowing = useCallback(({ submenuContainer }: Required<MenuTypes.SubmenuShowingEvent>): void => {
-    submenuContainer.style.maxHeight = limitSubmenuHeight ? `${SUBMENU_HEIGHT}px` : '';
+  const onSubmenuShowing = useCallback((e: MenuTypes.SubmenuShowingEvent<Product>): void => {
+    if (!e.submenuContainer) {
+      return;
+    }
+    e.submenuContainer.style.maxHeight = limitSubmenuHeight ? `${SUBMENU_HEIGHT}px` : '';
   }, [limitSubmenuHeight]);
 
   return (
diff --git a/apps/demos/Demos/Menu/Scrolling/ReactJs/App.js b/apps/demos/Demos/Menu/Scrolling/ReactJs/App.js
index e4425c634087..57c49a3425d7 100644
--- a/apps/demos/Demos/Menu/Scrolling/ReactJs/App.js
+++ b/apps/demos/Demos/Menu/Scrolling/ReactJs/App.js
@@ -16,8 +16,11 @@ const App = () => {
     setLimitSubmenuHeight(e.value);
   }, []);
   const onSubmenuShowing = useCallback(
-    ({ submenuContainer }) => {
-      submenuContainer.style.maxHeight = limitSubmenuHeight ? `${SUBMENU_HEIGHT}px` : '';
+    (e) => {
+      if (!e.submenuContainer) {
+        return;
+      }
+      e.submenuContainer.style.maxHeight = limitSubmenuHeight ? `${SUBMENU_HEIGHT}px` : '';
     },
     [limitSubmenuHeight],
   );
diff --git a/apps/demos/Demos/ScrollView/Overview/React/App.tsx b/apps/demos/Demos/ScrollView/Overview/React/App.tsx
index 4f8a74cbf092..b3e84663e22b 100644
--- a/apps/demos/Demos/ScrollView/Overview/React/App.tsx
+++ b/apps/demos/Demos/ScrollView/Overview/React/App.tsx
@@ -19,7 +19,7 @@ const App = () => {
   const [pullDown, setPullDown] = useState<CheckBoxValue>(false);
   const [scrollByContent, setScrollByContent] = useState<CheckBoxValue>(true);
   const [scrollByThumb, setScrollByThumb] = useState<CheckBoxValue>(true);
-  const [content, setContent] = useState(service.getContent());
+  const [content, setContent] = useState<string>(service.getContent());
   const [reachBottom, setReachBottom] = useState<CheckBoxValue>(true);
 
   const scrollViewRef = useRef<ScrollViewRef>(null);
@@ -57,12 +57,12 @@ const App = () => {
         id="scrollview"
         ref={scrollViewRef}
         reachBottomText="Updating..."
-        scrollByContent={scrollByContent}
+        scrollByContent={!!scrollByContent}
         bounceEnabled={!!pullDown}
-        onReachBottom={reachBottom ? updateBottomContent : null}
+        onReachBottom={reachBottom ? updateBottomContent : undefined}
         onPullDown={updateTopContent}
         showScrollbar={showScrollBarMode}
-        scrollByThumb={scrollByThumb}
+        scrollByThumb={!!scrollByThumb}
       >
         <div className="text-content">{content}</div>
       </ScrollView>
diff --git a/apps/demos/Demos/ScrollView/Overview/ReactJs/App.js b/apps/demos/Demos/ScrollView/Overview/ReactJs/App.js
index 7c57e3fbf8d0..ddad695d571f 100644
--- a/apps/demos/Demos/ScrollView/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/ScrollView/Overview/ReactJs/App.js
@@ -53,12 +53,12 @@ const App = () => {
         id="scrollview"
         ref={scrollViewRef}
         reachBottomText="Updating..."
-        scrollByContent={scrollByContent}
+        scrollByContent={!!scrollByContent}
         bounceEnabled={!!pullDown}
-        onReachBottom={reachBottom ? updateBottomContent : null}
+        onReachBottom={reachBottom ? updateBottomContent : undefined}
         onPullDown={updateTopContent}
         showScrollbar={showScrollBarMode}
-        scrollByThumb={scrollByThumb}
+        scrollByThumb={!!scrollByThumb}
       >
         <div className="text-content">{content}</div>
       </ScrollView>
diff --git a/apps/demos/Demos/Splitter/Overview/React/PaneContent.tsx b/apps/demos/Demos/Splitter/Overview/React/PaneContent.tsx
index 77817b0a0887..e37f57e9b0af 100644
--- a/apps/demos/Demos/Splitter/Overview/React/PaneContent.tsx
+++ b/apps/demos/Demos/Splitter/Overview/React/PaneContent.tsx
@@ -27,11 +27,13 @@ const getFilteredDimensionOptions = (data: PaneContentProps) => Object.entries(d
   .map(([key, value]) => ({ key, value }));
 
 const PaneContent = (data: PaneContentProps) => {
-  const paneContentRef = useRef(null);
+  const paneContentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const element = paneContentRef.current.parentNode;
-    element.setAttribute('tabIndex', '0');
+    const element = paneContentRef.current?.parentNode;
+    if (element instanceof HTMLElement) {
+      element.setAttribute('tabIndex', '0');
+    }
   });
 
   return (
diff --git a/apps/demos/Demos/Splitter/Overview/ReactJs/PaneContent.js b/apps/demos/Demos/Splitter/Overview/ReactJs/PaneContent.js
index d52083134b52..909659a2f0c6 100644
--- a/apps/demos/Demos/Splitter/Overview/ReactJs/PaneContent.js
+++ b/apps/demos/Demos/Splitter/Overview/ReactJs/PaneContent.js
@@ -16,8 +16,10 @@ const getFilteredDimensionOptions = (data) =>
 const PaneContent = (data) => {
   const paneContentRef = useRef(null);
   useEffect(() => {
-    const element = paneContentRef.current.parentNode;
-    element.setAttribute('tabIndex', '0');
+    const element = paneContentRef.current?.parentNode;
+    if (element instanceof HTMLElement) {
+      element.setAttribute('tabIndex', '0');
+    }
   });
   return (
     <div
diff --git a/apps/demos/Demos/Tabs/Selection/React/App.tsx b/apps/demos/Demos/Tabs/Selection/React/App.tsx
index 29b9c838062f..df3cf5f812c6 100644
--- a/apps/demos/Demos/Tabs/Selection/React/App.tsx
+++ b/apps/demos/Demos/Tabs/Selection/React/App.tsx
@@ -31,7 +31,7 @@ function EmployeeInfo({ data }: EmployeeInfoProps) {
 }
 
 const App = () => {
-  const [selectedItem, setSelectedItem] = useState<Employee>(employees[0]);
+  const [selectedItem, setSelectedItem] = useState<Employee | undefined>(employees[0]);
 
   const onSelectionChanged = useCallback((args: { selectedItem?: typeof employees[0]; addedItems?: typeof employees }): void => {
     setSelectedItem(args.selectedItem || args.addedItems?.[0]);
diff --git a/apps/demos/Demos/TreeView/ContextMenuIntegration/React/types.ts b/apps/demos/Demos/TreeView/ContextMenuIntegration/React/types.ts
index dd97c3f83a5e..b9c515a941b6 100644
--- a/apps/demos/Demos/TreeView/ContextMenuIntegration/React/types.ts
+++ b/apps/demos/Demos/TreeView/ContextMenuIntegration/React/types.ts
@@ -9,7 +9,7 @@ export type Product = {
   id: string;
   text: string;
   expanded?: boolean;
-  items: (Product | ProductItem)[];
+  items?: (Product | ProductItem)[];
 };
 
 export type MenuItem = {
diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/App.tsx b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/App.tsx
index bc4d71e5b59a..52687a9361ae 100644
--- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/App.tsx
+++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/App.tsx
@@ -37,7 +37,7 @@ const findNodeById = (nodes: Node[], id: string | number): Node | null => {
       return nodes[i];
     }
     if (nodes[i].children) {
-      const node = findNodeById(nodes[i].children, id);
+      const node = findNodeById(nodes[i].children ?? [], id);
       if (node != null) {
         return node;
       }
@@ -46,9 +46,13 @@ const findNodeById = (nodes: Node[], id: string | number): Node | null => {
   return null;
 };
 
-const moveNode = (fromNode: Node, toNode: Node, fromItems: FileSystemItem[], toItems: FileSystemItem[], isDropInsideItem: boolean) => {
+const moveNode = (fromNode: Node, toNode: Node, fromItems: FileSystemItem[], toItems: FileSystemItem[], isDropInsideItem: boolean): void => {
+  if (!fromNode.itemData || !toNode.itemData) {
+    return;
+  }
+
   const fromNodeContainingArray = getNodeContainingArray(fromNode, fromItems);
-  const fromIndex = fromNodeContainingArray?.findIndex((item: { id: any }) => item.id === fromNode.itemData?.id);
+  const fromIndex = fromNodeContainingArray?.findIndex((item: { id: any }): boolean => item.id === fromNode.itemData?.id);
 
   if (isDefined(fromIndex)) {
     fromNodeContainingArray?.splice(fromIndex, 1);
diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/App.js b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/App.js
index 6fc9d2b00141..6b435d366dce 100644
--- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/App.js
+++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/App.js
@@ -26,7 +26,7 @@ const findNodeById = (nodes, id) => {
       return nodes[i];
     }
     if (nodes[i].children) {
-      const node = findNodeById(nodes[i].children, id);
+      const node = findNodeById(nodes[i].children ?? [], id);
       if (node != null) {
         return node;
       }
@@ -35,6 +35,9 @@ const findNodeById = (nodes, id) => {
   return null;
 };
 const moveNode = (fromNode, toNode, fromItems, toItems, isDropInsideItem) => {
+  if (!fromNode.itemData || !toNode.itemData) {
+    return;
+  }
   const fromNodeContainingArray = getNodeContainingArray(fromNode, fromItems);
   const fromIndex = fromNodeContainingArray?.findIndex((item) => item.id === fromNode.itemData?.id);
   if (isDefined(fromIndex)) {
diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/App.tsx b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/App.tsx
index 638231580c7a..2138498b25f3 100644
--- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/App.tsx
+++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/App.tsx
@@ -39,7 +39,7 @@ const findNodeById = (nodes: Node[], id: string | number): Node | null => {
       return nodes[i];
     }
     if (nodes[i].children) {
-      const node = findNodeById(nodes[i].children, id);
+      const node = findNodeById(nodes[i].children ?? [], id);
       if (node != null) {
         return node;
       }
@@ -48,13 +48,17 @@ const findNodeById = (nodes: Node[], id: string | number): Node | null => {
   return null;
 };
 
-const moveNode = (fromNode: Node, toNode: Node, fromItems: FileSystemItem[], toItems: FileSystemItem[], isDropInsideItem: boolean) => {
-  const fromIndex = fromItems.findIndex((item: FileSystemItem) => item.id === fromNode.itemData?.id);
+const moveNode = (fromNode: Node, toNode: Node, fromItems: FileSystemItem[], toItems: FileSystemItem[], isDropInsideItem: boolean): void => {
+  if (!fromNode.itemData || !toNode.itemData) {
+    return;
+  }
+
+  const fromIndex = fromItems.findIndex((item: FileSystemItem): boolean => item.id === fromNode.itemData?.id);
   fromItems.splice(fromIndex, 1);
 
   const toIndex = toNode === null || isDropInsideItem
     ? toItems.length
-    : toItems.findIndex((item: FileSystemItem) => item.id === toNode.itemData?.id);
+    : toItems.findIndex((item: FileSystemItem): boolean => item.id === toNode.itemData?.id);
   toItems.splice(toIndex, 0, fromNode.itemData);
 
   moveChildren(fromNode, fromItems, toItems);
@@ -62,12 +66,12 @@ const moveNode = (fromNode: Node, toNode: Node, fromItems: FileSystemItem[], toI
     fromNode.itemData.parentId = toNode.itemData?.id;
   } else {
     fromNode.itemData.parentId = toNode != null
-      ? toNode.itemData.parentId
+      ? toNode.itemData?.parentId
       : undefined;
   }
 };
 
-const moveChildren = (node: Node, fromDataSource: FileSystemItem[], toDataSource: FileSystemItem[]) => {
+const moveChildren = (node: Node, fromDataSource: FileSystemItem[], toDataSource: FileSystemItem[]): void => {
   if (!node.itemData?.isDirectory) {
     return;
   }
@@ -77,13 +81,15 @@ const moveChildren = (node: Node, fromDataSource: FileSystemItem[], toDataSource
       moveChildren(child, fromDataSource, toDataSource);
     }
 
-    const fromIndex = fromDataSource.findIndex((item: FileSystemItem) => item.id === child.itemData?.id);
+    const fromIndex = fromDataSource.findIndex((item: FileSystemItem): boolean => item.id === child.itemData?.id);
     fromDataSource.splice(fromIndex, 1);
-    toDataSource.splice(toDataSource.length, 0, child.itemData);
+    if (child.itemData) {
+      toDataSource.splice(toDataSource.length, 0, child.itemData);
+    }
   });
 };
 
-const isChildNode = (parentNode: Node, childNode: Node) => {
+const isChildNode = (parentNode: Node, childNode: Node): boolean => {
   let { parent } = childNode;
   while (parent !== null) {
     if (parent?.itemData?.id === parentNode.itemData?.id) {
diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/App.js b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/App.js
index 4eab9c868601..cb9efa896784 100644
--- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/App.js
+++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/App.js
@@ -26,7 +26,7 @@ const findNodeById = (nodes, id) => {
       return nodes[i];
     }
     if (nodes[i].children) {
-      const node = findNodeById(nodes[i].children, id);
+      const node = findNodeById(nodes[i].children ?? [], id);
       if (node != null) {
         return node;
       }
@@ -35,6 +35,9 @@ const findNodeById = (nodes, id) => {
   return null;
 };
 const moveNode = (fromNode, toNode, fromItems, toItems, isDropInsideItem) => {
+  if (!fromNode.itemData || !toNode.itemData) {
+    return;
+  }
   const fromIndex = fromItems.findIndex((item) => item.id === fromNode.itemData?.id);
   fromItems.splice(fromIndex, 1);
   const toIndex =
@@ -46,7 +49,7 @@ const moveNode = (fromNode, toNode, fromItems, toItems, isDropInsideItem) => {
   if (isDropInsideItem) {
     fromNode.itemData.parentId = toNode.itemData?.id;
   } else {
-    fromNode.itemData.parentId = toNode != null ? toNode.itemData.parentId : undefined;
+    fromNode.itemData.parentId = toNode != null ? toNode.itemData?.parentId : undefined;
   }
 };
 const moveChildren = (node, fromDataSource, toDataSource) => {
@@ -59,7 +62,9 @@ const moveChildren = (node, fromDataSource, toDataSource) => {
     }
     const fromIndex = fromDataSource.findIndex((item) => item.id === child.itemData?.id);
     fromDataSource.splice(fromIndex, 1);
-    toDataSource.splice(toDataSource.length, 0, child.itemData);
+    if (child.itemData) {
+      toDataSource.splice(toDataSource.length, 0, child.itemData);
+    }
   });
 };
 const isChildNode = (parentNode, childNode) => {
diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/React/App.tsx b/apps/demos/Demos/TreeView/FlatDataStructure/React/App.tsx
index 0cee283ce7a0..98140cb4aed4 100644
--- a/apps/demos/Demos/TreeView/FlatDataStructure/React/App.tsx
+++ b/apps/demos/Demos/TreeView/FlatDataStructure/React/App.tsx
@@ -8,6 +8,10 @@ const App = () => {
   const [currentItem, setCurrentItem] = useState<Product>(products[0]);
 
   const selectItem = useCallback((e: TreeViewTypes.ItemClickEvent<Product>): void => {
+    if (!e.itemData) {
+      return;
+    }
+
     setCurrentItem({ ...e.itemData });
   }, []);
 
diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/ReactJs/App.js b/apps/demos/Demos/TreeView/FlatDataStructure/ReactJs/App.js
index 1e4a562134c7..1c688fdc2e35 100644
--- a/apps/demos/Demos/TreeView/FlatDataStructure/ReactJs/App.js
+++ b/apps/demos/Demos/TreeView/FlatDataStructure/ReactJs/App.js
@@ -5,6 +5,9 @@ import { products } from './data.js';
 const App = () => {
   const [currentItem, setCurrentItem] = useState(products[0]);
   const selectItem = useCallback((e) => {
+    if (!e.itemData) {
+      return;
+    }
     setCurrentItem({ ...e.itemData });
   }, []);
   return (
diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/React/App.tsx b/apps/demos/Demos/TreeView/HierarchicalDataStructure/React/App.tsx
index eee4a6d9e584..4c00a7ed482a 100644
--- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/React/App.tsx
+++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/React/App.tsx
@@ -6,9 +6,13 @@ import { products } from './data.ts';
 import type { Product } from './types.ts';
 
 const App = () => {
-  const [currentItem, setCurrentItem] = useState<Product>({ ...products[0] });
+  const [currentItem, setCurrentItem] = useState<Product | undefined>({ ...products[0] });
 
   const selectItem = useCallback((e: TreeViewTypes.ItemClickEvent<Product>): void => {
+    if (!e.itemData) {
+      return;
+    }
+
     setCurrentItem({ ...e.itemData });
   }, []);
 
@@ -18,11 +22,11 @@ const App = () => {
         items={products}
         width={300}
         onItemClick={selectItem} />
-      {currentItem.price
+      {currentItem?.price
         && <div id="product-details">
-          <img src={currentItem.image} alt="Product image" />
-          <div className="name">{currentItem.text}</div>
-          <div className="price">{`$${currentItem.price}`}</div>
+          <img src={currentItem?.image} alt="Product image" />
+          <div className="name">{currentItem?.text}</div>
+          <div className="price">{`$${currentItem?.price}`}</div>
         </div>
       }
     </div>
diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/ReactJs/App.js b/apps/demos/Demos/TreeView/HierarchicalDataStructure/ReactJs/App.js
index bc55c887fddd..7e6a4ce5a9ea 100644
--- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/ReactJs/App.js
+++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/ReactJs/App.js
@@ -5,6 +5,9 @@ import { products } from './data.js';
 const App = () => {
   const [currentItem, setCurrentItem] = useState({ ...products[0] });
   const selectItem = useCallback((e) => {
+    if (!e.itemData) {
+      return;
+    }
     setCurrentItem({ ...e.itemData });
   }, []);
   return (
@@ -15,14 +18,14 @@ const App = () => {
         width={300}
         onItemClick={selectItem}
       />
-      {currentItem.price && (
+      {currentItem?.price && (
         <div id="product-details">
           <img
-            src={currentItem.image}
+            src={currentItem?.image}
             alt="Product image"
           />
-          <div className="name">{currentItem.text}</div>
-          <div className="price">{`$${currentItem.price}`}</div>
+          <div className="name">{currentItem?.text}</div>
+          <div className="price">{`$${currentItem?.price}`}</div>
         </div>
       )}
     </div>
diff --git a/apps/demos/tsconfig.react-check.json b/apps/demos/tsconfig.react-check.json
index 536081e114fc..d6ef268b8a50 100644
--- a/apps/demos/tsconfig.react-check.json
+++ b/apps/demos/tsconfig.react-check.json
@@ -19,18 +19,12 @@
   "exclude": [
    "Demos/Autocomplete/**/React/**/*.ts",
    "Demos/Autocomplete/**/React/**/*.tsx",
-   "Demos/Button/**/React/**/*.tsx",
-   "Demos/Button/**/React/**/*.ts",
    "Demos/Calendar/**/React/**/*.ts",
    "Demos/Calendar/**/React/**/*.tsx",
-   "Demos/Charts/**/React/**/*.ts",
-   "Demos/Charts/**/React/**/*.tsx",
    "Demos/Chat/**/React/**/*.ts",
    "Demos/Chat/**/React/**/*.tsx",
    "Demos/Common/EditorsRightToLeftSupport/React/**/*.ts",
    "Demos/Common/EditorsRightToLeftSupport/React/**/*.tsx",
-   "Demos/Common/NavigationOverview/React/**/*.ts",
-   "Demos/Common/NavigationOverview/React/**/*.tsx",
    "Demos/Common/PopupAndNotificationsOverview/React/**/*.ts",
    "Demos/Common/PopupAndNotificationsOverview/React/**/*.tsx",
    "Demos/Diagram/**/React/**/*.ts",
@@ -45,22 +39,14 @@
    "Demos/FileUploader/**/React/**/*.tsx",
    "Demos/FloatingActionButton/**/React/**/*.ts",
    "Demos/FloatingActionButton/**/React/**/*.tsx",
-   "Demos/Form/**/React/**/*.ts",
-   "Demos/Form/**/React/**/*.tsx",
    "Demos/Gantt/**/React/**/*.ts",
    "Demos/Gantt/**/React/**/*.tsx",
-   "Demos/Gauges/**/React/**/*.ts",
-   "Demos/Gauges/**/React/**/*.tsx",
    "Demos/HtmlEditor/**/React/**/*.ts",
    "Demos/HtmlEditor/**/React/**/*.tsx",
-   "Demos/List/**/React/**/*.ts",
-   "Demos/List/**/React/**/*.tsx",
    "Demos/Localization/**/React/**/*.ts",
    "Demos/Localization/**/React/**/*.tsx",
    "Demos/Map/**/React/**/*.ts",
    "Demos/Map/**/React/**/*.tsx",
-   "Demos/Menu/**/React/**/*.ts",
-   "Demos/Menu/**/React/**/*.tsx",
    "Demos/NumberBox/**/React/**/*.ts",
    "Demos/NumberBox/**/React/**/*.tsx",
    "Demos/Pagination/**/React/**/*.ts",
@@ -73,28 +59,20 @@
    "Demos/RangeSlider/**/React/**/*.tsx",
    "Demos/Scheduler/**/React/**/*.ts",
    "Demos/Scheduler/**/React/**/*.tsx",
-   "Demos/ScrollView/**/React/**/*.ts",
-   "Demos/ScrollView/**/React/**/*.tsx",
    "Demos/SelectBox/**/React/**/*.ts",
    "Demos/SelectBox/**/React/**/*.tsx",
    "Demos/Slider/**/React/**/*.ts",
    "Demos/Slider/**/React/**/*.tsx",
    "Demos/SpeechToText/**/React/**/*.ts",
    "Demos/SpeechToText/**/React/**/*.tsx",
-   "Demos/Splitter/**/React/**/*.ts",
-   "Demos/Splitter/**/React/**/*.tsx",
    "Demos/Stepper/**/React/**/*.ts",
    "Demos/Stepper/**/React/**/*.tsx",
    "Demos/TagBox/**/React/**/*.ts",
    "Demos/TagBox/**/React/**/*.tsx",
-   "Demos/Tabs/**/React/**/*.ts",
-   "Demos/Tabs/**/React/**/*.tsx",
    "Demos/TextArea/**/React/**/*.ts",
    "Demos/TextArea/**/React/**/*.tsx",
    "Demos/Toast/**/React/**/*.ts",
    "Demos/Toast/**/React/**/*.tsx",
-   "Demos/TreeView/**/React/**/*.ts",
-   "Demos/TreeView/**/React/**/*.tsx",
    "Demos/Validation/**/React/**/*.ts",
    "Demos/Validation/**/React/**/*.tsx",
    "Demos/VectorMap/**/React/**/*.ts",