feature/ts-strict/qgrid-ngx

.eslintrc.json

@@ -126,6 +126,6 @@
     "@typescript-eslint/semi": ["error", "always"],
     "@typescript-eslint/type-annotation-spacing": "error",
     "@typescript-eslint/unified-signatures": "error",
-    "@typescript-eslint/no-explicit-any": "off"
+    "@typescript-eslint/no-explicit-any": "warn"
   }
 }

packages/qgrid-core/src/format/format.service.d.ts

@@ -1,5 +1,7 @@
+import { Nullable } from '../utility/kit';
+
 export declare class FormatService {
-  static number(x: number, format: string): string;
-  static date(x: Date, format: string): string;
-  static currency(x: number, format: string): string;
+  static number(x: number, format: string): Nullable<string>;
+  static date(x: Date, format: string): Nullable<string>;
+  static currency(x: number, format: string): Nullable<string>;
 }

packages/qgrid-core/src/plugin/grid.plugin.d.ts

@@ -1,9 +1,9 @@
-import { Model } from '../model/model';
 import { Table } from '../dom/table';
-import { GridLet } from '../grid/grid.let';
-import { ObservableLike } from '../rx/rx';
 import { Event } from '../event/event';
+import { GridLet } from '../grid/grid.let';
 import { GridService } from '../grid/grid.service';
+import { Model } from '../model/model';
+import { ObservableLike } from '../rx/rx';
 
 export interface GridPlugin {
     readonly model: Model;

packages/qgrid-core/src/row/row.state.d.ts

@@ -30,7 +30,7 @@ export declare class RowState {
 	 */
   unit: RowStateUnit;
 
-  height: (element: HTMLElement, index: number) => number | number;
+  height: number | ((element: HTMLElement, index: number) => number);
 
   /**
 	 * Indicates row details status, key is a data row value is a details status.

packages/qgrid-core/src/scene/render/render.d.ts

@@ -3,9 +3,11 @@ import { GridPlugin } from '../../plugin/grid.plugin';
 import { ColumnView } from '../view/column.view';
 import { RenderStrategy } from './render.strategy';
 
+export type RowsSite = Record<'left' | 'mid' | 'right' | 'bottom' | 'body', any[]>;
+
 export declare class Renderer {
   defaultStrategy: RenderStrategy;
-  readonly rows: { left: any[]; right: any[]; mid: any[] };
+  readonly rows: RowsSite;
 
   constructor(plugin: GridPlugin);
 

packages/qgrid-core/src/utility/kit.d.ts

@@ -28,3 +28,5 @@ export declare function cloneDeep(value: any): any;
 export declare function flatten<T>(collection: Array<Array<T>>): T[];
 export declare function binarySearch<T>(list: Array<any>, value: any): number;
 export declare function getTypeName(ctor: new () => any): string;
+
+export declare type Nullable<T> = T | null;

packages/qgrid-ngx/.eslintrc.json

@@ -1,13 +1,13 @@
 {
   "extends": "../../.eslintrc.angular.json",
-  "parserOptions": {
-    "project": ["./tsconfig.lib.json"],
-    "createDefaultProgram": true
-  },
   "overrides": [
     {
       "files": ["*.html"],
       "parser": "@angular-eslint/template-parser"
     }
-  ]
+  ],
+  "parserOptions": {
+    "project": ["./tsconfig.lib.json"],
+    "createDefaultProgram": true,
+  }
 }

packages/qgrid-ngx/src/lib/body/body-core.component.ts

@@ -65,12 +65,12 @@ export class BodyCoreComponent implements OnInit {
           scrollSettings,
         ));
 
-      disposable.add(listener.on('wheel', e => host.wheel(e)));
-      disposable.add(listener.on('mouseleave', e => host.mouseLeave(e)));
+      disposable.add(listener.on('wheel', (e: WheelEvent) => host.wheel(e)));
+      disposable.add(listener.on('mouseleave', (e: WheelEvent) => host.mouseLeave(e)));
     });
 
     observeReply(model.sceneChanged)
-      .subscribe(e => {
+      .subscribe((e: any) => {
         if (model.grid().interactionMode === 'detached') {
           if (e.hasChanges('status')) {
             switch (e.state.status) {
@@ -86,22 +86,22 @@ export class BodyCoreComponent implements OnInit {
       });
 
     observe(model.sceneChanged)
-      .subscribe(e => {
+      .subscribe((e: any) => {
         if (e.hasChanges('status') && e.state.status === 'push') {
           this.cd.markForCheck();
         }
       });
   }
 
-  columnId(index: number, item: ColumnView) {
+  columnId(index: number, item: ColumnView): string | undefined {
     return item.model.key;
   }
 
-  rowId(index: number) {
+  rowId(index: number): number {
     return index;
   }
 
-  mapToDataIndex(viewIndex: number) {
+  mapToDataIndex(viewIndex: number): number {
     return this.$view.scroll.y.container.position + viewIndex;
   }
 }

packages/qgrid-ngx/src/lib/body/td-core.directive.ts

@@ -28,8 +28,8 @@ import { TrCoreDirective } from '../row/tr-core.directive';
   selector: '[q-grid-core-td]',
 })
 export class TdCoreDirective implements DomTd, OnInit, OnDestroy, OnChanges {
-  @Input('q-grid-core-value') actualValue: any;
-  @Input('q-grid-core-label') actualLabel: any;
+  @Input('q-grid-core-value') actualValue: unknown;
+  @Input('q-grid-core-label') actualLabel: unknown;
 
   @Input('q-grid-core-td') columnView: ColumnView;
 

packages/qgrid-ngx/src/lib/cell-handler/cell-handler.component.ts

@@ -25,7 +25,7 @@ import { GridPlugin } from '../plugin/grid-plugin';
   providers: [GridPlugin],
 })
 export class CellHandlerComponent implements OnInit, AfterViewInit {
-  private endBatchEdit: () => void;
+  private endBatchEdit: (() => void) | null;
 
   @ViewChild('marker', { static: true }) marker: ElementRef;
 

packages/qgrid-ngx/src/lib/cell/cell-template.service.ts

@@ -2,18 +2,18 @@ import { Injectable, ViewContainerRef } from '@angular/core';
 import { ColumnModel, GridError, noop } from '@qgrid/core';
 import { TemplateService } from '../template/template.service';
 
-function canBuild(column) {
+function canBuild(column: ColumnModel) {
   return column.type !== 'pad';
 }
 
 function buildId(source: string, column: ColumnModel, mode = 'view') {
-  const { key, type, itemType } = column as any;
+  const { key, type, itemType } = column;
   return `${source}-${mode}-cell-${type}-of-${itemType}-the-${key}.tpl.html`;
 }
 
 function buildKeys(source: string, column: ColumnModel, mode = 'view') {
-  const { key, itemType } = column as any;
-  let { type } = column as any;
+  const { key, itemType } = column;
+  let { type } = column;
 
   switch (mode) {
     case 'view': {
@@ -59,7 +59,7 @@ function buildKeys(source: string, column: ColumnModel, mode = 'view') {
 
 @Injectable()
 export class CellTemplateService {
-  private commits = new Map<string, (container: ViewContainerRef, context: any) => void>();
+  private commits = new Map<string, (container: ViewContainerRef, context: unknown) => void>();
 
   constructor(private templateService: TemplateService) { }
 
@@ -80,7 +80,7 @@ export class CellTemplateService {
       return noop;
     }
 
-    commit = (container: ViewContainerRef, context: any) => {
+    commit = (container: ViewContainerRef, context: unknown) => {
       container.clear();
       return container.createEmbeddedView(templateLink.template, context);
     };

packages/qgrid-ngx/src/lib/change-detector/dirty.directive.ts

@@ -10,7 +10,7 @@ import {
   selector: '[q-grid-dirty]',
 })
 export class DirtyDirective implements OnChanges {
-  @Input('q-grid-dirty') trigger: any;
+  @Input('q-grid-dirty') trigger: unknown;
 
   constructor(private cd: ChangeDetectorRef) {
   }

packages/qgrid-ngx/src/lib/column-list/column-list.service.ts

@@ -11,7 +11,7 @@ import { GridPlugin } from '../plugin/grid-plugin';
 @Injectable()
 export class ColumnListService {
   private host = new Lazy(() => {
-    const canCopy = (key: string, source, target) =>
+    const canCopy = (key: string, source: any, target: any) =>
       Object.prototype.hasOwnProperty.call(target, key) && !isUndefined(source[key]);
 
     return new ColumnListHost(this.plugin.model, canCopy, parseFactory);
@@ -20,27 +20,27 @@ export class ColumnListService {
   constructor(private plugin: GridPlugin) {
   }
 
-  add(column: ColumnModel) {
+  add(column: ColumnModel): void {
     this.host.instance.add(column);
   }
 
-  copy(target, source) {
+  copy(target: any, source: any): void {
     this.host.instance.copy(target, source);
   }
 
-  generateKey(source) {
+  generateKey(source: any): string {
     return this.host.instance.generateKey(source);
   }
 
-  extract(key, type): ColumnModel {
+  extract(key: string, type: string): ColumnModel {
     return this.host.instance.extract(key, type);
   }
 
-  register(column: ColumnModel) {
+  register(column: ColumnModel): void {
     this.host.instance.register(column);
   }
 
-  delete(key: string) {
+  delete(key: string): void {
     this.host.instance.delete(key);
   }
 }

packages/qgrid-ngx/src/lib/column/column-body-template.directive.ts

@@ -11,7 +11,7 @@ export class ColumnBodyTemplateDirective implements OnInit {
 
   constructor(
     private templateCache: TemplateCacheService,
-    private templateRef: TemplateRef<any>,
+    private templateRef: TemplateRef<unknown>,
   ) {
   }
 

packages/qgrid-ngx/src/lib/column/column-edit-template.directive.ts

@@ -11,7 +11,7 @@ export class ColumnEditTemplateDirective implements OnInit {
 
   constructor(
     private templateCache: TemplateCacheService,
-    private templateRef: TemplateRef<any>,
+    private templateRef: TemplateRef<unknown>,
   ) {
   }
 

packages/qgrid-ngx/src/lib/column/column-foot-template.directive.ts

@@ -11,7 +11,7 @@ export class ColumnFootTemplateDirective implements OnInit {
 
   constructor(
     private templateCache: TemplateCacheService,
-    private templateRef: TemplateRef<any>,
+    private templateRef: TemplateRef<unknown>,
   ) {
   }
 

packages/qgrid-ngx/src/lib/column/column-head-template.directive.ts

@@ -11,7 +11,7 @@ export class ColumnHeadTemplateDirective implements OnInit {
 
   constructor(
     private templateCache: TemplateCacheService,
-    private templateRef: TemplateRef<any>,
+    private templateRef: TemplateRef<unknown>,
   ) {
   }
 

packages/qgrid-ngx/src/lib/column/column.component.ts

@@ -18,6 +18,7 @@ import {
   ColumnModelWidthMode,
   guid,
   isUndefined,
+  Row,
 } from '@qgrid/core';
 import { ColumnListService } from '../column-list/column-list.service';
 import { GridPlugin } from '../plugin/grid-plugin';
@@ -73,17 +74,17 @@ export class ColumnComponent implements OnInit, OnDestroy, OnChanges {
 
   @Input() index: number;
 
-  @Input() label: ((row: any, value?: any) => any) | any;
+  @Input() label: ((row: Row, value?: unknown) => string) | any;
   @Input() labelPath: string;
 
-  @Input() itemLabel: (row: any, value?: any) => any;
+  @Input() itemLabel: (row: any, value?: unknown) => string;
   @Input() itemFormat: string;
   @Input() itemType: string;
 
-  @Input() value: (row: any, value?: any) => any;
+  @Input() value: (row: Row, value?: unknown) => any;
   @Input() path: string;
 
-  @Input() compare: (x: any, y: any) => number;
+  @Input() compare: (x: number, y: number) => number;
 
   @Input() trueValue: any;
   @Input() falseValue: any;
@@ -109,7 +110,7 @@ export class ColumnComponent implements OnInit, OnDestroy, OnChanges {
     // We want to update model when ngOntInit is triggered and not in afterViewInit
     // so we apply dirty hack to understand if column is cohort or not.
     const element = this.elementRef.nativeElement as HTMLElement;
-    if (element.children.length && element.children.item(0).tagName === 'Q-GRID-COLUMN') {
+    if (element.children.length && element.children.item(0)?.tagName === 'Q-GRID-COLUMN') {
       this.type = 'cohort';
       if (!withKey) {
         this.key = `$cohort-${this.title || guid()}`;
@@ -142,7 +143,7 @@ export class ColumnComponent implements OnInit, OnDestroy, OnChanges {
 
     if (withKey) {
       if (this.parentHost) {
-        this.parentHost.column.children.push(column);
+        this.parentHost.column.children?.push(column);
       } else {
         this.columnList.add(column);
       }
@@ -152,9 +153,9 @@ export class ColumnComponent implements OnInit, OnDestroy, OnChanges {
       const settings =
         Object
           .keys(this)
-          .filter(key => !isUndefined(this[key]) && Object.prototype.hasOwnProperty.call(column, key))
-          .reduce((memo, key) => {
-            memo[key] = column[key];
+          .filter(key => !isUndefined(this.key) && Object.prototype.hasOwnProperty.call(column, key))
+          .reduce((memo: { [key: string]: ColumnModel }, key: string) => {
+            memo[key] = column[key as keyof ColumnModel];
             return memo;
           }, {}) as ColumnModel;
 
@@ -180,7 +181,7 @@ export class ColumnComponent implements OnInit, OnDestroy, OnChanges {
 
   ngOnDestroy() {
     const { column } = this.selfHost;
-    if (column && column.source === 'template') {
+    if (column && column.key && column.source === 'template') {
       this.columnList.delete(column.key);
     }
   }

packages/qgrid-ngx/src/lib/dnd/drag.directive.ts

@@ -13,7 +13,7 @@ import { GridPlugin } from '../plugin/grid-plugin';
   selector: '[q-grid-drag]',
 })
 export class DragDirective {
-  @Input('q-grid-drag-data') data: any;
+  @Input('q-grid-drag-data') data: unknown;
   @Input('q-grid-drag-effect') effect: undefined | 'move';
   @Input('q-grid-drag') drag: Command;
   @Input('q-grid-drop-area') area: string;
@@ -38,7 +38,9 @@ export class DragDirective {
 
     if (this.drag.canExecute(eventArg) === false) {
       e.preventDefault();
-      transfer.effectAllowed = 'none';
+      if (transfer) {
+        transfer.effectAllowed = 'none';
+      }
       return false;
     }
 
@@ -50,8 +52,10 @@ export class DragDirective {
 
     this.elementRef.nativeElement.classList.add(`${GRID_PREFIX}-drag`);
 
-    transfer.setData(DragService.mimeType, DragService.encode(data));
-    transfer.effectAllowed = this.effect || 'move';
+    if(transfer) {
+      transfer.setData(DragService.mimeType, DragService.encode(data));
+      transfer.effectAllowed = this.effect || 'move';
+    }
 
     DragService.data = data;
     DragService.area = this.area;
@@ -78,8 +82,5 @@ export class DragDirective {
     this.elementRef.nativeElement.classList.remove(`${GRID_PREFIX}-drag`);
 
     DragService.data = null;
-    DragService.area = null;
-    DragService.element = null;
-    DragService.startPosition = null;
   }
 }