Navigation: Fix TS problems and make TS improvements in demos

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

@@ -2,45 +2,45 @@ 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 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?.current?.instance()?.editRow(selectedRowIndex);
+    gridRef?.current?.instance()?.deselectAll();
   }, [gridRef, selectedRowIndex]);
 
   const deleteRow = useCallback(() => {
-    gridRef.current.instance().deleteRow(selectedRowIndex);
-    gridRef.current.instance().deselectAll();
+    gridRef?.current?.instance()?.deleteRow(selectedRowIndex);
+    gridRef?.current?.instance()?.deselectAll();
   }, [gridRef, selectedRowIndex]);
 
   const addRow = useCallback(() => {
-    gridRef.current.instance().addRow();
-    gridRef.current.instance().deselectAll();
+    gridRef?.current?.instance()?.addRow();
+    gridRef?.current?.instance()?.deselectAll();
   }, [gridRef]);
 
   return (

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

@@ -1,4 +1,22 @@
-export const directions = {
+import type { FloatingActionButtonDirection, PositionAlignment } from 'devextreme/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,10 +7,9 @@ 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);
@@ -27,16 +26,16 @@ const App = () => {
     repaintFloatingActionButton();
   }, []);
   const editRow = useCallback(() => {
-    gridRef.current.instance().editRow(selectedRowIndex);
-    gridRef.current.instance().deselectAll();
+    gridRef?.current?.instance()?.editRow(selectedRowIndex);
+    gridRef?.current?.instance()?.deselectAll();
   }, [gridRef, selectedRowIndex]);
   const deleteRow = useCallback(() => {
-    gridRef.current.instance().deleteRow(selectedRowIndex);
-    gridRef.current.instance().deselectAll();
+    gridRef?.current?.instance()?.deleteRow(selectedRowIndex);
+    gridRef?.current?.instance()?.deselectAll();
   }, [gridRef, selectedRowIndex]);
   const addRow = useCallback(() => {
-    gridRef.current.instance().addRow();
-    gridRef.current.instance().deselectAll();
+    gridRef?.current?.instance()?.addRow();
+    gridRef?.current?.instance()?.deselectAll();
   }, [gridRef]);
   return (
     <div>

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/VectorMap/BubbleMarkers/React/App.tsx

@@ -18,10 +18,10 @@ 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 = (arg: { index: string | number; }) => ['< 8000K', '8000K to 10000K', '> 10000K'][Number(arg.index)];
 
 const customizeItems = (items: any[]) => items.reverse();
 

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,9 +11,9 @@ 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 customizeText = (arg) => ['< 8000K', '8000K to 10000K', '> 10000K'][Number(arg.index)];
 const customizeItems = (items) => items.reverse();
 export default function App() {
   return (

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

@@ -9,13 +9,15 @@ import VectorMap, {
 import type { ILayerProps, ITooltipProps } from 'devextreme-react/vector-map';
 
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
+import type { MapLayerElement } from 'devextreme/viz/vector_map';
 import { countries } from './data.ts';
 
 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 keyof typeof countries;
+    const country = countries[name];
     if (country) {
       element.applySettings({
         color: country.color,
@@ -26,22 +28,23 @@ const customizeLayer: ILayerProps['customize'] = (elements) => {
   });
 };
 
-const clickHandler = ({ target }) => {
-  if (target && countries[target.attribute('name')]) {
+const clickHandler = ({ target }: { target: MapLayerElement }) => {
+  const name = target?.attribute('name') as keyof typeof countries;
+  if (target && countries[name]) {
     target.selected(!target.selected());
   }
 };
 
 const customizeTooltip: ITooltipProps['customizeTooltip'] = ({ attribute }) => {
-  const name = attribute('name');
+  const name = attribute('name') as keyof typeof countries;
   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

apps/demos/Demos/VectorMap/CustomProjection/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/DynamicViewport/React/App.tsx

@@ -1,9 +1,10 @@
 import React, { useCallback, useRef, useState } from 'react';
-import VectorMap, { Layer, ControlBar, type VectorMapTypes } from 'devextreme-react/vector-map';
+import VectorMap, { Layer, ControlBar } from 'devextreme-react/vector-map';
 import TextBox from 'devextreme-react/text-box';
 import SelectBox from 'devextreme-react/select-box';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import Switch from 'devextreme-react/switch';
+import type { VectorMapTypes, VectorMapRef } from 'devextreme-react/vector-map';
 import {
   viewportCoordinates, centerLabel, zoomLabel, continentLabel,
 } from './data.ts';
@@ -16,11 +17,11 @@ const App = () => {
   const [center, setCenter] = useState('0.000, 46.036');
   const [panVisible, setPanVisible] = useState(true);
   const [zoomVisible, setZoomVisible] = useState(true);
-  const mapRef = useRef(null);
+  const mapRef = useRef<VectorMapRef>(null);
 
   const continentChanged = useCallback(({ value }) => {
     setCoordinates(value);
-    mapRef.current.instance().viewport(value);
+    mapRef?.current?.instance().viewport(value);
   }, [setCoordinates]);
 
   const zoomFactorChanged = useCallback((e: VectorMapTypes.ZoomFactorChangedEvent) => {