Fix TS in Vue demos. Localization, Diagram, Gantt, File Manager (#30912)

GoodDayForSurf · web-flow · commit f1628ca302a6 · 2025-09-26T15:40:06.000+04:00
diff --git a/apps/demos/Demos/Diagram/AdvancedDataBinding/Vue/App.vue b/apps/demos/Demos/Diagram/AdvancedDataBinding/Vue/App.vue
@@ -50,32 +50,32 @@ const orgLinksDataSource = new ArrayStore({
 const linkStyleExpr = () => ({ stroke: '#444444' });
 const linkFromLineEndExpr = () => 'none';
 const linkToLineEndExpr = () => 'none';
-const itemTextStyleExpr = (obj) => (obj.level === 'senior'
+const itemTextStyleExpr = (obj: any) => (obj.level === 'senior'
   ? { 'font-weight': 'bold', 'text-decoration': 'underline' }
   : {}
 );
-const itemStyleExpr = ({ type }) => ({
+const itemStyleExpr = ({ type }: { type: string }) => ({
   stroke: '#444444',
   ...(type === 'group' ? { fill: '#f3f3f3' } : {}),
 });
 
-function itemTypeExpr(obj, value) {
+function itemTypeExpr(obj: any, value: any) {
   if (value) {
     obj.type = (value === 'rectangle') ? undefined : 'group';
   } else {
     return obj.type === 'group' ? 'ellipse' : 'rectangle';
   }
   return null;
 }
-function itemWidthExpr(obj, value) {
+function itemWidthExpr(obj: any, value: any) {
   if (value) {
     obj.width = value;
   } else {
     return obj.width || (obj.type === 'group' && 1.5) || 1;
   }
   return null;
 }
-function itemHeightExpr(obj, value) {
+function itemHeightExpr(obj: any, value: any) {
   if (value) {
     obj.height = value;
   } else {
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue
@@ -67,9 +67,9 @@ const dataSource = new ArrayStore({
 });
 const currentEmployee = ref({} as Record<string, any>);
 const popupVisible = ref(false);
-const itemTypeExpr = ({ ID }) => `employee${ID}`;
+const itemTypeExpr = ({ ID }: any) => `employee${ID}`;
 
-function showInfo(employee) {
+function showInfo(employee: any) {
   currentEmployee.value = employee;
   popupVisible.value = true;
 }
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue
@@ -163,20 +163,21 @@ import {
   DxGroup,
   DxTab,
   DxToolbox,
+  type DxDiagramTypes,
 } from 'devextreme-vue/diagram';
 import { DxPopup } from 'devextreme-vue/popup';
 import DxTextBox from 'devextreme-vue/text-box';
 import DxButton from 'devextreme-vue/button';
 import { ArrayStore } from 'devextreme-vue/common/data';
 import CustomShapeTemplate from './CustomShapeTemplate.vue';
 import CustomShapeToolboxTemplate from './CustomShapeToolboxTemplate.vue';
-import service from './data.ts';
+import service, { type Employee } from './data.ts';
 
 let generatedID = 100;
 const dataSource = new ArrayStore({
   key: 'ID',
   data: service.getEmployees(),
-  onInserting(values) {
+  onInserting(values: Employee) {
     values.ID = values.ID || (generatedID += 1);
     values.Full_Name = values.Full_Name || "Employee's Name";
     values.Title = values.Title || "Employee's Title";
@@ -186,14 +187,14 @@ const currentEmployee = ref({} as Record<string, any>);
 const popupVisible = ref(false);
 
 const itemTypeExpr = () => 'employee';
-function itemCustomDataExpr(obj, value) {
+function itemCustomDataExpr(obj: any, value: any) {
   if (value === undefined) {
     return { ...obj };
   }
   Object.assign(obj, value);
   return null;
 }
-function onRequestLayoutUpdate(e) {
+function onRequestLayoutUpdate(e: DxDiagramTypes.RequestLayoutUpdateEvent) {
   for (let i = 0; i < e.changes.length; i += 1) {
     if (e.changes[i].type === 'remove') {
       e.allowed = true;
@@ -202,21 +203,13 @@ function onRequestLayoutUpdate(e) {
     }
   }
 }
-function editEmployee(employee) {
+function editEmployee(employee: Employee) {
   currentEmployee.value = {
-    Full_Name: '',
-    Prefix: '',
-    Title: '',
-    City: '',
-    State: '',
-    Email: '',
-    Skype: '',
-    Mobile_Phone: '',
     ...employee,
   };
   popupVisible.value = true;
 }
-function deleteEmployee(employee) {
+function deleteEmployee(employee: Employee) {
   dataSource.push([{ type: 'remove', key: employee.ID }]);
 }
 function updateEmployee() {
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/data.ts b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/data.ts
@@ -1,4 +1,19 @@
-const employees = [{
+export interface Employee {
+  ID: number,
+  Head_ID: number,
+  Full_Name: string,
+  Prefix: string,
+  Title: string,
+  City: string,
+  State: string,
+  Email: string,
+  Skype: string,
+  Mobile_Phone: string,
+  Birth_Date: string,
+  Hire_Date: string,
+}
+
+const employees: Employee[] = [{
   ID: 1,
   Head_ID: 0,
   Full_Name: 'John Heart',
diff --git a/apps/demos/Demos/Diagram/ItemSelection/Vue/App.vue b/apps/demos/Demos/Diagram/ItemSelection/Vue/App.vue
@@ -53,11 +53,11 @@ function onContentReady(e: DxDiagramTypes.ContentReadyEvent) {
     diagram.focus();
   }
 }
-function onSelectionChanged({ items }) {
+function onSelectionChanged({ items }: DxDiagramTypes.SelectionChangedEvent) {
   selectedItemNames.value = 'Nobody has been selected';
   const filteredItems = items
     .filter((item) => item.itemType === 'shape')
-    .map((item) => item.text);
+    .map(({text}: Record<string, any>) => text);
   if (filteredItems.length > 0) {
     selectedItemNames.value = filteredItems.join(', ');
   }
diff --git a/apps/demos/Demos/Diagram/OperationRestrictions/Vue/App.vue b/apps/demos/Demos/Diagram/OperationRestrictions/Vue/App.vue
@@ -76,14 +76,14 @@ const orgItemsDataSource = new ArrayStore({
 });
 const shapes = ['team', 'employee'] as unknown as DxDiagramTypes.ShapeType[];
 
-const itemStyleExpr = ({ Type }) => ({
+const itemStyleExpr = ({ Type }: Record<string, string>) => ({
   fill: {
     root: '#ffcfc3',
     team: '#b7e3fe',
   }[Type] || '#bbefcb',
 }
 );
-function showToast(text) {
+function showToast(text: string) {
   notify({
     position: {
       at: 'top', my: 'top', of: '#diagram', offset: '0 4',
@@ -93,7 +93,7 @@ function showToast(text) {
     delayTime: 2000,
   });
 }
-function onRequestLayoutUpdate(e) {
+function onRequestLayoutUpdate(e: DxDiagramTypes.RequestLayoutUpdateEvent) {
   for (let i = 0; i < e.changes.length; i += 1) {
     if (e.changes[i].type === 'remove') {
       e.allowed = true;
@@ -103,7 +103,7 @@ function onRequestLayoutUpdate(e) {
     }
   }
 }
-function onRequestEditOperation(e) {
+function onRequestEditOperation(e: Record<string, any>) {
   let i;
 
   if (e.operation === 'addShape') {
diff --git a/apps/demos/Demos/Diagram/UICustomization/Vue/App.vue b/apps/demos/Demos/Diagram/UICustomization/Vue/App.vue
@@ -113,6 +113,7 @@ import {
   DxMainToolbar,
   DxCommand,
   DxToolbox,
+  type DxDiagramTypes,
 } from 'devextreme-vue/diagram';
 import { confirm } from 'devextreme/ui/dialog';
 import 'whatwg-fetch';
@@ -131,7 +132,7 @@ watch(diagram,
       });
   });
 
-function onCustomCommand(e) {
+function onCustomCommand(e: DxDiagramTypes.CustomCommandEvent) {
   if (e.name === 'clear') {
     const result = confirm('Are you sure you want to clear the diagram? This action cannot be undone.', 'Warning');
     result.then(
diff --git a/apps/demos/Demos/FileManager/BindingToEF/Vue/App.vue b/apps/demos/Demos/FileManager/BindingToEF/Vue/App.vue
@@ -44,5 +44,5 @@ import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider
 const remoteProvider = new RemoteFileSystemProvider({
   endpointUrl: 'https://js.devexpress.com/Demos/NetCore/api/file-manager-db',
 });
-const allowedFileExtensions = [];
+const allowedFileExtensions: string[] = [];
 </script>
diff --git a/apps/demos/Demos/FileManager/CustomThumbnails/Vue/App.vue b/apps/demos/Demos/FileManager/CustomThumbnails/Vue/App.vue
@@ -19,9 +19,10 @@
 
 <script setup lang="ts">
 import { DxFileManager, DxPermissions, DxItemView } from 'devextreme-vue/file-manager';
+import FileSystemItem from "devextreme/file_management/file_system_item";
 import { fileItems } from './data.ts';
 
-function customizeIcon(fileSystemItem) {
+function customizeIcon(fileSystemItem: FileSystemItem) {
   if (fileSystemItem.isDirectory) {
     return '../../../../images/thumbnails/folder.svg';
   }
diff --git a/apps/demos/Demos/FileManager/Overview/Vue/App.vue b/apps/demos/Demos/FileManager/Overview/Vue/App.vue
@@ -34,7 +34,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { DxFileManager, DxPermissions } from 'devextreme-vue/file-manager';
+import { DxFileManager, DxPermissions, type DxFileManagerTypes } from 'devextreme-vue/file-manager';
 import { DxPopup } from 'devextreme-vue/popup';
 import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider';
 
@@ -44,7 +44,7 @@ const imageItemToDisplay = ref({} as Record<string, any>);
 const remoteProvider = new RemoteFileSystemProvider({
   endpointUrl: 'https://js.devexpress.com/Demos/NetCore/api/file-manager-file-system-images',
 });
-function displayImagePopup(e) {
+function displayImagePopup(e: DxFileManagerTypes.SelectedFileOpenedEvent) {
   imageItemToDisplay.value = {
     name: e.file.name,
     url: e.file.dataItem.url,
diff --git a/apps/demos/Demos/FileManager/UICustomization/Vue/App.vue b/apps/demos/Demos/FileManager/UICustomization/Vue/App.vue
@@ -95,6 +95,7 @@ import {
   DxFileManager, DxPermissions, DxToolbar, DxContextMenu, DxItem,
   DxFileSelectionItem, DxItemView, DxDetails, DxColumn, type DxFileManagerTypes,
 } from 'devextreme-vue/file-manager';
+import FileSystemItem from 'devextreme/file_management/file_system_item';
 import { fileItems, getItemInfo } from './data.ts';
 
 const newFileMenuOptions = getNewFileMenuOptions();
@@ -107,7 +108,7 @@ function onItemClick({ itemData, viewArea, fileSystemItem }: DxFileManagerTypes.
 
   if (extension) {
     updated = createFile(extension, fileSystemItem);
-  } else if (category !== undefined) {
+  } else if (category !== undefined && fileSystemItem) {
     updated = updateCategory(category, fileSystemItem, viewArea);
   }
 
@@ -116,7 +117,7 @@ function onItemClick({ itemData, viewArea, fileSystemItem }: DxFileManagerTypes.
   }
 }
 
-function createFile(fileExtension, directory = fileManager.value.instance.getCurrentDirectory()) {
+function createFile(fileExtension: string, directory: any = fileManager.value.instance.getCurrentDirectory()) {
   const newItem = {
     __KEY__: Date.now(),
     name: `New file${fileExtension}`,
@@ -128,7 +129,7 @@ function createFile(fileExtension, directory = fileManager.value.instance.getCur
     return false;
   }
 
-  let array = null;
+  let array: Record<string, unknown>[];
   if (!directory.dataItem) {
     array = fileItems;
   } else {
@@ -142,16 +143,16 @@ function createFile(fileExtension, directory = fileManager.value.instance.getCur
   array.push(newItem);
   return true;
 }
-function updateCategory(newCategory, directory, viewArea) {
-  let items = null;
+function updateCategory(newCategory: string, directory: FileSystemItem, viewArea: string) {
+  let items: FileSystemItem[] = [];
 
   if (viewArea === 'navPane') {
     items = [directory];
   } else {
     items = fileManager.value.instance.getSelectedItems();
   }
 
-  items.forEach((item) => {
+  items.forEach((item: FileSystemItem) => {
     if (item.dataItem) {
       item.dataItem.category = newCategory;
     }
diff --git a/apps/demos/Demos/FileManager/UICustomization/Vue/data.ts b/apps/demos/Demos/FileManager/UICustomization/Vue/data.ts
@@ -67,7 +67,7 @@ export const fileItems = [{
   size: 2048,
 }];
 
-const fileExtensions = {
+const fileExtensions: Record<string, string> = {
   'Text Document': '.txt',
   'RTF Document': '.rtf',
   Spreadsheet: '.xls',
diff --git a/apps/demos/Demos/Gantt/Appearance/Vue/App.vue b/apps/demos/Demos/Gantt/Appearance/Vue/App.vue
@@ -151,6 +151,7 @@ import {
   dependencies,
   resources,
   resourceAssignments,
+  type Task,
 } from './data.ts';
 
 const scaleType = ref<GanttScaleType>('months');
@@ -161,10 +162,10 @@ const showCustomTaskTooltip = ref(true);
 const startDateRange = ref(new Date(2018, 11, 1));
 const endDateRange = ref(new Date(2019, 11, 1));
 
-const getTime = (date) => date.toLocaleString();
-const getTimeEstimate = (task) => Math.abs(task.start - task.end) / 36e5;
-function getTimeLeft(task) {
-  const timeEstimate = Math.abs(task.start - task.end) / 36e5;
+const getTime = (date: Date) => date.toLocaleString();
+const getTimeEstimate = (task: Task) => Math.abs(task.start.getTime() - task.end.getTime()) / 36e5;
+function getTimeLeft(task: Task) {
+  const timeEstimate = Math.abs(task.start.getTime() - task.end.getTime()) / 36e5;
   return Math.floor(((100 - task.progress) / 100) * timeEstimate);
 }
 </script>
diff --git a/apps/demos/Demos/Gantt/Appearance/Vue/data.ts b/apps/demos/Demos/Gantt/Appearance/Vue/data.ts
@@ -1,3 +1,12 @@
+export interface Task {
+  id: number,
+  parentId: number,
+  title: string,
+  start: Date,
+  end: Date,
+  progress: number,
+}
+
 export const tasks = [{
   id: 1,
   parentId: 0,
diff --git a/apps/demos/Demos/Gantt/ContextMenu/Vue/App.vue b/apps/demos/Demos/Gantt/ContextMenu/Vue/App.vue
@@ -67,7 +67,7 @@ import {
   DxContextMenu,
   type DxGanttTypes
 } from 'devextreme-vue/gantt';
-import DxCheckBox from 'devextreme-vue/check-box';
+import DxCheckBox, { type DxCheckBoxTypes } from 'devextreme-vue/check-box';
 import {
   tasks,
   dependencies,
@@ -85,19 +85,19 @@ const contextMenuItems = [
     name: 'ToggleDisplayOfResources',
     text: 'Toggle Display of Resources',
   },
-] as DxGanttTypes.GanttPredefinedContextMenuItem[];
-const contextMenuActualItems = ref(contextMenuItems);
+] as DxGanttTypes.ContextMenuItem[];
+const contextMenuActualItems = ref<DxGanttTypes.ContextMenuItem[] | undefined>(contextMenuItems);
 
-function onContextMenuPreparing(e) {
+function onContextMenuPreparing(e: DxGanttTypes.ContextMenuPreparingEvent) {
   e.cancel = disableContextMenu.value;
 }
-function onCustomizeContextMenu(e) {
-  contextMenuActualItems.value = e.value ? contextMenuItems : null;
+function onCustomizeContextMenu(e: DxCheckBoxTypes.ValueChangedEvent) {
+  contextMenuActualItems.value = e.value ? contextMenuItems : undefined;
 }
-function onPreventContextMenuShowing(e) {
+function onPreventContextMenuShowing(e: DxCheckBoxTypes.ValueChangedEvent) {
   disableContextMenu.value = e.value;
 }
-function onCustomCommandClick(e) {
+function onCustomCommandClick(e: DxGanttTypes.CustomCommandEvent) {
   if (e.name === 'ToggleDisplayOfResources') {
     showResources.value = !showResources.value;
   }
diff --git a/apps/demos/Demos/Gantt/ExportToPDF/Vue/App.vue b/apps/demos/Demos/Gantt/ExportToPDF/Vue/App.vue
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue b/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue
diff --git a/apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue b/apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue
diff --git a/apps/demos/Demos/Localization/UsingIntl/Vue/App.vue b/apps/demos/Demos/Localization/UsingIntl/Vue/App.vue
diff --git a/apps/demos/tsconfig.vue-check.json b/apps/demos/tsconfig.vue-check.json

Original file line number	Diff line number	Diff line change
`@@ -53,11 +53,11 @@ function onContentReady(e: DxDiagramTypes.ContentReadyEvent) {`
`53`	`53`	`diagram.focus();`
`54`	`54`	`}`
`55`	`55`	`}`
`56`		`-function onSelectionChanged({ items }) {`
	`56`	`+function onSelectionChanged({ items }: DxDiagramTypes.SelectionChangedEvent) {`
`57`	`57`	`selectedItemNames.value = 'Nobody has been selected';`
`58`	`58`	`const filteredItems = items`
`59`	`59`	`.filter((item) => item.itemType === 'shape')`
`60`		`- .map((item) => item.text);`
	`60`	`+ .map(({text}: Record<string, any>) => text);`
`61`	`61`	`if (filteredItems.length > 0) {`
`62`	`62`	`selectedItemNames.value = filteredItems.join(', ');`
`63`	`63`	`}`