Fix TS in demos (DevExpress#29088)

Co-authored-by: alexlavrov <[email protected]>

Author: GoodDayForSurf

.github/workflows/demos_visual_tests_frameworks.yml

@@ -175,6 +175,64 @@ jobs:
           path: apps/demos/changed-files.json
           retention-days: 1
 
+  check-ts:
+    name: Check TS
+    needs: build-devextreme
+    runs-on: devextreme-shr2
+    timeout-minutes: 20
+
+    steps:
+      - name: Get sources
+        uses: actions/checkout@v4
+
+      - name: Download devextreme packages
+        uses: actions/download-artifact@v4
+        with:
+          name: devextreme-sources
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 9
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: |
+            ${{ env.STORE_PATH }}
+            .nx/cache
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Install tgz
+        run: pnpm add -w ./devextreme-installer.tgz ./devextreme-dist-installer.tgz ./devextreme-react-installer.tgz ./devextreme-vue-installer.tgz ./devextreme-angular-installer.tgz
+
+      - name: Run check TS for Vue
+        working-directory: apps/demos
+        run: pnpm run ts-check-vue
+
+      # - name: Run check TS for Angular
+      #   working-directory: apps/demos
+      #   run: pnpm run ts-check-ng
+
+      # - name: Run check TS for React
+      #   working-directory: apps/demos
+      #   run: pnpm run ts-check-react
+
   lint:
     name: ${{ matrix.name }}
     needs:

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

@@ -1,8 +1,8 @@
 import React, { useCallback, useState } from 'react';
-import Accordion, { AccordionTypes } from 'devextreme-react/accordion';
-import CheckBox, { CheckBoxTypes } from 'devextreme-react/check-box';
-import TagBox, { TagBoxTypes } from 'devextreme-react/tag-box';
-import Slider, { Tooltip, Label, SliderTypes } from 'devextreme-react/slider';
+import Accordion, { type AccordionTypes } from 'devextreme-react/accordion';
+import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
+import TagBox, { type TagBoxTypes } from 'devextreme-react/tag-box';
+import Slider, { Tooltip, Label, type SliderTypes } from 'devextreme-react/slider';
 
 import service from './data.ts';
 import CustomTitle from './CustomTitle.tsx';

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

@@ -66,7 +66,7 @@ import DxCheckBox from 'devextreme-vue/check-box';
 import DxSlider, { DxTooltip, DxLabel } from 'devextreme-vue/slider';
 import CustomTitle from './CustomTitle.vue';
 import CustomItem from './CustomItem.vue';
-import service from './data.js';
+import service from './data.ts';
 
 const companies = service.getCompanies();
 const selectedItems = ref([companies[0]]);

apps/demos/Demos/Accordion/Overview/Vue/CustomItem.vue

@@ -30,9 +30,9 @@
   </div>
 </template>
 <script setup lang="ts">
-withDefaults(defineProps<{
-  itemData?: Record<string, any>
-}>(), {
-  itemData: () => ({}),
-});
+import { type CompanyData } from './data';
+
+defineProps<{
+  itemData?: CompanyData
+}>();
 </script>

apps/demos/Demos/Accordion/Overview/Vue/CustomTitle.vue

@@ -2,9 +2,9 @@
   <div class="header">{{ itemData.CompanyName }}</div>
 </template>
 <script setup lang="ts">
-withDefaults(defineProps<{
-  itemData?: Record<string, any>
-}>(), {
-  itemData: () => ({}),
-});
+import { type CompanyData } from './data';
+
+defineProps<{
+  itemData?: CompanyData
+}>();
 </script>

…mos/Demos/Accordion/Overview/Vue/data.js …mos/Demos/Accordion/Overview/Vue/data.tsapps/demos/Demos/Accordion/Overview/Vue/data.js renamed to apps/demos/Demos/Accordion/Overview/Vue/data.ts apps/demos/Demos/Accordion/Overview/Vue/data.js renamed to apps/demos/Demos/Accordion/Overview/Vue/data.ts

@@ -1,3 +1,14 @@
+export type CompanyData = {
+  CompanyName: string,
+  Address: string,
+  City: string,
+  State: string,
+  Zipcode: number,
+  Phone: string,
+  Fax: string,
+  Website: string,
+}
+
 const companies = [{
   ID: 1,
   CompanyName: 'Super Mart of the West',

apps/demos/Demos/ActionSheet/Basics/React/App.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
-import ActionSheet, { ActionSheetTypes } from 'devextreme-react/action-sheet';
+import ActionSheet, { type ActionSheetTypes } from 'devextreme-react/action-sheet';
 import Button from 'devextreme-react/button';
-import Switch, { SwitchTypes } from 'devextreme-react/switch';
+import Switch, { type SwitchTypes } from 'devextreme-react/switch';
 import notify from 'devextreme/ui/notify';
 import { actionSheetItems } from './data.ts';
 

apps/demos/Demos/ActionSheet/Basics/Vue/App.vue

@@ -45,7 +45,7 @@ const showCancelButton = ref(true);
 function showActionSheet() {
   isActionSheetVisible.value = true;
 }
-function showClickNotification(buttonName) {
+function showClickNotification(buttonName: string) {
   notify(`The "${buttonName}" button is clicked.`);
 }
 </script>

apps/demos/Demos/ActionSheet/PopoverMode/React/App.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import ActionSheet, { ActionSheetTypes } from 'devextreme-react/action-sheet';
-import List, { ListTypes } from 'devextreme-react/list';
+import ActionSheet, { type ActionSheetTypes } from 'devextreme-react/action-sheet';
+import List, { type ListTypes } from 'devextreme-react/list';
 
 import notify from 'devextreme/ui/notify';
 

apps/demos/Demos/ActionSheet/PopoverMode/Vue/App.vue

@@ -22,19 +22,20 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import DxActionSheet from 'devextreme-vue/action-sheet';
-import DxList from 'devextreme-vue/list';
+import DxList, { type DxListTypes } from 'devextreme-vue/list';
 import notify from 'devextreme/ui/notify';
 import { actionSheetItems, contacts } from './data.ts';
 import ContactItem from './ContactItem.vue';
+import { type DxElement } from "devextreme/core/element";
 
 const isActionSheetVisible = ref(false);
-const actionSheetTarget = ref('');
+const actionSheetTarget = ref<DxElement>();
 
-function showActionSheet(e) {
+function showActionSheet(e: DxListTypes.ItemClickEvent) {
   actionSheetTarget.value = e.itemElement;
   isActionSheetVisible.value = true;
 }
-function showClickNotification(buttonName) {
+function showClickNotification(buttonName: string) {
   notify(`The "${buttonName}" button is clicked.`);
 }
 </script>