Navigation: Fix TS problems and make TS improvements in demos (cherry-pick)

apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx

@@ -2,46 +2,47 @@ import React, { useCallback, useRef, useState } from 'react';
 import config from 'devextreme/core/config';
 import repaintFloatingActionButton from 'devextreme/ui/speed_dial_action/repaint_floating_action_button';
 import DataGrid, {
-  Column, Editing, Lookup, Texts, Selection, type DataGridTypes,
+  Column, Editing, Lookup, Texts, Selection,
 } from 'devextreme-react/data-grid';
 import { SpeedDialAction } from 'devextreme-react/speed-dial-action';
-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 type { DataGridTypes, DataGridRef } from 'devextreme-react/data-grid';
 import {
-  employees, states, directions, directionLabel,
+  employees, states, directions, optionDirections, directionLabel,
 } from './data.ts';
-
-const optionDirections = ['auto', 'up', 'down'];
+import type { DirectionKey } from './data.ts';
 
 const App = () => {
   const [selectedRowIndex, setSelectedRowIndex] = useState(-1);
-  const gridRef = useRef(null);
+  const gridRef = useRef<DataGridRef>(null);
 
   const selectedChanged = useCallback((e: DataGridTypes.SelectionChangedEvent) => {
     setSelectedRowIndex(e.component.getRowIndexByKey(e.selectedRowKeys[0]));
-  }, [setSelectedRowIndex]);
+  }, []);
 
   const directionChanged = useCallback((e: SelectBoxTypes.SelectionChangedEvent) => {
     config({
-      floatingActionButtonConfig: directions[e.selectedItem],
+      floatingActionButtonConfig: directions[e.selectedItem as DirectionKey],
     });
 
     repaintFloatingActionButton();
   }, []);
 
   const editRow = useCallback(() => {
-    gridRef.current.instance().editRow(selectedRowIndex);
-    gridRef.current.instance().deselectAll();
-  }, [gridRef, selectedRowIndex]);
+    gridRef.current?.instance()?.editRow(selectedRowIndex);
+    gridRef.current?.instance()?.deselectAll();
+  }, [selectedRowIndex]);
 
   const deleteRow = useCallback(() => {
-    gridRef.current.instance().deleteRow(selectedRowIndex);
-    gridRef.current.instance().deselectAll();
-  }, [gridRef, selectedRowIndex]);
+    gridRef.current?.instance()?.deleteRow(selectedRowIndex);
+    gridRef.current?.instance()?.deselectAll();
+  }, [selectedRowIndex]);
 
   const addRow = useCallback(() => {
-    gridRef.current.instance().addRow();
-    gridRef.current.instance().deselectAll();
-  }, [gridRef]);
+    gridRef.current?.instance()?.addRow();
+    gridRef.current?.instance()?.deselectAll();
+  }, []);
 
   return (
     <div>

apps/demos/Demos/FloatingActionButton/Overview/React/data.ts

@@ -1,4 +1,22 @@
-export const directions = {
+import type { FloatingActionButtonDirection, PositionAlignment } from 'devextreme-react/common';
+
+type DirectionValue = {
+  icon: string;
+  shading: boolean;
+  direction?: FloatingActionButtonDirection;
+  position: {
+    of: string;
+    my: PositionAlignment;
+    at: PositionAlignment;
+    offset: string;
+  };
+};
+
+export const optionDirections = ['auto', 'up', 'down'] as const;
+
+export type DirectionKey = typeof optionDirections[number];
+
+export const directions: Record<DirectionKey, DirectionValue> = {
   auto: {
     icon: 'rowfield',
     shading: true,

apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js

@@ -7,37 +7,33 @@ import DataGrid, {
 import { SpeedDialAction } from 'devextreme-react/speed-dial-action';
 import { SelectBox } from 'devextreme-react/select-box';
 import {
-  employees, states, directions, directionLabel,
+  employees, states, directions, optionDirections, directionLabel,
 } from './data.js';
 
-const optionDirections = ['auto', 'up', 'down'];
 const App = () => {
   const [selectedRowIndex, setSelectedRowIndex] = useState(-1);
   const gridRef = useRef(null);
-  const selectedChanged = useCallback(
-    (e) => {
-      setSelectedRowIndex(e.component.getRowIndexByKey(e.selectedRowKeys[0]));
-    },
-    [setSelectedRowIndex],
-  );
+  const selectedChanged = useCallback((e) => {
+    setSelectedRowIndex(e.component.getRowIndexByKey(e.selectedRowKeys[0]));
+  }, []);
   const directionChanged = useCallback((e) => {
     config({
       floatingActionButtonConfig: directions[e.selectedItem],
     });
     repaintFloatingActionButton();
   }, []);
   const editRow = useCallback(() => {
-    gridRef.current.instance().editRow(selectedRowIndex);
-    gridRef.current.instance().deselectAll();
-  }, [gridRef, selectedRowIndex]);
+    gridRef.current?.instance()?.editRow(selectedRowIndex);
+    gridRef.current?.instance()?.deselectAll();
+  }, [selectedRowIndex]);
   const deleteRow = useCallback(() => {
-    gridRef.current.instance().deleteRow(selectedRowIndex);
-    gridRef.current.instance().deselectAll();
-  }, [gridRef, selectedRowIndex]);
+    gridRef.current?.instance()?.deleteRow(selectedRowIndex);
+    gridRef.current?.instance()?.deselectAll();
+  }, [selectedRowIndex]);
   const addRow = useCallback(() => {
-    gridRef.current.instance().addRow();
-    gridRef.current.instance().deselectAll();
-  }, [gridRef]);
+    gridRef.current?.instance()?.addRow();
+    gridRef.current?.instance()?.deselectAll();
+  }, []);
   return (
     <div>
       <DataGrid

apps/demos/Demos/FloatingActionButton/Overview/ReactJs/data.js

@@ -1,3 +1,4 @@
+export const optionDirections = ['auto', 'up', 'down'];
 export const directions = {
   auto: {
     icon: 'rowfield',

apps/demos/Demos/Localization/UsingGlobalize/React/global.d.ts

@@ -0,0 +1,9 @@
+declare module '*.json' {
+  const value: any;
+  export default value;
+}
+
+declare module 'globalize' {
+  const Globalize: any;
+  export default Globalize;
+}

apps/demos/Demos/Localization/UsingIntl/React/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.json' {
+  const value: any;
+  export default value;
+}

apps/demos/Demos/VectorMap/BubbleMarkers/React/App.tsx

@@ -6,7 +6,7 @@ import VectorMap, {
   Source,
   Tooltip,
 } from 'devextreme-react/vector-map';
-import type { ITooltipProps } from 'devextreme-react/vector-map';
+import type { ILegendProps, ITooltipProps, VectorMapTypes } from 'devextreme-react/vector-map';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import { markers } from './data.ts';
 
@@ -18,12 +18,12 @@ const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg) => {
   if (arg.layer.type === 'marker') {
     return { text: arg.attribute('tooltip') };
   }
-  return null;
+  return {};
 };
 
-const customizeText = (arg: { index: string | number; }) => ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index];
+const customizeText: ILegendProps['customizeText'] = (arg) => ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index];
 
-const customizeItems = (items: any[]) => items.reverse();
+const customizeItems = (items: VectorMapTypes.LegendItem[]) => items.reverse();
 
 export default function App() {
   return (

apps/demos/Demos/VectorMap/BubbleMarkers/React/devextreme-vectormap-data.d.ts

@@ -0,0 +1,27 @@
+declare module 'devextreme-dist/js/vectormap-data/world.js' {
+  type Position = number[];
+  type Geometry =
+    | { type: 'Point'; coordinates: Position }
+    | { type: 'MultiPoint'; coordinates: Position[] }
+    | { type: 'LineString'; coordinates: Position[] }
+    | { type: 'MultiLineString'; coordinates: Position[][] }
+    | { type: 'Polygon'; coordinates: Position[][] }
+    | { type: 'MultiPolygon'; coordinates: Position[][][] };
+
+  interface Feature {
+    type: 'Feature';
+    geometry: Geometry;
+    properties: Record<string, unknown>;
+  }
+
+  interface FeatureCollection {
+    type: 'FeatureCollection';
+    features: Feature[];
+    // eslint-disable-next-line spellcheck/spell-checker
+    bbox?: number[];
+  }
+
+  const world: FeatureCollection;
+  export { world };
+  export default world;
+}

apps/demos/Demos/VectorMap/BubbleMarkers/ReactJs/App.js

@@ -11,7 +11,7 @@ const customizeTooltip = (arg) => {
   if (arg.layer.type === 'marker') {
     return { text: arg.attribute('tooltip') };
   }
-  return null;
+  return {};
 };
 const customizeText = (arg) => ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index];
 const customizeItems = (items) => items.reverse();

apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx

@@ -6,16 +6,19 @@ import VectorMap, {
   Border,
   Font,
 } from 'devextreme-react/vector-map';
-import type { ILayerProps, ITooltipProps } from 'devextreme-react/vector-map';
+import type { ILayerProps, ITooltipProps, VectorMapTypes } from 'devextreme-react/vector-map';
 
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import { countries } from './data.ts';
 
+type CountriesKey = keyof typeof countries;
+
 const bounds = [-180, 85, 180, -60];
 
 const customizeLayer: ILayerProps['customize'] = (elements) => {
   elements.forEach((element) => {
-    const country = countries[element.attribute('name')];
+    const name = element.attribute('name') as CountriesKey;
+    const country = countries[name];
     if (country) {
       element.applySettings({
         color: country.color,
@@ -26,22 +29,23 @@ const customizeLayer: ILayerProps['customize'] = (elements) => {
   });
 };
 
-const clickHandler = ({ target }) => {
-  if (target && countries[target.attribute('name')]) {
+const clickHandler = ({ target }: VectorMapTypes.ClickEvent) => {
+  const name = target?.attribute('name') as CountriesKey;
+  if (target && countries[name]) {
     target.selected(!target.selected());
   }
 };
 
 const customizeTooltip: ITooltipProps['customizeTooltip'] = ({ attribute }) => {
-  const name = attribute('name');
+  const name = attribute('name') as CountriesKey;
   const country = countries[name];
   if (country) {
     return {
       text: `${name}: ${country.totalArea}M km&#178`,
       color: country.color,
     };
   }
-  return null;
+  return {};
 };
 
 export default function App() {

apps/demos/Demos/VectorMap/ColorsCustomization/React/devextreme-vectormap-data.d.ts

@@ -0,0 +1,27 @@
+declare module 'devextreme-dist/js/vectormap-data/world.js' {
+  type Position = number[];
+  type Geometry =
+    | { type: 'Point'; coordinates: Position }
+    | { type: 'MultiPoint'; coordinates: Position[] }
+    | { type: 'LineString'; coordinates: Position[] }
+    | { type: 'MultiLineString'; coordinates: Position[][] }
+    | { type: 'Polygon'; coordinates: Position[][] }
+    | { type: 'MultiPolygon'; coordinates: Position[][][] };
+
+  interface Feature {
+    type: 'Feature';
+    geometry: Geometry;
+    properties: Record<string, unknown>;
+  }
+
+  interface FeatureCollection {
+    type: 'FeatureCollection';
+    features: Feature[];
+    // eslint-disable-next-line spellcheck/spell-checker
+    bbox?: number[];
+  }
+
+  const world: FeatureCollection;
+  export { world };
+  export default world;
+}

apps/demos/Demos/VectorMap/ColorsCustomization/ReactJs/App.js

@@ -8,7 +8,8 @@ import { countries } from './data.js';
 const bounds = [-180, 85, 180, -60];
 const customizeLayer = (elements) => {
   elements.forEach((element) => {
-    const country = countries[element.attribute('name')];
+    const name = element.attribute('name');
+    const country = countries[name];
     if (country) {
       element.applySettings({
         color: country.color,
@@ -19,7 +20,8 @@ const customizeLayer = (elements) => {
   });
 };
 const clickHandler = ({ target }) => {
-  if (target && countries[target.attribute('name')]) {
+  const name = target?.attribute('name');
+  if (target && countries[name]) {
     target.selected(!target.selected());
   }
 };
@@ -32,7 +34,7 @@ const customizeTooltip = ({ attribute }) => {
       color: country.color,
     };
   }
-  return null;
+  return {};
 };
 export default function App() {
   return (

apps/demos/Demos/VectorMap/CustomAnnotations/React/devextreme-vectormap-data.d.ts

@@ -0,0 +1,27 @@
+declare module 'devextreme-dist/js/vectormap-data/usa.js' {
+  type Position = number[];
+  type Geometry =
+    | { type: 'Point'; coordinates: Position }
+    | { type: 'MultiPoint'; coordinates: Position[] }
+    | { type: 'LineString'; coordinates: Position[] }
+    | { type: 'MultiLineString'; coordinates: Position[][] }
+    | { type: 'Polygon'; coordinates: Position[][] }
+    | { type: 'MultiPolygon'; coordinates: Position[][][] };
+
+  interface Feature {
+    type: 'Feature';
+    geometry: Geometry;
+    properties: Record<string, unknown>;
+  }
+
+  interface FeatureCollection {
+    type: 'FeatureCollection';
+    features: Feature[];
+    // eslint-disable-next-line spellcheck/spell-checker
+    bbox?: number[];
+  }
+
+  const usa: FeatureCollection;
+  export { usa };
+  export default usa;
+}

apps/demos/Demos/VectorMap/CustomMapData/React/App.tsx

@@ -9,8 +9,8 @@ import type { ILayerProps } from 'devextreme-react/vector-map';
 import { pangaeaBorders, pangaeaContinents } from './data.ts';
 
 const projection = {
-  to: ([l, lt]) => [l / 100, lt / 100],
-  from: ([x, y]) => [x * 100, y * 100],
+  to: ([l, lt]: [number, number]) => [l / 100, lt / 100],
+  from: ([x, y]: [number, number]) => [x * 100, y * 100],
 };
 
 const customizeLayer: ILayerProps['customize'] = (elements) => {

apps/demos/Demos/VectorMap/CustomProjection/React/data.ts

@@ -1,6 +1,13 @@
+interface LineFeature {
+  geometry: {
+    type: string;
+    coordinates: number[][];
+  };
+}
+
 export const coordLinesData = {
   type: 'FeatureCollection',
-  features: [],
+  features: [] as LineFeature[],
 };
 
 // add meridians