Fix TS problems and make TS improvements in demos (Editors) - part 1 (#32010)

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

@@ -1,11 +1,12 @@
 import React, { useCallback, useState } from 'react';
 import { CustomStore } from 'devextreme-react/common/data';
+import type { LoadOptions } from 'devextreme-react/common/data';
 import { Autocomplete, type AutocompleteTypes } from 'devextreme-react/autocomplete';
 import 'whatwg-fetch';
 import { names, surnames, positions } from './data.ts';
 import AspNetData from 'devextreme-aspnet-data-nojquery';
 
-function isNotEmpty(value: string) {
+function isNotEmpty(value: string): boolean {
   return value !== undefined && value !== null && value !== '';
 }
 
@@ -20,51 +21,51 @@ const states = AspNetData.createStore({
 const clientsStore = new CustomStore({
   key: 'Value',
   useDefaultSearch: true,
-  load: (loadOptions) => {
+  load: (loadOptions: LoadOptions) => {
     let params = '?';
-    ['skip', 'take', 'filter'].forEach((option) => {
+    ['skip', 'take', 'filter'].forEach((option: string): void => {
       if (option in loadOptions && isNotEmpty(loadOptions[option])) {
         params += `${option}=${JSON.stringify(loadOptions[option])}&`;
       }
     });
     params = params.slice(0, -1);
     return fetch(`https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/CustomersLookup${params}`)
-      .then((response) => response.json())
+      .then((response: Response) => response.json())
       .then((data) => ({
         data: data.data,
       }))
-      .catch(() => {
+      .catch((): never => {
         throw new Error('Data Loading Error');
       });
   },
 });
 
-const renderState = (data) => (
+const renderState = (data: { Name: string, Short: string }) => (
   <span>
     {data.Name} ({data.Short})
   </span>
 );
 
 function App() {
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
+  const [firstName, setFirstName] = useState<string>('');
+  const [lastName, setLastName] = useState<string>('');
 
-  const [state, setState] = useState('');
-  const [currentClient, setCurrentClient] = useState('');
+  const [state, setState] = useState<string>('');
+  const [currentClient, setCurrentClient] = useState<string>('');
 
-  const handleFirstNameChange = useCallback((e: AutocompleteTypes.ValueChangedEvent) => {
+  const handleFirstNameChange = useCallback((e: AutocompleteTypes.ValueChangedEvent): void => {
     setFirstName(e.value);
   }, []);
 
-  const handleLastNameChange = useCallback((e: AutocompleteTypes.ValueChangedEvent) => {
+  const handleLastNameChange = useCallback((e: AutocompleteTypes.ValueChangedEvent): void => {
     setLastName(e.value);
   }, []);
 
-  const handleStateChange = useCallback((e: AutocompleteTypes.ValueChangedEvent) => {
+  const handleStateChange = useCallback((e: AutocompleteTypes.ValueChangedEvent): void => {
     setState(e.value);
   }, []);
 
-  const handleCurrentClientChange = useCallback((e: AutocompleteTypes.ValueChangedEvent) => {
+  const handleCurrentClientChange = useCallback((e: AutocompleteTypes.ValueChangedEvent): void => {
     setCurrentClient(e.value);
   }, []);
 

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

@@ -1,8 +1,8 @@
-export const names = ['James', 'John', 'Robert', 'Michael', 'William', 'David', 'Richard', 'Charles', 'Joseph', 'Thomas', 'Christopher', 'Daniel', 'Paul', 'Mark', 'Donald', 'George', 'Kenneth', 'Steven', 'Edward', 'Brian', 'Ronald', 'Anthony', 'Kevin', 'Jason', 'Jeff', 'Mary', 'Patricia', 'Linda', 'Barbara', 'Elizabeth', 'Jennifer', 'Maria', 'Susan', 'Margaret', 'Dorothy', 'Lisa', 'Nancy', 'Karen', 'Betty', 'Helen', 'Sandra', 'Donna', 'Carol', 'Ruth', 'Sharon', 'Michelle', 'Laura', 'Sarah', 'Kimberly', 'Deborah'];
+export const names: string[] = ['James', 'John', 'Robert', 'Michael', 'William', 'David', 'Richard', 'Charles', 'Joseph', 'Thomas', 'Christopher', 'Daniel', 'Paul', 'Mark', 'Donald', 'George', 'Kenneth', 'Steven', 'Edward', 'Brian', 'Ronald', 'Anthony', 'Kevin', 'Jason', 'Jeff', 'Mary', 'Patricia', 'Linda', 'Barbara', 'Elizabeth', 'Jennifer', 'Maria', 'Susan', 'Margaret', 'Dorothy', 'Lisa', 'Nancy', 'Karen', 'Betty', 'Helen', 'Sandra', 'Donna', 'Carol', 'Ruth', 'Sharon', 'Michelle', 'Laura', 'Sarah', 'Kimberly', 'Deborah'];
 
-export const surnames = ['Anderson', 'Smith', 'Johnson', 'Williams', 'Jones', 'Brown', 'Davis', 'Miller', 'Wilson', 'Moore', 'Taylor', 'Thomas', 'Jackson', 'White', 'Harris', 'Martin', 'Thompson', 'Garcia', 'Martinez', 'Robinson', 'Clark', 'Rodriguez', 'Lewis', 'Lee',
+export const surnames: string[] = ['Anderson', 'Smith', 'Johnson', 'Williams', 'Jones', 'Brown', 'Davis', 'Miller', 'Wilson', 'Moore', 'Taylor', 'Thomas', 'Jackson', 'White', 'Harris', 'Martin', 'Thompson', 'Garcia', 'Martinez', 'Robinson', 'Clark', 'Rodriguez', 'Lewis', 'Lee',
   'Walker', 'Hall', 'Allen', 'Young', 'Hernandez', 'King', 'Wright', 'Lopez', 'Hill', 'Scott', 'Green', 'Adams', 'Baker', 'Gonzalez', 'Nelson', 'Carter', 'Mitchell', 'Perez', 'Roberts', 'Turner', 'Phillips', 'Campbell',
   'Parker', 'Evans', 'Edwards', 'Collins',
 ];
 
-export const positions = ['CEO', 'COO', 'CTO', 'CMO', 'HR Manager', 'IT Manager', 'Controller', 'Sales Manager', 'Support Manager'];
+export const positions: string[] = ['CEO', 'COO', 'CTO', 'CMO', 'HR Manager', 'IT Manager', 'Controller', 'Sales Manager', 'Support Manager'];

apps/demos/Demos/Calendar/MultipleSelection/React/App.tsx

@@ -1,55 +1,58 @@
 import React, { useCallback, useRef, useState } from 'react';
 import CheckBox from 'devextreme-react/check-box';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
 import SelectBox from 'devextreme-react/select-box';
+import type { SelectBoxTypes } from 'devextreme-react/select-box';
 import Button from 'devextreme-react/button';
-import Calendar, { type CalendarTypes } from 'devextreme-react/calendar';
+import Calendar from 'devextreme-react/calendar';
+import type { CalendarTypes, CalendarRef } from 'devextreme-react/calendar';
 
 const selectionModes = ['single', 'multiple', 'range'];
 const selectionModeLabel = { 'aria-label': 'Selection Mode' };
 
-const isWeekend = (date) => {
+const isWeekend = (date: Date): boolean => {
   const day = date.getDay();
   return day === 0 || day === 6;
 };
-const isDateDisabled = ({ view, date }) => view === 'month' && isWeekend(date);
+const isDateDisabled = ({ view, date }: CalendarTypes.DisabledDate): boolean => view === 'month' && isWeekend(date);
 const now = new Date().getTime();
 const msInDay = 1000 * 60 * 60 * 24;
 const initialValue = [now, now + msInDay];
 
 export default function App() {
-  const calendar = useRef(null);
-  const [selectWeekOnClick, setSelectWeekOnClick] = useState(true);
+  const calendar = useRef<CalendarRef>(null);
+  const [selectWeekOnClick, setSelectWeekOnClick] = useState<boolean>(true);
   const [selectionMode, setSelectionMode] = useState<CalendarTypes.CalendarSelectionMode>('multiple');
-  const [minDateValue, setMinDateValue] = useState(null);
-  const [maxDateValue, setMaxDateValue] = useState(null);
-  const [weekendDisabled, setWeekendDisabled] = useState(null);
+  const [minDateValue, setMinDateValue] = useState<Date | null>(null);
+  const [maxDateValue, setMaxDateValue] = useState<Date | null>(null);
+  const [weekendDisabled, setWeekendDisabled] = useState<boolean | null>(null);
 
-  const onSelectWeekOnClickChange = useCallback(({ value }) => {
+  const onSelectWeekOnClickChange = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => {
     setSelectWeekOnClick(value);
   }, [setSelectWeekOnClick]);
 
-  const onSelectionModeChange = useCallback(({ value }) => {
+  const onSelectionModeChange = useCallback(({ value }: SelectBoxTypes.ValueChangedEvent): void => {
     setSelectionMode(value);
   }, [setSelectionMode]);
 
-  const onMinDateChange = useCallback(({ value }) => {
+  const onMinDateChange = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => {
     setMinDateValue(
       value ? new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 3) : null,
     );
   }, [setMinDateValue]);
 
-  const onMaxDateChange = useCallback(({ value }) => {
+  const onMaxDateChange = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => {
     setMaxDateValue(
       value ? new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 3) : null,
     );
   }, [setMaxDateValue]);
 
-  const onDisableWeekendChange = useCallback(({ value }) => {
+  const onDisableWeekendChange = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => {
     setWeekendDisabled(value);
   }, [setWeekendDisabled]);
 
   const onClearButtonClick = useCallback(() => {
-    calendar.current.instance().clear();
+    calendar.current?.instance().clear();
   }, []);
 
   return (

apps/demos/Demos/Calendar/MultipleSelection/ReactJs/App.js

@@ -52,7 +52,7 @@ export default function App() {
     [setWeekendDisabled],
   );
   const onClearButtonClick = useCallback(() => {
-    calendar.current.instance().clear();
+    calendar.current?.instance().clear();
   }, []);
   return (
     <div id="calendar-demo">

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

@@ -1,13 +1,16 @@
 import React, { useCallback, useState } from 'react';
 import CheckBox from 'devextreme-react/check-box';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
 import SelectBox from 'devextreme-react/select-box';
+import type { SelectBoxTypes } from 'devextreme-react/select-box';
 import DateBox from 'devextreme-react/date-box';
-import Calendar, { type CalendarTypes } from 'devextreme-react/calendar';
+import Calendar from 'devextreme-react/calendar';
+import type { CalendarTypes } from 'devextreme-react/calendar';
 import CustomCell from './CustomCell.tsx';
 
-const zoomLevels = ['month', 'year', 'decade', 'century'];
-const weekNumberRules = ['auto', 'firstDay', 'firstFourDays', 'fullWeek'];
-const weekDays = [
+const zoomLevels: CalendarTypes.CalendarZoomLevel[] = ['month', 'year', 'decade', 'century'];
+const weekNumberRules: CalendarTypes.WeekNumberRule[] = ['auto', 'firstDay', 'firstFourDays', 'fullWeek'];
+const weekDays: { id: number, text: string }[] = [
   { id: 0, text: 'Sunday' },
   { id: 1, text: 'Monday' },
   { id: 2, text: 'Tuesday' },
@@ -24,66 +27,66 @@ const ruleLabel = { 'aria-label': 'Week Number Rule' };
 
 export default function App() {
   const [zoomLevel, setZoomLevel] = useState<CalendarTypes.CalendarZoomLevel>('month');
-  const [currentValue, setCurrentValue] = useState(new Date());
-  const [useCellTemplate, setUseCellTemplate] = useState(null);
-  const [disabled, setDisabled] = useState(false);
-  const [showWeekNumbers, setShowWeekNumbers] = useState(false);
+  const [currentValue, setCurrentValue] = useState<Date>(new Date());
+  const [useCellTemplate, setUseCellTemplate] = useState<boolean | null>(null);
+  const [disabled, setDisabled] = useState<boolean>(false);
+  const [showWeekNumbers, setShowWeekNumbers] = useState<boolean>(false);
   const [firstDay, setFirstDay] = useState<CalendarTypes.FirstDayOfWeek>(0);
   const [weekNumberRule, setWeekNumberRule] = useState<CalendarTypes.WeekNumberRule>('auto');
 
   const onCurrentValueChange = useCallback(
-    ({ value }) => {
+    ({ value }: { value?: Date }): void => {
       setCurrentValue(value);
     },
-    [setCurrentValue],
+    [],
   );
 
   const onDisabledChange = useCallback(
-    ({ value }) => {
+    ({ value }: CheckBoxTypes.ValueChangedEvent): void => {
       setDisabled(value);
     },
-    [setDisabled],
+    [],
   );
 
   const onZoomLevelChange = useCallback(
-    ({ value }) => {
+    ({ value }: Partial<SelectBoxTypes.ValueChangedEvent>): void => {
       setZoomLevel(value);
     },
-    [setZoomLevel],
+    [],
   );
 
   const onFirstDayChange = useCallback(
-    ({ value }) => {
+    ({ value }: SelectBoxTypes.ValueChangedEvent): void => {
       setFirstDay(value);
     },
-    [setFirstDay],
+    [],
   );
 
   const onWeekNumberRuleChange = useCallback(
-    ({ value }) => {
+    ({ value }: SelectBoxTypes.ValueChangedEvent): void => {
       setWeekNumberRule(value);
     },
-    [setWeekNumberRule],
+    [],
   );
 
   const onShowWeekNumbersChange = useCallback(
-    ({ value }) => {
+    ({ value }: CheckBoxTypes.ValueChangedEvent): void => {
       setShowWeekNumbers(value);
     },
     [setShowWeekNumbers],
   );
 
   const onUseCellTemplateChange = useCallback(
-    ({ value }) => {
+    ({ value }: CheckBoxTypes.ValueChangedEvent): void => {
       setUseCellTemplate(!!value);
     },
     [setUseCellTemplate],
   );
 
   const onOptionChange = useCallback(
-    (e: { name: string }) => {
+    (e: CalendarTypes.OptionChangedEvent): void => {
       if (e.name === 'zoomLevel') {
-        onZoomLevelChange(e);
+        onZoomLevelChange({ value: e.value });
       }
     },
     [onZoomLevelChange],

apps/demos/Demos/Calendar/Overview/React/CustomCell.tsx

@@ -1,21 +1,22 @@
 import React from 'react';
+import type { CalendarTypes } from 'devextreme-react/calendar';
 
-export function isWeekend(date: Date) {
+export function isWeekend(date: Date): boolean {
   const day = date.getDay();
   return day === 0 || day === 6;
 }
 
-const holidays = [
+const holidays: number[][] = [
   [1, 0],
   [4, 6],
   [25, 11],
 ];
 
-export function isHoliday(date: Date) {
-  return holidays.some((item) => date.getDate() === item[0] && date.getMonth() === item[1]);
+export function isHoliday(date: Date): boolean {
+  return holidays.some((item: number[]): boolean => date.getDate() === item[0] && date.getMonth() === item[1]);
 }
 
-function getCellCssClass({ date, view }) {
+function getCellCssClass({ date, view }: CalendarTypes.CellTemplateData): string {
   let cssClass = '';
 
   if (view === 'month') {
@@ -35,7 +36,11 @@ function getCellCssClass({ date, view }) {
   return cssClass;
 }
 
-function CustomCell({ data: cell }) {
+interface CustomCellProps {
+  data: CalendarTypes.CellTemplateData;
+}
+
+function CustomCell({ data: cell }: CustomCellProps) {
   const { text } = cell;
 
   const className = getCellCssClass(cell);

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

@@ -28,36 +28,21 @@ export default function App() {
   const [showWeekNumbers, setShowWeekNumbers] = useState(false);
   const [firstDay, setFirstDay] = useState(0);
   const [weekNumberRule, setWeekNumberRule] = useState('auto');
-  const onCurrentValueChange = useCallback(
-    ({ value }) => {
-      setCurrentValue(value);
-    },
-    [setCurrentValue],
-  );
-  const onDisabledChange = useCallback(
-    ({ value }) => {
-      setDisabled(value);
-    },
-    [setDisabled],
-  );
-  const onZoomLevelChange = useCallback(
-    ({ value }) => {
-      setZoomLevel(value);
-    },
-    [setZoomLevel],
-  );
-  const onFirstDayChange = useCallback(
-    ({ value }) => {
-      setFirstDay(value);
-    },
-    [setFirstDay],
-  );
-  const onWeekNumberRuleChange = useCallback(
-    ({ value }) => {
-      setWeekNumberRule(value);
-    },
-    [setWeekNumberRule],
-  );
+  const onCurrentValueChange = useCallback(({ value }) => {
+    setCurrentValue(value);
+  }, []);
+  const onDisabledChange = useCallback(({ value }) => {
+    setDisabled(value);
+  }, []);
+  const onZoomLevelChange = useCallback(({ value }) => {
+    setZoomLevel(value);
+  }, []);
+  const onFirstDayChange = useCallback(({ value }) => {
+    setFirstDay(value);
+  }, []);
+  const onWeekNumberRuleChange = useCallback(({ value }) => {
+    setWeekNumberRule(value);
+  }, []);
   const onShowWeekNumbersChange = useCallback(
     ({ value }) => {
       setShowWeekNumbers(value);
@@ -73,7 +58,7 @@ export default function App() {
   const onOptionChange = useCallback(
     (e) => {
       if (e.name === 'zoomLevel') {
-        onZoomLevelChange(e);
+        onZoomLevelChange({ value: e.value });
       }
     },
     [onZoomLevelChange],

apps/demos/Demos/Chat/AIAndChatbotIntegration/React/App.tsx

@@ -19,11 +19,14 @@ loadMessages({
 
 export default function App() {
   const {
-    alerts, insertMessage, fetchAIResponse, regenerateLastAIResponse,
+    alerts,
+    insertMessage,
+    fetchAIResponse,
+    regenerateLastAIResponse,
   } = useApi();
 
   const [typingUsers, setTypingUsers] = useState<ChatTypes.User[]>([]);
-  const [isProcessing, setIsProcessing] = useState(false);
+  const [isProcessing, setIsProcessing] = useState<boolean>(false);
 
   const processAIRequest = useCallback(async (message: ChatTypes.Message): Promise<void> => {
     setIsProcessing(true);