Fix TS in Vue demos (DevExpress#29266)

Author: GoodDayForSurf

apps/demos/Demos/Charts/ClientSideDataProcessing/Vue/App.vue

@@ -44,7 +44,7 @@ import DxChart, {
   DxSize,
   DxLoadingIndicator,
 } from 'devextreme-vue/chart';
-import DxSelectBox from 'devextreme-vue/select-box';
+import DxSelectBox, { type DxSelectBoxTypes } from 'devextreme-vue/select-box';
 import DataSource from 'devextreme/data/data_source';
 import CustomStore from 'devextreme/data/custom_store';
 
@@ -65,7 +65,7 @@ const monthWeather = new DataSource({
 
 const customizeLabelText = ({ valueText }) => `${valueText}${'&#176C'}`;
 
-function changeTemperature({ value }) {
+function changeTemperature({ value }: DxSelectBoxTypes.ValueChangedEvent) {
   monthWeather.filter(['t', '>', value]);
   monthWeather.load();
 }

apps/demos/Demos/Charts/Palette/Vue/data.ts

@@ -1,7 +1,8 @@
 import { type DxPieChartTypes } from 'devextreme-vue/pie-chart';
+import { type PaletteExtensionMode } from 'devextreme-vue/common/charts';
 
 export const paletteCollection: DxPieChartTypes.Palette[] = ['Material', 'Soft Pastel', 'Harmony Light', 'Pastel', 'Bright', 'Soft', 'Ocean', 'Office', 'Vintage', 'Violet', 'Carmine', 'Dark Moon', 'Soft Blue', 'Dark Violet', 'Green Mist'];
-export const paletteExtensionModes = ['alternate', 'blend', 'extrapolate'];
+export const paletteExtensionModes: PaletteExtensionMode[] = ['alternate', 'blend', 'extrapolate'];
 
 const data = [];
 for (let i = 0; i < 20; i += 1) {

apps/demos/Demos/Charts/PieWithResolvedLabelOverlapping/Vue/App.vue

@@ -43,12 +43,13 @@ import DxPieChart, {
   DxExport,
   DxLegend,
   DxAnimation,
+  type DxPieChartTypes,
 } from 'devextreme-vue/pie-chart';
 import DxSelectBox from 'devextreme-vue/select-box';
 import { dataSource } from './data.ts';
 
-const resolveModes = ['shift', 'hide', 'none'];
-const resolveMode = ref('shift');
+const resolveModes: DxPieChartTypes.ShiftLabelOverlap[] = ['shift', 'hide', 'none'];
+const resolveMode = ref(resolveModes[0]);
 const formatText = ({ argumentText, percentText }) => `${argumentText} (${percentText})`;
 </script>
 

apps/demos/Demos/Charts/ServerSideDataProcessing/Vue/App.vue

@@ -68,7 +68,7 @@ import DxChart, {
   DxExport,
   DxLoadingIndicator,
 } from 'devextreme-vue/chart';
-import DxSelectBox from 'devextreme-vue/select-box';
+import DxSelectBox, { type DxSelectBoxTypes } from 'devextreme-vue/select-box';
 import DataSource from 'devextreme/data/data_source';
 import 'devextreme/data/odata/store';
 import { months } from './data.ts';
@@ -90,7 +90,7 @@ const customizeLabelText = ({ valueText }) => `${valueText}${'&#176C'}`;
 const customizeTooltip = ({ valueText }) => ({
   text: `${valueText}${'&#176C'}`,
 });
-function onValueChanged({ value }) {
+function onValueChanged({ value }: DxSelectBoxTypes.ValueChangedEvent) {
   chartDataSource.filter(['Id', '=', value]);
   chartDataSource.load();
 }

apps/demos/Demos/Common/NavigationOverview/Vue/App.vue

@@ -82,14 +82,14 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import DxTabPanel from 'devextreme-vue/tab-panel';
-import DxTreeView from 'devextreme-vue/tree-view';
+import DxTreeView, { type DxTreeViewTypes } from 'devextreme-vue/tree-view';
 import { continents } from './data.ts';
 
 const tabPanelIndex = ref(0);
-const countryData = ref(continents[0].items[0]);
+const countryData = ref<Record<string, any>>(continents[0].items[0]);
 const citiesData = ref(continents[0].items[0].cities);
 
-function changeSelection({ itemData }) {
+function changeSelection({ itemData }: DxTreeViewTypes.ItemSelectionChangedEvent) {
   if (itemData.cities) {
     countryData.value = itemData;
     citiesData.value = itemData.cities;

apps/demos/Demos/DataGrid/BatchEditing/Vue/App.vue

@@ -72,13 +72,14 @@ import {
   DxPaging,
   DxEditing,
   DxLookup,
+  type DxDataGridTypes,
 } from 'devextreme-vue/data-grid';
 import DxSelectBox from 'devextreme-vue/select-box';
 import DxCheckBox from 'devextreme-vue/check-box';
 import { employees, states } from './data.ts';
 
 const selectTextOnEditStart = ref(true);
-const startEditAction = ref('click');
+const startEditAction = ref<DxDataGridTypes.StartEditAction>('click');
 </script>
 <style>
 #data-grid-demo {

apps/demos/Demos/DataGrid/ColumnResizing/Vue/App.vue

@@ -29,13 +29,14 @@
 import { ref } from 'vue';
 import {
   DxDataGrid,
+  type DxDataGridTypes,
 } from 'devextreme-vue/data-grid';
 import DxSelectBox from 'devextreme-vue/select-box';
 import { orders } from './data.ts';
 
 const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
-const resizingModes = ['nextColumn', 'widget'];
-const currentMode = ref('nextColumn');
+const resizingModes: DxDataGridTypes.ColumnResizeMode[] = ['nextColumn', 'widget'];
+const currentMode = ref(resizingModes[0]);
 
 </script>
 <style scoped>

apps/demos/Demos/DataGrid/CustomEditors/Vue/App.vue

@@ -146,9 +146,9 @@ const onRowInserted = (e: DxDataGridTypes.RowInsertedEvent) => {
 function calculateFilterExpression(
   this: DxDataGridTypes.Column,
   filterValue: any,
-  selectedFilterOperations: string | null,
+  selectedFilterOperations: string,
   target: string,
-) {
+): any {
   if (target === 'search' && typeof filterValue === 'string') {
     return [this.dataField, 'contains', filterValue];
   }

apps/demos/Demos/DataGrid/CustomNewRecordPosition/Vue/App.vue

@@ -101,10 +101,10 @@ import DxSelectBox from 'devextreme-vue/select-box';
 import Guid from 'devextreme/core/guid';
 import { dataSource } from './data.ts';
 
-const newRowPositionOptions = ['first', 'last', 'pageTop', 'pageBottom', 'viewportTop', 'viewportBottom'];
+const newRowPositionOptions: DxDataGridTypes.NewRowPosition[] = ['first', 'last', 'pageTop', 'pageBottom', 'viewportTop', 'viewportBottom'];
 const scrollingModeOptions = ['standard', 'virtual'];
 
-const newRowPosition = ref('viewportTop');
+const newRowPosition = ref(newRowPositionOptions[4]);
 const scrollingMode = ref<DxDataGridTypes.DataGridScrollMode>('standard');
 const changes = ref<DxDataGridTypes.DataChange[]>([]);
 const editRowKey = ref<string | null>(null);

apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/Vue/App.vue

@@ -94,12 +94,12 @@ import DxSelectBox from 'devextreme-vue/select-box';
 import DxCheckBox from 'devextreme-vue/check-box';
 import { employees, states } from './data.ts';
 
-const enterKeyActions = ['startEdit', 'moveFocus'];
-const enterKeyDirections = ['none', 'column', 'row'];
+const enterKeyActions: DxDataGridTypes.EnterKeyAction[] = ['startEdit', 'moveFocus'];
+const enterKeyDirections: DxDataGridTypes.EnterKeyDirection[] = ['none', 'column', 'row'];
 
 const editOnKeyPress = ref(true);
-const enterKeyDirection = ref('column');
-const enterKeyAction = ref('moveFocus');
+const enterKeyDirection = ref(enterKeyDirections[1]);
+const enterKeyAction = ref(enterKeyActions[1]);
 
 const onFocusedCellChanging = (e: DxDataGridTypes.FocusedCellChangingEvent) => {
   e.isHighlighted = true;