Demos: Fix TS problems and make TS improvements in strict mode (Navigation) (#32072) (#32078)

Author: pharret31

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);
 }
 

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) {

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 (

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>`,
 });
 

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 (

apps/demos/Demos/Charts/AreaSelectionZooming/ReactJs/App.js

@@ -16,15 +16,15 @@ 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}`,
   };
 }
 function App() {
   const chartRef = useRef(null);
   const resetZoom = useCallback(() => {
-    chartRef.current.instance().resetVisualRange();
+    chartRef.current?.instance().resetVisualRange();
   }, []);
   return (
     <div>

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>

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

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 (

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;