DataGrid Custom Data Source Demo - Fix typings (#31906)

Author: markallenramirez

apps/demos/Demos/DataGrid/CustomDataSource/Angular/app/app.component.ts

@@ -4,7 +4,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { HttpClient, HttpClientModule, HttpParams } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
 import { DxDataGridModule } from 'devextreme-angular';
-import { CustomStore, LoadOptions } from 'devextreme-angular/common/data';
+import { CustomStore, type LoadOptions, type LoadResultObject } from 'devextreme-angular/common/data';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -21,9 +21,7 @@ if (window && window.config?.packageConfigPaths) {
   templateUrl: `.${modulePrefix}/app.component.html`,
 })
 export class AppComponent {
-  url: string;
-
-  dataSource = {} as CustomStore;
+  dataSource: CustomStore;
 
   constructor(httpClient: HttpClient) {
     const isNotEmpty = (value: unknown) => (value !== undefined && value !== null && value !== '');
@@ -33,7 +31,7 @@ export class AppComponent {
       async load(loadOptions: LoadOptions) {
         const url = 'https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/orders';
 
-        const paramNames = [
+        const paramNames: (keyof LoadOptions)[] = [
           'skip', 'take', 'requireTotalCount', 'requireGroupCount',
           'sort', 'filter', 'totalSummary', 'group', 'groupSummary',
         ];
@@ -47,7 +45,7 @@ export class AppComponent {
           });
 
         try {
-          const result = await lastValueFrom(httpClient.get(url, { params })) as Record<string, unknown>;
+          const result = await lastValueFrom(httpClient.get<LoadResultObject>(url, { params }));
 
           return {
             data: result.data,

apps/demos/Demos/DataGrid/CustomDataSource/React/App.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
 import DataGrid, { Column, Paging, Pager } from 'devextreme-react/data-grid';
-import { CustomStore } from 'devextreme-react/common/data';
+import { CustomStore, type LoadOptions, type LoadResultObject } from 'devextreme-react/common/data';
 import 'whatwg-fetch';
 
-function isNotEmpty(value: string | undefined | null) {
+function isNotEmpty(value: unknown) {
   return value !== undefined && value !== null && value !== '';
 }
 
 const store = new CustomStore({
   key: 'OrderNumber',
-  async load(loadOptions) {
-    const paramNames = [
+  async load(loadOptions: LoadOptions) {
+    const paramNames: (keyof LoadOptions)[] = [
       'skip', 'take', 'requireTotalCount', 'requireGroupCount',
       'sort', 'filter', 'totalSummary', 'group', 'groupSummary',
     ];
@@ -24,7 +24,7 @@ const store = new CustomStore({
     try {
       const response = await fetch(`https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/orders?${queryString}`);
 
-      const result = await response.json();
+      const result = await response.json() as LoadResultObject;
 
       return {
         data: result.data,

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

@@ -41,18 +41,18 @@
 import {
   DxDataGrid, DxColumn, DxPaging, DxPager,
 } from 'devextreme-vue/data-grid';
-import { CustomStore } from 'devextreme-vue/common/data';
+import { CustomStore, type LoadOptions, type LoadResultObject } from 'devextreme-vue/common/data';
 import 'whatwg-fetch';
 
-const isNotEmpty = (value: any) => value !== undefined && value !== null && value !== '';
+const isNotEmpty = (value: unknown) => value !== undefined && value !== null && value !== '';
 
 const store = new CustomStore({
   key: 'OrderNumber',
-  async load(loadOptions) {
-    const paramNames = [
+  async load(loadOptions: LoadOptions) {
+    const paramNames: (keyof LoadOptions)[] = [
       'skip', 'take', 'requireTotalCount', 'requireGroupCount',
       'sort', 'filter', 'totalSummary', 'group', 'groupSummary',
-    ] as const;
+    ];
 
     const queryString = paramNames
       .filter((paramName) => isNotEmpty(loadOptions[paramName]))
@@ -62,7 +62,7 @@ const store = new CustomStore({
     try {
       const response = await fetch(`https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/orders?${queryString}`);
 
-      const result = await response.json();
+      const result = await response.json() as LoadResultObject;
 
       return {
         data: result.data,