Demos: Fix TS problems and make TS improvements in demos in strict mode (Editors) (#32079) (#32097)

Signed-off-by: Andrei Kharitonov <[email protected]>

Author: pharret31

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

@@ -23,9 +23,11 @@ const clientsStore = new CustomStore({
   useDefaultSearch: true,
   load: (loadOptions: LoadOptions) => {
     let params = '?';
-    ['skip', 'take', 'filter'].forEach((option: string): void => {
+    type LoadOptionKey = keyof LoadOptions;
+    const loadOptionKeys: LoadOptionKey[] = ['skip', 'take', 'filter'];
+    loadOptionKeys.forEach((option: LoadOptionKey): void => {
       if (option in loadOptions && isNotEmpty(loadOptions[option])) {
-        params += `${option}=${JSON.stringify(loadOptions[option])}&`;
+        params += `${option as string}=${JSON.stringify(loadOptions[option])}&`;
       }
     });
     params = params.slice(0, -1);

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

@@ -19,7 +19,8 @@ const clientsStore = new CustomStore({
   useDefaultSearch: true,
   load: (loadOptions) => {
     let params = '?';
-    ['skip', 'take', 'filter'].forEach((option) => {
+    const loadOptionKeys = ['skip', 'take', 'filter'];
+    loadOptionKeys.forEach((option) => {
       if (option in loadOptions && isNotEmpty(loadOptions[option])) {
         params += `${option}=${JSON.stringify(loadOptions[option])}&`;
       }

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

@@ -66,7 +66,7 @@ export default function App() {
           min={minDateValue}
           max={maxDateValue}
           defaultValue={initialValue}
-          disabledDates={weekendDisabled ? isDateDisabled : null}
+          disabledDates={weekendDisabled ? isDateDisabled : undefined}
         />
       </div>
       <div className="options">

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

@@ -65,7 +65,7 @@ export default function App() {
           min={minDateValue}
           max={maxDateValue}
           defaultValue={initialValue}
-          disabledDates={weekendDisabled ? isDateDisabled : null}
+          disabledDates={weekendDisabled ? isDateDisabled : undefined}
         />
       </div>
       <div className="options">

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

@@ -27,7 +27,7 @@ const ruleLabel = { 'aria-label': 'Week Number Rule' };
 
 export default function App() {
   const [zoomLevel, setZoomLevel] = useState<CalendarTypes.CalendarZoomLevel>('month');
-  const [currentValue, setCurrentValue] = useState<Date>(new Date());
+  const [currentValue, setCurrentValue] = useState<Date | undefined>(new Date());
   const [useCellTemplate, setUseCellTemplate] = useState<boolean | null>(null);
   const [disabled, setDisabled] = useState<boolean>(false);
   const [showWeekNumbers, setShowWeekNumbers] = useState<boolean>(false);
@@ -104,7 +104,7 @@ export default function App() {
           showWeekNumbers={showWeekNumbers}
           disabled={disabled}
           zoomLevel={zoomLevel}
-          cellComponent={useCellTemplate ? CustomCell : null}
+          cellComponent={useCellTemplate ? CustomCell : undefined}
         />
       </div>
       <div className="options">

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

@@ -75,7 +75,7 @@ export default function App() {
           showWeekNumbers={showWeekNumbers}
           disabled={disabled}
           zoomLevel={zoomLevel}
-          cellComponent={useCellTemplate ? CustomCell : null}
+          cellComponent={useCellTemplate ? CustomCell : undefined}
         />
       </div>
       <div className="options">

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import Chat, { type ChatTypes } from 'devextreme-react/chat';
+import Chat from 'devextreme-react/chat';
+import type { ChatTypes } from 'devextreme-react/chat';
 import { loadMessages } from 'devextreme-react/common/core/localization';
 import {
   user,
@@ -42,11 +43,11 @@ export default function App() {
     insertMessage({ id: Date.now(), ...message });
 
     if (!alerts.length) {
-      (event.target as HTMLElement).blur();
+      (event?.target as HTMLElement).blur();
 
       await processAIRequest(message);
 
-      (event.target as HTMLElement).focus();
+      (event?.target as HTMLElement).focus();
     }
   }, [insertMessage, alerts.length, processAIRequest]);
 

apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts

@@ -1,10 +1,13 @@
 import { useCallback, useState } from 'react';
 import { AzureOpenAI, OpenAI } from 'openai';
-import { type ChatTypes } from 'devextreme-react/chat';
+import type { ChatTypes } from 'devextreme-react/chat';
 import { CustomStore, DataSource } from 'devextreme-react/common/data';
+import type { AIResponse } from 'devextreme/common/ai-integration';
 import {
-  ALERT_TIMEOUT, assistant,
-  AzureOpenAIConfig, REGENERATION_TEXT,
+  ALERT_TIMEOUT,
+  assistant,
+  AzureOpenAIConfig,
+  REGENERATION_TEXT,
 } from './data.ts';
 
 type Message = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionAssistantMessageParam) & {
@@ -14,11 +17,11 @@ type Message = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionAss
 const chatService = new AzureOpenAI(AzureOpenAIConfig);
 
 const wait = (delay: number): Promise<void> =>
-  new Promise((resolve) => {
+  new Promise((resolve): void => {
     setTimeout(resolve, delay);
   });
 
-export async function getAIResponse(messages: Message[], delay?: number): Promise<string> {
+export async function getAIResponse(messages: Message[], delay?: number): Promise<AIResponse> {
   const params = {
     messages,
     model: AzureOpenAIConfig.deployment,
@@ -33,7 +36,7 @@ export async function getAIResponse(messages: Message[], delay?: number): Promis
     await wait(delay);
   }
 
-  return data.choices[0].message?.content;
+  return data.choices[0].message?.content ?? '';
 }
 
 const store: ChatTypes.Message[] = [];
@@ -59,7 +62,7 @@ export const dataSource = new DataSource({
 });
 
 const dataItemToMessage = (item: ChatTypes.Message): Message => ({
-  role: item.author.id as Message['role'],
+  role: item.author?.id as Message['role'],
   content: item.text,
 });
 
@@ -116,9 +119,11 @@ export const useApi = () => {
     try {
       const aiResponse = await getAIResponse(messageHistory.slice(0, -1));
 
-      updateLastMessageContent(aiResponse);
+      if (typeof aiResponse === 'string') {
+        updateLastMessageContent(aiResponse);
+      }
     } catch {
-      updateLastMessageContent(messageHistory.at(-1)?.content);
+      updateLastMessageContent(messageHistory.at(-1)?.content as string);
       alertLimitReached();
     }
   }, [alertLimitReached, updateLastMessageContent]);

apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/App.js

@@ -32,9 +32,9 @@ export default function App() {
     async ({ message, event }) => {
       insertMessage({ id: Date.now(), ...message });
       if (!alerts.length) {
-        event.target.blur();
+        (event?.target).blur();
         await processAIRequest(message);
-        event.target.focus();
+        (event?.target).focus();
       }
     },
     [insertMessage, alerts.length, processAIRequest],

apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js

@@ -22,7 +22,7 @@ export async function getAIResponse(messages, delay) {
   if (delay) {
     await wait(delay);
   }
-  return data.choices[0].message?.content;
+  return data.choices[0].message?.content ?? '';
 }
 const store = [];
 const customStore = new CustomStore({
@@ -46,7 +46,7 @@ export const dataSource = new DataSource({
   paginate: false,
 });
 const dataItemToMessage = (item) => ({
-  role: item.author.id,
+  role: item.author?.id,
   content: item.text,
 });
 const getMessageHistory = () => [...dataSource.items()].map(dataItemToMessage);
@@ -97,7 +97,9 @@ export const useApi = () => {
     updateLastMessageContent(REGENERATION_TEXT);
     try {
       const aiResponse = await getAIResponse(messageHistory.slice(0, -1));
-      updateLastMessageContent(aiResponse);
+      if (typeof aiResponse === 'string') {
+        updateLastMessageContent(aiResponse);
+      }
     } catch {
       updateLastMessageContent(messageHistory.at(-1)?.content);
       alertLimitReached();