Refactor types in Angular Demos p.2 (#3075)

* refactor types in Angular Demos p.2 Co-authored-by: volvl <[email protected]>
DevExpress · Feb 6, 2024 · b4cb5e0 · b4cb5e0
1 parent 8b9a685
commit b4cb5e0
Show file tree

Hide file tree

Showing 77 changed files with 649 additions and 745 deletions.
diff --git a/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.html b/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.html
@@ -21,7 +21,7 @@ <h4>Selected Files</h4>
         Type: <span>{{ file.type }}</span
         ><br />
         Last Modified Date:
-        <span>{{ file.lastModifiedDate }}</span>
+        <span>{{ file.lastModified | demodate }}</span>
       </div>
     </div>
   </div>

diff --git a/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.ts b/JSDemos/Demos/FileUploader/FileUploading/Angular/app/app.component.ts
@@ -1,8 +1,23 @@
-import { NgModule, Component, enableProdMode } from '@angular/core';
+import {
+  NgModule, Component, enableProdMode, Pipe, PipeTransform,
+} from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { DxCheckBoxModule, DxFileUploaderModule, DxSelectBoxModule } from 'devextreme-angular';
+import {
+  DxCheckBoxModule, DxFileUploaderModule, DxSelectBoxModule,
+} from 'devextreme-angular';
+
+if (!/localhost/.test(document.location.host)) {
+  enableProdMode();
+}
+
+@Pipe({ name: 'demodate' })
+export class DemoDatePipe<TArgs, TReturn> implements PipeTransform {
+  transform(date: number) {
+    return new Date(date);
+  }
+}
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -14,7 +29,7 @@ if (!/localhost/.test(document.location.host)) {
   styleUrls: ['app/app.component.css'],
 })
 export class AppComponent {
-  value: any[] = [];
+  value: File[] = [];
 }
 
 @NgModule({
@@ -25,7 +40,7 @@ export class AppComponent {
     DxFileUploaderModule,
     DxSelectBoxModule,
   ],
-  declarations: [AppComponent],
+  declarations: [AppComponent, DemoDatePipe],
   bootstrap: [AppComponent],
 })
 export class AppModule { }

diff --git a/JSDemos/Demos/FilterBuilder/Customization/Angular/app/app.component.ts b/JSDemos/Demos/FilterBuilder/Customization/Angular/app/app.component.ts
@@ -1,16 +1,12 @@
-import {
-  NgModule, Component, ViewChild, enableProdMode,
-} from '@angular/core';
+import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  DxListModule,
-  DxButtonModule,
-  DxTagBoxModule,
-  DxFilterBuilderModule,
-} from 'devextreme-angular';
+import { DxListModule, DxButtonModule, DxTagBoxModule } from 'devextreme-angular';
+import { DxFilterBuilderModule, DxFilterBuilderComponent, DxFilterBuilderTypes } from 'devextreme-angular/ui/filter-builder';
 import { Service } from './app.service';
 
+type FilterBuilderValue = ReturnType<DxFilterBuilderComponent['instance']['getFilterExpression']>;
+
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
@@ -20,11 +16,10 @@ const anyOfOperation = {
   caption: 'Is any of',
   icon: 'check',
   editorTemplate: 'tagBoxTemplate',
-  calculateFilterExpression(filterValue: any, field: any) {
-    return filterValue && filterValue.length
-                && Array.prototype.concat.apply([], filterValue.map((value) => [[field.dataField, '=', value], 'or'])).slice(0, -1);
-  },
-};
+  calculateFilterExpression: (filterValue: string[], field: Record<string, unknown>) => filterValue?.flatMap(
+    (value) => [[field.dataField, '=', value], 'or'],
+  ).slice(0, -1),
+} as const;
 
 @Component({
   selector: 'demo-app',
@@ -34,44 +29,49 @@ const anyOfOperation = {
 })
 
 export class AppComponent {
-  filterText: any;
-
-  dataSourceText: any;
+  filterText: string;
 
-  fields: Array<any>;
+  dataSourceText: string;
 
-  customOperations: Array<any>;
+  fields: Array<string>;
 
-  filter: any;
+  filter: Array<string[] | string>;
 
   categories: string[];
 
-  groupOperations: string[] = ['and', 'or'];
+  customOperations: Array<typeof anyOfOperation> = [anyOfOperation];
+
+  groupOperations = ['and', 'or'];
 
   constructor(service: Service) {
     this.fields = service.getFields();
     this.filter = service.getFilter();
     this.categories = service.getCategories();
-    this.customOperations = [anyOfOperation];
   }
 
-  updateTexts(e) {
+  updateTexts(e: DxFilterBuilderTypes.InitializedEvent) {
     this.filterText = AppComponent.formatValue(e.component.option('value'));
     this.dataSourceText = AppComponent.formatValue(e.component.getFilterExpression());
   }
 
-  private static formatValue(value, spaces = 0) {
+  private static formatValue(value: FilterBuilderValue, spaces = 0) {
     if (value && Array.isArray(value[0])) {
       const TAB_SIZE = 4;
+
       spaces = spaces || TAB_SIZE;
-      return `[${AppComponent.getLineBreak(spaces)}${value.map((item) => (Array.isArray(item[0]) ? AppComponent.formatValue(item, spaces + TAB_SIZE) : JSON.stringify(item))).join(`,${AppComponent.getLineBreak(spaces)}`)}${AppComponent.getLineBreak(spaces - TAB_SIZE)}]`;
+
+      return `[${AppComponent.getLineBreak(spaces)}${
+        (value as string[]).map(
+          (item: FilterBuilderValue) => (Array.isArray(item[0])
+            ? AppComponent.formatValue(item, spaces + TAB_SIZE)
+            : JSON.stringify(item)),
+        ).join(`,${AppComponent.getLineBreak(spaces)}`)
+      }${AppComponent.getLineBreak(spaces - TAB_SIZE)}]`;
     }
     return JSON.stringify(value);
   }
 
-  private static getLineBreak(spaces) {
-    return `\r\n${new Array(spaces + 1).join(' ')}`;
-  }
+  private static getLineBreak = (spaces: number) => `\r\n${new Array(spaces + 1).join(' ')}`;
 }
 
 @NgModule({

diff --git a/JSDemos/Demos/FilterBuilder/Customization/React/data.ts b/JSDemos/Demos/FilterBuilder/Customization/React/data.ts
@@ -16,8 +16,8 @@ export const categories = [
   'Projectors',
   'Automation',
 ];
-export const groupOperations: FilterBuilderTypes.Properties['groupOperations'] = ['and', 'or'];
-export const fields: FilterBuilderTypes.Properties['fields'] = [{
+export const groupOperations: FilterBuilderTypes.GroupOperation[] = ['and', 'or'];
+export const fields: FilterBuilderTypes.Field[] = [{
   dataField: 'Name',
 }, {
   dataField: 'Price',

diff --git a/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.ts b/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.ts
@@ -10,6 +10,7 @@ import {
 import DataSource from 'devextreme/data/data_source';
 import ODataStore from 'devextreme/data/odata/store';
 import { Service } from './app.service';
+import type { Fields, Condition } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -23,13 +24,13 @@ if (!/localhost/.test(document.location.host)) {
 })
 
 export class AppComponent {
-  dataSource: any;
+  dataSource: DataSource;
 
-  fields: Array<any>;
+  fields: Fields;
 
-  filter: any;
+  filter: Condition;
 
-  gridFilterValue: any;
+  gridFilterValue: Condition;
 
   constructor(service: Service) {
     this.fields = service.getFields();

diff --git a/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.service.ts b/JSDemos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.service.ts
@@ -1,6 +1,9 @@
 import { Injectable } from '@angular/core';
 
-const filter: Array<any> = [
+export type Condition = Condition[] | string | number;
+export type Fields = typeof fields;
+
+const filter: Condition = [
   ['Product_Current_Inventory', '<>', 0],
   'or',
   [
@@ -9,7 +12,7 @@ const filter: Array<any> = [
     ['Product_Cost', '<', 200],
   ],
 ];
-const fields: Array<any> = [
+const fields: Record<string, string | number>[] = [
   {
     caption: 'ID',
     width: 50,
@@ -42,11 +45,11 @@ const fields: Array<any> = [
 
 @Injectable()
 export class Service {
-  getFields(): Array<any> {
+  getFields(): Fields {
     return fields;
   }
 
-  getFilter(): Array<any> {
+  getFilter(): Condition {
     return filter;
   }
 }
diff --git a/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.component.ts b/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.component.ts
@@ -11,7 +11,7 @@ import {
   DxFilterBuilderModule,
 } from 'devextreme-angular';
 import DataSource from 'devextreme/data/data_source';
-import { Service } from './app.service';
+import { Fields, Filter, Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -27,11 +27,11 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   @ViewChild(DxFilterBuilderComponent, { static: false }) filterBuilder: DxFilterBuilderComponent;
 
-  dataSource: any;
+  dataSource: DataSource;
 
-  fields: Array<any>;
+  fields: Fields;
 
-  filter: any;
+  filter: Filter;
 
   constructor(service: Service) {
     this.fields = service.getFields();

diff --git a/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.service.ts b/JSDemos/Demos/FilterBuilder/WithList/Angular/app/app.service.ts
@@ -18,7 +18,7 @@ export class Product {
   ImageSrc: string;
 }
 
-const filter: Array<any> = [
+const filter = [
   ['Category', '=', 'Video Players'],
   'or',
   [
@@ -40,7 +40,7 @@ const categories: string[] = [
   'Projectors',
   'Automation',
 ];
-const fields: Array<any> = [
+const fields = [
   {
     dataField: 'ID',
     dataType: 'number',
@@ -226,3 +226,6 @@ export class Service {
     return filter;
   }
 }
+
+export type Fields = typeof fields;
+export type Filter = typeof filter;
diff --git a/JSDemos/Demos/FilterBuilder/WithList/React/data.ts b/JSDemos/Demos/FilterBuilder/WithList/React/data.ts
@@ -22,7 +22,7 @@ const categories = [
   'Projectors',
   'Automation',
 ];
-export const fields: FilterBuilderTypes.Properties['fields'] = [
+export const fields: FilterBuilderTypes.Field[] = [
   {
     dataField: 'ID',
     dataType: 'number',

diff --git a/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.component.ts b/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.component.ts
@@ -3,16 +3,11 @@ import {
 } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import config from 'devextreme/core/config';
 import repaintFloatingActionButton from 'devextreme/ui/speed_dial_action/repaint_floating_action_button';
-import {
-  DxDataGridModule,
-  DxDataGridComponent,
-  DxSpeedDialActionModule,
-  DxSelectBoxModule,
-} from 'devextreme-angular';
-
+import { DxSpeedDialActionModule } from 'devextreme-angular';
+import { DxDataGridModule, DxDataGridComponent, DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
+import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
 import {
   Service, Employee, State, directions,
 } from './app.service';
@@ -34,14 +29,13 @@ export class AppComponent {
 
   states: State[];
 
-  directions: any;
+  directions = directions;
 
   selectedRowIndex = -1;
 
   constructor(private service: Service) {
     this.employees = service.getEmployees();
     this.states = service.getStates();
-    this.directions = directions;
   }
 
   editRow() {
@@ -59,11 +53,11 @@ export class AppComponent {
     this.grid.instance.deselectAll();
   }
 
-  selectedChanged(e) {
+  selectedChanged(e: DxDataGridTypes.SelectionChangedEvent) {
     this.selectedRowIndex = e.component.getRowIndexByKey(e.selectedRowKeys[0]);
   }
 
-  directionChanged(e) {
+  directionChanged(e: DxSelectBoxTypes.SelectionChangedEvent) {
     config({
       floatingActionButtonConfig: this.directions[e.selectedItem],
     });

diff --git a/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.service.ts b/JSDemos/Demos/FloatingActionButton/Overview/Angular/app/app.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-export const directions: any = {
+export const directions = {
   auto: {
     icon: 'rowfield',
     shading: true,

diff --git a/JSDemos/Demos/Form/ColumnsAdaptability/Angular/app/app.component.ts b/JSDemos/Demos/Form/ColumnsAdaptability/Angular/app/app.component.ts
@@ -1,10 +1,8 @@
-import {
-  NgModule, Component, ViewChild, enableProdMode,
-} from '@angular/core';
+import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxFormModule, DxCheckBoxModule } from 'devextreme-angular';
-
+import { DxFormModule } from 'devextreme-angular';
+import { DxCheckBoxModule, DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
 import { Employee, Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -20,21 +18,18 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
   employee: Employee;
 
-  colCountByScreen: Object;
+  colCountByScreen = {
+    md: 4,
+    sm: 2,
+  };
 
   constructor(service: Service) {
     this.employee = service.getEmployee();
-    this.colCountByScreen = {
-      md: 4,
-      sm: 2,
-    };
   }
 
-  screen(width) {
-    return width < 720 ? 'sm' : 'md';
-  }
+  screen = (width: number) => (width < 720 ? 'sm' : 'md');
 
-  valueChanged(e) {
+  valueChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
     if (e.value) {
       this.colCountByScreen = null;
     } else {