fix TS in Vue demos. Editors (strict TS mode) (#31159)

Author: GoodDayForSurf

apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue

@@ -159,14 +159,21 @@ function alertLimitReached(): void {
 
 async function regenerate(): Promise<void> {
   toggleDisabledState(true);
-
+  const lastMessage = messages.at(-1);
+  
   try {
     const aiResponse = await getAIResponse(messages.slice(0, -1));
 
     updateLastMessage(aiResponse);
-    messages.at(-1).content = aiResponse;
+    
+    if (lastMessage?.content) {
+      lastMessage.content = aiResponse;
+    }
   } catch {
-    updateLastMessage(messages.at(-1).content);
+    if (lastMessage?.content) {
+      updateLastMessage(lastMessage.content);
+    }
+    
     alertLimitReached();
   } finally {
     toggleDisabledState(false);

apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts

@@ -38,7 +38,7 @@ export const assistant = {
 export const messages: DxChatTypes.Message[] = [];
 const store: DxChatTypes.Message[] = [];
 
-const customStore = new CustomStore({
+const customStore = new CustomStore<DxChatTypes.Message>({
   key: 'id',
   load: () => new Promise((resolve) => {
     setTimeout(() => {

apps/demos/Demos/Chat/MessageEditing/Vue/App.vue

@@ -112,7 +112,7 @@ const editingStrategy: Record<string, boolean | ((options: CustomStrategyOptions
   enabled: true,
   disabled: false,
   custom: ({ component, message }: CustomStrategyOptions) => {
-    if (!component) return;
+    if (!component) return false;
     
     const { items, user } = component.option();
     const userId = user?.id;

apps/demos/Demos/Form/Adaptability/Vue/App.vue

@@ -29,7 +29,7 @@ import employee from './data.ts';
 const calculateColCountAutomatically = ref(false);
 
 const colCountByScreen = computed(() => (calculateColCountAutomatically.value
-  ? null
+  ? undefined
   : {
     sm: 2,
     md: 4,

apps/demos/Demos/Form/Overview/Vue/App.vue

@@ -100,7 +100,7 @@ const showColon = ref(true);
 const minColWidth = ref(300);
 const colCount = ref(2);
 const companyName = ref(companies[0].Name);
-const width = ref(null);
+const width = ref();
 
 const company = computed(() => companies.find(({ Name }) => Name === companyName.value));
 

apps/demos/Demos/Map/Markers/Vue/App.vue

@@ -36,13 +36,13 @@ import DxButton from 'devextreme-vue/button';
 import { markersData } from './data.ts';
 
 const markerUrl = 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/maps/map-marker.png';
-const markersIcon = ref<string | null>(markerUrl);
+const markersIcon = ref<string | undefined>(markerUrl);
 const apiKey = {
   azure: '6N8zuPkBsnfwniNAJkldM3cUgm3lXg3y9gkIKy59benICnnepK4DJQQJ99AIACYeBjFllM6LAAAgAZMPGFXE',
 };
 const markers = ref<Record<string, any>[]>(markersData);
 function useCustomMarkers(data: DxCheckBoxTypes.ValueChangedEvent) {
-  markersIcon.value = data.value ? markerUrl : null;
+  markersIcon.value = data.value ? markerUrl : undefined;
   markers.value = markersData;
 }
 function showTooltips() {

apps/demos/Demos/TextArea/Overview/Vue/App.vue

@@ -67,7 +67,7 @@ import DxSelectBox from 'devextreme-vue/select-box';
 import service from './data.ts';
 
 const eventValue = ref(service.valueChangeEvents[0].name);
-const maxLength = ref<number | null>();
+const maxLength = ref<number>();
 const value = ref(service.getContent());
 const valueForEditableTextArea = ref(service.getContent());
 const valueChangeEvents = service.valueChangeEvents;
@@ -77,7 +77,7 @@ const height = ref<number | undefined>(90);
 function onCheckboxValueChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
   const str = service.getContent();
   value.value = e.value ? str.substring(0, 100) : str;
-  maxLength.value = e.value ? 100 : null;
+  maxLength.value = e.value ? 100 : undefined;
 }
 
 function onAutoResizeChanged(e: DxCheckBoxTypes.ValueChangedEvent) {

apps/demos/tsconfig.vue-check.json

@@ -2,7 +2,7 @@
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
     "lib": ["es2023", "DOM", "DOM.Iterable"],
-    "strict": false
+    "strict": true
   },
   "include": [
     "Demos/Chat/**/Vue/**/*.vue",