Fix TS problems and make TS improvements in demos (Editors) - part 3

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

@@ -1,11 +1,12 @@
 import React, { useCallback, useState } from 'react';
-import Switch, { type SwitchTypes } from 'devextreme-react/switch';
+import Switch from 'devextreme-react/switch';
+import type { SwitchTypes } from 'devextreme-react/switch';
 
 function App() {
-  const [value, setValue] = useState(false);
+  const [value, setValue] = useState<boolean>(false);
 
-  const valueChanged = useCallback((e: SwitchTypes.ValueChangedEvent) => {
-    setValue(e.value);
+  const valueChanged = useCallback(({ value }: SwitchTypes.ValueChangedEvent): void => {
+    setValue(value);
   }, []);
 
   return (

apps/demos/Demos/Switch/Overview/ReactJs/App.js

@@ -3,8 +3,8 @@ import Switch from 'devextreme-react/switch';
 
 function App() {
   const [value, setValue] = useState(false);
-  const valueChanged = useCallback((e) => {
-    setValue(e.value);
+  const valueChanged = useCallback(({ value }) => {
+    setValue(value);
   }, []);
   return (
     <div>

apps/demos/Demos/TagBox/Grouping/React/App.tsx

@@ -1,34 +1,32 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { TagBox } from 'devextreme-react/tag-box';
 import { DataSource } from 'devextreme-react/common/data';
-import Group from './Group.tsx';
 
-import productsData from './data.ts';
+import Group from './Group.tsx';
+import { products } from './data.ts';
 
 const defaultValues = {
   grouped: [17, 19],
   search: [17, 19],
   template: [18],
-};
+} satisfies Record<string, number[]>;
 
 const productLabel = { 'aria-label': 'Product' };
 
 function App() {
-  const [products] = useState(
-    new DataSource({
-      store: productsData,
-      key: 'ID',
-      group: 'Category',
-    }),
-  );
+  const productStore = new DataSource({
+    store: products,
+    key: 'ID',
+    group: 'Category',
+  });
 
   return (
     <div className="dx-fieldset">
       <div className="dx-field">
         <div className="dx-field-label">Grouped items</div>
         <div className="dx-field-value">
           <TagBox
-            dataSource={products}
+            dataSource={productStore}
             inputAttr={productLabel}
             valueExpr="ID"
             defaultValue={defaultValues.grouped}
@@ -42,7 +40,7 @@ function App() {
         <div className="dx-field-label">Grouped items with search enabled</div>
         <div className="dx-field-value">
           <TagBox
-            dataSource={products}
+            dataSource={productStore}
             valueExpr="ID"
             inputAttr={productLabel}
             defaultValue={defaultValues.search}
@@ -57,7 +55,7 @@ function App() {
         <div className="dx-field-label">Grouped items with a custom group template</div>
         <div className="dx-field-value">
           <TagBox
-            dataSource={products}
+            dataSource={productStore}
             valueExpr="ID"
             inputAttr={productLabel}
             defaultValue={defaultValues.template}

apps/demos/Demos/TagBox/Grouping/React/Group.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 
-export default function Group({ key }) {
+interface GroupProps {
+  key: string;
+}
+
+export default function Group({ key }: GroupProps) {
   return (
     <div className="custom-icon">
       <span className="dx-icon-box icon"></span> {key}

apps/demos/Demos/TagBox/Grouping/React/data.ts

@@ -1,4 +1,6 @@
-export default [{
+import type { Product } from './types.ts';
+
+export const products: Product[] = [{
   ID: 1,
   Name: 'HD Video Player',
   Category: 'Video Players',

apps/demos/Demos/TagBox/Grouping/React/types.ts

@@ -0,0 +1,5 @@
+export type Product = {
+  ID: number;
+  Name: string;
+  Category: string;
+};

apps/demos/Demos/TagBox/Grouping/ReactJs/App.js

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { TagBox } from 'devextreme-react/tag-box';
 import { DataSource } from 'devextreme-react/common/data';
 import Group from './Group.js';
-import productsData from './data.js';
+import { products } from './data.js';
 
 const defaultValues = {
   grouped: [17, 19],
@@ -11,20 +11,18 @@ const defaultValues = {
 };
 const productLabel = { 'aria-label': 'Product' };
 function App() {
-  const [products] = useState(
-    new DataSource({
-      store: productsData,
-      key: 'ID',
-      group: 'Category',
-    }),
-  );
+  const productStore = new DataSource({
+    store: products,
+    key: 'ID',
+    group: 'Category',
+  });
   return (
     <div className="dx-fieldset">
       <div className="dx-field">
         <div className="dx-field-label">Grouped items</div>
         <div className="dx-field-value">
           <TagBox
-            dataSource={products}
+            dataSource={productStore}
             inputAttr={productLabel}
             valueExpr="ID"
             defaultValue={defaultValues.grouped}
@@ -38,7 +36,7 @@ function App() {
         <div className="dx-field-label">Grouped items with search enabled</div>
         <div className="dx-field-value">
           <TagBox
-            dataSource={products}
+            dataSource={productStore}
             valueExpr="ID"
             inputAttr={productLabel}
             defaultValue={defaultValues.search}
@@ -53,7 +51,7 @@ function App() {
         <div className="dx-field-label">Grouped items with a custom group template</div>
         <div className="dx-field-value">
           <TagBox
-            dataSource={products}
+            dataSource={productStore}
             valueExpr="ID"
             inputAttr={productLabel}
             defaultValue={defaultValues.template}

apps/demos/Demos/TagBox/Grouping/ReactJs/data.js

@@ -1,4 +1,4 @@
-export default [
+export const products = [
   {
     ID: 1,
     Name: 'HD Video Player',

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

@@ -6,26 +6,25 @@ import { ArrayStore } from 'devextreme-react/common/data';
 
 import Item from './Item.tsx';
 import Tag from './Tag.tsx';
-import {
-  simpleProducts, products, productLabel, Product,
-} from './data.ts';
+import { simpleProducts, products, productLabel } from './data.ts';
+import type { Product } from './types.ts';
 
-const disabledValue = [simpleProducts[0]];
-const value = [1, 2];
+const disabledValue: string[] = [simpleProducts[0]];
+const value: number[] = [1, 2];
 const dataSource = new ArrayStore({
   data: products,
   key: 'Id',
 });
 
 function App() {
-  const [editableProducts, setEditableProducts] = useState([...simpleProducts]);
-  const [target, setTarget] = useState(null);
-  const [product, setProduct] = useState<Product>({});
+  const [editableProducts, setEditableProducts] = useState<string[]>([...simpleProducts]);
+  const [target, setTarget] = useState<HTMLElement | null>(null);
+  const [product, setProduct] = useState<Product | null>(null);
 
   const onCustomItemCreating = useCallback(
-    (args: TagBoxTypes.CustomItemCreatingEvent) => {
+    (args: TagBoxTypes.CustomItemCreatingEvent): void => {
       const newValue = args.text;
-      const isItemInDataSource = editableProducts.some((item) => item === newValue);
+      const isItemInDataSource = editableProducts.some((item: string): boolean => item === newValue);
       if (!isItemInDataSource) {
         setEditableProducts([newValue, ...editableProducts]);
       }
@@ -34,15 +33,15 @@ function App() {
     [editableProducts],
   );
 
-  const onMouseEnter = useCallback((e: { currentTarget: any }, newProduct) => {
+  const onMouseEnter = useCallback((e: React.MouseEvent<HTMLElement>, newProduct: Product): void => {
     setTarget(e.currentTarget);
     setProduct(newProduct);
   }, []);
 
-  const getAltText = useCallback((text: String) => `${text}. Picture`, []);
+  const getAltText = useCallback((text: string): string => `${text}. Picture`, []);
 
   return (
-    <React.Fragment>
+    <>
       <div className="dx-fieldset">
         <div className="dx-field">
           <div className="dx-field-label">Default mode</div>
@@ -168,25 +167,25 @@ function App() {
             >
               <p>
                 <b>Name: </b>
-                <span>{product.Name}</span>
+                <span>{product?.Name}</span>
               </p>
               <p>
                 <b>Price: </b>
-                <span>{product.Price}</span>
+                <span>{product?.Price}</span>
               </p>
               <p>
                 <b>In-stock: </b>
-                <span>{product.Current_Inventory}</span>
+                <span>{product?.Current_Inventory}</span>
               </p>
               <p>
                 <b>Category: </b>
-                <span>{product.Category}</span>
+                <span>{product?.Category}</span>
               </p>
             </Popover>
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 

apps/demos/Demos/TagBox/Overview/React/Item.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import type { Product } from './types.ts';
 
 interface ItemProps {
-  data: any;
-  getAltText: any;
+  data: Product;
+  getAltText: (text: string) => string;
 }
 
 export default function Item({ data, getAltText }: ItemProps) {

apps/demos/Demos/TagBox/Overview/React/Tag.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
+import type { Product } from './types.ts';
 
 interface TagProps {
-  product: any;
-  onMouseEnter: any;
-  getAltText: any;
+  product: Product;
+  onMouseEnter: (e: React.MouseEvent, product: Product) => void;
+  getAltText: (text: string) => string;
 }
 
 export default function Tag({ product, onMouseEnter, getAltText }: TagProps) {
   const isDisabled = product.Name === 'SuperHD Video Player';
   return (
-    <React.Fragment>
+    <>
       <div
         className={`dx-tag-content ${isDisabled && 'disabled-tag'}`}
-        onMouseEnter={(e) => onMouseEnter(e, product)}
+        onMouseEnter={(e: React.MouseEvent): void => onMouseEnter(e, product)}
         aria-disabled={isDisabled}
       >
         <img
@@ -23,6 +24,6 @@ export default function Tag({ product, onMouseEnter, getAltText }: TagProps) {
         <span>{product.Name}</span>
         {!isDisabled && <div className="dx-tag-remove-button"></div>}
       </div>
-    </React.Fragment>
+    </>
   );
 }

apps/demos/Demos/TagBox/Overview/React/data.ts

@@ -1,4 +1,6 @@
-export const simpleProducts = [
+import type { Product } from './types.ts';
+
+export const simpleProducts: string[] = [
   'HD Video Player',
   'SuperHD Video Player',
   'SuperPlasma 50',
@@ -15,17 +17,6 @@ export const simpleProducts = [
   'ExcelRemote IP',
 ];
 
-export type Product = {
-  Id?: number,
-  Name?: string,
-  Price?: number,
-  Current_Inventory?: number,
-  Backorder?: number,
-  Manufacturing?: number,
-  Category?: string,
-  ImageSrc?: string,
-};
-
 export const products: Product[] = [{
   Id: 1,
   Name: 'HD Video Player',

apps/demos/Demos/TagBox/Overview/React/types.ts

@@ -0,0 +1,10 @@
+export type Product = {
+  Id: number,
+  Name: string,
+  Price: number,
+  Current_Inventory: number,
+  Backorder: number,
+  Manufacturing: number,
+  Category: string,
+  ImageSrc: string,
+};

apps/demos/Demos/TagBox/Overview/ReactJs/App.js

@@ -15,7 +15,7 @@ const dataSource = new ArrayStore({
 function App() {
   const [editableProducts, setEditableProducts] = useState([...simpleProducts]);
   const [target, setTarget] = useState(null);
-  const [product, setProduct] = useState({});
+  const [product, setProduct] = useState(null);
   const onCustomItemCreating = useCallback(
     (args) => {
       const newValue = args.text;
@@ -33,7 +33,7 @@ function App() {
   }, []);
   const getAltText = useCallback((text) => `${text}. Picture`, []);
   return (
-    <React.Fragment>
+    <>
       <div className="dx-fieldset">
         <div className="dx-field">
           <div className="dx-field-label">Default mode</div>
@@ -159,25 +159,25 @@ function App() {
             >
               <p>
                 <b>Name: </b>
-                <span>{product.Name}</span>
+                <span>{product?.Name}</span>
               </p>
               <p>
                 <b>Price: </b>
-                <span>{product.Price}</span>
+                <span>{product?.Price}</span>
               </p>
               <p>
                 <b>In-stock: </b>
-                <span>{product.Current_Inventory}</span>
+                <span>{product?.Current_Inventory}</span>
               </p>
               <p>
                 <b>Category: </b>
-                <span>{product.Category}</span>
+                <span>{product?.Category}</span>
               </p>
             </Popover>
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;