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

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;

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 (

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

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}

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

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 },

apps/demos/Demos/Charts/CenterLabelCustomization/React/types.ts

@@ -0,0 +1,5 @@
+export type CountryData = {
+  country: string;
+  commodity: string;
+  total: number;
+};

apps/demos/Demos/Charts/CustomAnnotations/React/AnnotationTemplate.tsx

@@ -1,21 +1,19 @@
 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`;
 }
 
 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>

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',

apps/demos/Demos/Charts/CustomAnnotations/React/types.ts

@@ -0,0 +1,6 @@
+export type PopulationData = {
+  name: string;
+  population: number;
+  capital: string;
+  area: number;
+};