Scheduler: fix TS issues in React demos (#31977)

EugeniyKiyashko · web-flow · commit 6a0d65935705 · 2025-12-15T17:21:08.000+04:00
diff --git a/.github/workflows/demos_visual_tests.yml b/.github/workflows/demos_visual_tests.yml
@@ -310,17 +310,17 @@ jobs:
       - 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
+      - name: Demos - Check Vue TS
         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
+      - name: Demos - Check React TS
+        working-directory: apps/demos
+        run: pnpm run ts-check-react
 
   lint:
     name: Lint code base
diff --git a/apps/demos/Demos/Scheduler/Adaptability/React/App.tsx b/apps/demos/Demos/Scheduler/Adaptability/React/App.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useRef } from 'react';
-import Scheduler, { Resource, type SchedulerTypes, SchedulerRef } from 'devextreme-react/scheduler';
+import Scheduler, { Resource } from 'devextreme-react/scheduler';
+import type { SchedulerTypes, SchedulerRef } from 'devextreme-react/scheduler';
 import SpeedDialAction from 'devextreme-react/speed-dial-action';
 import { data, priorities } from './data.ts';
 
diff --git a/apps/demos/Demos/Scheduler/Adaptability/React/data.ts b/apps/demos/Demos/Scheduler/Adaptability/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 type Appointment = SchedulerTypes.Appointment & { priorityId?: number[]; };
 
diff --git a/apps/demos/Demos/Scheduler/Agenda/React/data.ts b/apps/demos/Demos/Scheduler/Agenda/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 type Appointment = SchedulerTypes.Appointment & { id: number; priorityId: number; assigneeId: number[]; };
 
diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/React/data.ts b/apps/demos/Demos/Scheduler/AllDayPanelMode/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 export const data: SchedulerTypes.Appointment[] = [{
   text: 'Book Flights to San Fran for Sales Trip',
diff --git a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/React/data.ts b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 type Appointment = SchedulerTypes.Appointment & { roomId: number };
 
diff --git a/apps/demos/Demos/Scheduler/BasicViews/React/data.ts b/apps/demos/Demos/Scheduler/BasicViews/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 export const data: SchedulerTypes.Appointment[] = [
   {
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx b/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx
@@ -1,8 +1,9 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
-import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler';
+import Scheduler from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { FormRef } from 'devextreme-react/form';
 import notify from 'devextreme/ui/notify';
-import { FormRef } from 'devextreme-react/form';
 import { data, holidays } from './data.ts';
 import Utils from './utils.ts';
 import DataCell from './DataCell.tsx';
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/React/data.ts b/apps/demos/Demos/Scheduler/CellTemplates/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 export const dinnerTime = { from: 12, to: 13 };
 
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/React/utils.ts b/apps/demos/Demos/Scheduler/CellTemplates/React/utils.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 import { dinnerTime, holidays } from './data.ts';
 
 export default class Utils {
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx b/apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx
@@ -1,7 +1,9 @@
 import React, { useCallback, useRef, useState } from 'react';
 
-import { Scheduler, Resource, type SchedulerTypes, SchedulerRef } from 'devextreme-react/scheduler';
-import { ContextMenu, type ContextMenuTypes } from 'devextreme-react/context-menu';
+import { Scheduler, Resource } from 'devextreme-react/scheduler';
+import type { SchedulerTypes, SchedulerRef } from 'devextreme-react/scheduler';
+import { ContextMenu } from 'devextreme-react/context-menu';
+import type { ContextMenuTypes } from 'devextreme-react/context-menu';
 
 import AppointmentMenuTemplate from './AppointmentTemplate.tsx';
 import { data, resourcesData } from './data.ts';
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/React/types.ts b/apps/demos/Demos/Scheduler/ContextMenu/React/types.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 import { type ContextMenuTypes } from 'devextreme-react/context-menu';
 
 export type Appointment = SchedulerTypes.Appointment & { roomId: number[] };
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/AppointmentTemplate.tsx b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/AppointmentTemplate.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { query as Query } from 'devextreme-react/common/data';
-import { type SchedulerTypes } from 'devextreme-react/scheduler';
+import type { Appointment } from './data.ts';
 import { moviesData } from './data.ts';
 
 type AppointmentTemplateProps = {
-  data: { appointmentData: SchedulerTypes.Appointment; };
+  data: { appointmentData: Appointment; };
 };
 
-const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0];
+const getMovieById = (id: number) => Query(moviesData).filter(['id', id]).toArray()[0];
 
 const AppointmentTemplate = (props: AppointmentTemplateProps) => {
   const { appointmentData } = props.data;
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/data.ts b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/data.ts
@@ -1,6 +1,6 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
-type Appointment = SchedulerTypes.Appointment & { movieId: number };
+export type Appointment = SchedulerTypes.Appointment & { movieId: number };
 
 type Resource = {
   id: number;
diff --git a/apps/demos/Demos/Scheduler/CustomViewDuration/React/data.ts b/apps/demos/Demos/Scheduler/CustomViewDuration/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 export const data: SchedulerTypes.Appointment[] = [{
   text: 'Google AdWords Strategy',
diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/React/App.tsx b/apps/demos/Demos/Scheduler/DragAndDrop/React/App.tsx
@@ -1,10 +1,13 @@
 import React, { useCallback, useState } from 'react';
 
-import Scheduler, { AppointmentDragging, type SchedulerTypes } from 'devextreme-react/scheduler';
-import Draggable, { type DraggableTypes } from 'devextreme-react/draggable';
+import Scheduler, { AppointmentDragging } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
+import Draggable from 'devextreme-react/draggable';
+import type { DraggableTypes } from 'devextreme-react/draggable';
 import ScrollView from 'devextreme-react/scroll-view';
 
-import { Task, appointments as defaultAppointments, tasks as defaultTasks } from './data.ts';
+import { appointments as defaultAppointments, tasks as defaultTasks } from './data.ts';
+import type { Task } from './data.ts';
 
 const currentDate = new Date(2021, 3, 26);
 const views: SchedulerTypes.Properties['views'] = [{ type: 'day', intervalCount: 3 }];
diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/React/data.ts b/apps/demos/Demos/Scheduler/DragAndDrop/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 export type Task = {
   text: string;
diff --git a/apps/demos/Demos/Scheduler/Editing/React/App.tsx b/apps/demos/Demos/Scheduler/Editing/React/App.tsx
@@ -8,7 +8,7 @@ import { data } from './data.ts';
 const currentDate = new Date(2021, 3, 29);
 const views: SchedulerTypes.ViewType[] = ['day', 'week'];
 
-const showToast = (event: string, value, type: string) => {
+const showToast = (event: string, value: string, type: string) => {
   notify(`${event} "${value}" task`, type, 800);
 };
 
diff --git a/apps/demos/Demos/Scheduler/Editing/React/data.ts b/apps/demos/Demos/Scheduler/Editing/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 export const data: SchedulerTypes.Appointment[] = [
   {
diff --git a/apps/demos/Demos/Scheduler/GroupByDate/React/data.ts b/apps/demos/Demos/Scheduler/GroupByDate/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 type Appointment = SchedulerTypes.Appointment & { priorityId: number };
 
diff --git a/apps/demos/Demos/Scheduler/GroupingByResources/React/data.ts b/apps/demos/Demos/Scheduler/GroupingByResources/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 type Appointment = SchedulerTypes.Appointment & { priorityId: number };
 
diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/data.ts b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 type Appointment = SchedulerTypes.Appointment & { priorityId: number; typeId: number; };
 
diff --git a/apps/demos/Demos/Scheduler/Overview/React/data.ts b/apps/demos/Demos/Scheduler/Overview/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 type Appointment = SchedulerTypes.Appointment & { employeeID: number };
 
diff --git a/apps/demos/Demos/Scheduler/RecurringAppointments/React/data.ts b/apps/demos/Demos/Scheduler/RecurringAppointments/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 type Appointment = SchedulerTypes.Appointment & { roomId: number[] | number };
 
diff --git a/apps/demos/Demos/Scheduler/Resources/React/data.ts b/apps/demos/Demos/Scheduler/Resources/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 type Appointment = SchedulerTypes.Appointment & { priorityId: number, roomId: number, assigneeId: number[] };
 
diff --git a/apps/demos/Demos/Scheduler/SimpleArray/React/data.ts b/apps/demos/Demos/Scheduler/SimpleArray/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 export const data: SchedulerTypes.Appointment[] = [
   {
diff --git a/apps/demos/Demos/Scheduler/Templates/React/App.tsx b/apps/demos/Demos/Scheduler/Templates/React/App.tsx
@@ -42,7 +42,7 @@ const App = () => {
 
   const onPopupOptionChanged = useCallback((e: PopupTypes.OptionChangedEvent) => {
     if (e.fullName === 'toolbarItems' && e.value) {
-      e.value.forEach((item: any, index: number) => {
+      e.value.forEach((item, index: number) => {
         if (item.shortcut === 'done' || item.shortcut === 'cancel') {
           e.component.option(`toolbarItems[${index}].toolbar`, 'bottom');
         }
diff --git a/apps/demos/Demos/Scheduler/Templates/React/Appointment.tsx b/apps/demos/Demos/Scheduler/Templates/React/Appointment.tsx
@@ -4,7 +4,7 @@ import { formatDate } from 'devextreme-react/common/core/localization';
 import { type SchedulerTypes } from 'devextreme-react/scheduler';
 import { moviesData } from './data.ts';
 
-const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0];
+const getMovieById = (id: number) => Query(moviesData).filter(['id', id]).toArray()[0];
 
 type AppointmentProps = {
   data: { targetedAppointmentData: SchedulerTypes.Appointment; }
diff --git a/apps/demos/Demos/Scheduler/Templates/React/data.ts b/apps/demos/Demos/Scheduler/Templates/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 export type Appointment = SchedulerTypes.Appointment & { theatreId: number; movieId: number; price: number; };
 
diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/React/App.tsx b/apps/demos/Demos/Scheduler/TimeZonesSupport/React/App.tsx
@@ -10,7 +10,7 @@ const timeZoneLabel = { 'aria-label': 'Time zone' };
 const currentDate = new Date(2021, 3, 27);
 const views: SchedulerTypes.ViewType[] = ['workWeek'];
 
-const getTimeZones = (date) => timeZoneUtils.getTimeZones(date, locations);
+const getTimeZones = (date: Date) => timeZoneUtils.getTimeZones(date, locations);
 
 const defaultTimeZones = getTimeZones(currentDate);
 
diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/React/data.ts b/apps/demos/Demos/Scheduler/TimeZonesSupport/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 export const data: SchedulerTypes.Appointment[] = [
   {
diff --git a/apps/demos/Demos/Scheduler/Timelines/React/data.ts b/apps/demos/Demos/Scheduler/Timelines/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 type Appointment = SchedulerTypes.Appointment & { ownerId: number[], priority: number };
 
diff --git a/apps/demos/Demos/Scheduler/Toolbar/React/data.ts b/apps/demos/Demos/Scheduler/Toolbar/React/data.ts
@@ -9,7 +9,7 @@ export interface Assignee {
   id: number;
 }
 
-const addDays = (date, days) => new Date(new Date(date).setUTCDate(date.getUTCDate() + days));
+const addDays = (date: Date, days: number) => new Date(new Date(date).setUTCDate(date.getUTCDate() + days));
 const now = new Date(new Date().setUTCHours(0, 0, 0, 0));
 const startOfTheWeek = addDays(now, -now.getUTCDay());
 export const currentDate = new Date(2025, 5, 10);
diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/React/data.ts b/apps/demos/Demos/Scheduler/VirtualScrolling/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 type Appointment = SchedulerTypes.Appointment & { humanId: number; };
 
diff --git a/apps/demos/Demos/Scheduler/WorkShifts/React/data.ts b/apps/demos/Demos/Scheduler/WorkShifts/React/data.ts
@@ -1,4 +1,4 @@
-import { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 type Shift = {
   text: string;
diff --git a/apps/demos/tsconfig.react-check.json b/apps/demos/tsconfig.react-check.json
@@ -13,6 +13,7 @@
     "lib": ["es2022", "DOM", "DOM.Iterable"]
   },
   "include": [
-    "Demos/**/React/**/*.tsx"
+    "Demos/Scheduler/**/React/**/*.tsx",
+    "Demos/Scheduler/**/React/**/*.ts"
   ]
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { SchedulerTypes } from 'devextreme-react/scheduler';`
	`1`	`+import type { SchedulerTypes } from 'devextreme-react/scheduler';`
`2`	`2`
`3`	`3`	`type Appointment = SchedulerTypes.Appointment & { priorityId?: number[]; };`
`4`	`4`