TS: types any cleanup

* fixed many (some remain) of `noImplicitAny=true` case

Author: adumesny

src/gridstack-dragdrop-plugin.ts

@@ -20,6 +20,7 @@ export type DDDropOpt = {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | string | {} | any;
 export type DDKey = 'minWidth' | 'minHeight' | string;
+export type DDValue = number | string;
 
 /** drag&drop events callbacks */
 export type DDCallback = (event: Event, arg2: GridItemHTMLElement) => void;
@@ -39,15 +40,15 @@ export class GridStackDragDropPlugin {
     this.grid = grid;
   }
 
-  public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+  public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
     return this;
   }
 
-  public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+  public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
     return this;
   }
 
-  public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?): GridStackDragDropPlugin {
+  public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
     return this;
   }
 

src/gridstack-engine.ts

@@ -251,7 +251,7 @@ export class GridStackEngine {
   public getDirtyNodes(verify?: boolean): GridStackNode[] {
     // compare original X,Y,W,H (or entire node?) instead as _dirty can be a temporary state
     if (verify) {
-      let dirtNodes = [];
+      let dirtNodes: GridStackNode[] = [];
       this.nodes.forEach(n => {
         if (n._dirty) {
           if (n.y === n._origY && n.x === n._origX && n.width === n._origW && n.height === n._origH) {
@@ -352,7 +352,7 @@ export class GridStackEngine {
       return true;
     }
 
-    let clonedNode;
+    let clonedNode: GridStackNode;
     let clone = new GridStackEngine(
       this.column,
       null,

src/gridstack.ts

@@ -460,7 +460,7 @@ export class GridStack {
   /** returns an array of grid HTML elements (no placeholder) - used internally to iterate through our children */
   public getGridItems(): GridItemHTMLElement[] {
     return Array.from(this.el.children)
-      .filter(el => el.matches('.' + this.opts.itemClass) && !el.matches('.' + this.opts.placeholderClass)) as GridItemHTMLElement[];
+      .filter((el: HTMLElement) => el.matches('.' + this.opts.itemClass) && !el.matches('.' + this.opts.placeholderClass)) as GridItemHTMLElement[];
   }
 
   /**
@@ -781,9 +781,9 @@ export class GridStack {
       let noData = (name === 'enable' || name === 'disable');
       this._gsEventHandler = this._gsEventHandler || {};
       if (noData) {
-        this._gsEventHandler[name] = (event) => callback(event);
+        this._gsEventHandler[name] = (event: Event) => callback(event);
       } else {
-        this._gsEventHandler[name] = (event) => callback(event, event.detail);
+        this._gsEventHandler[name] = (event: CustomEvent) => callback(event, event.detail);
       }
       this.el.addEventListener(name, this._gsEventHandler[name]);
     } else if (name === 'dragstart' || name === 'dragstop' || name === 'resizestart' || name === 'resizestop' || name === 'dropped') {
@@ -1071,11 +1071,11 @@ export class GridStack {
     let margin = this.opts.verticalMargin as number;
 
     if (!this.opts.verticalMargin || this.opts.cellHeightUnit === this.opts.verticalMarginUnit) {
-      getHeight = (nbRows, nbMargins) => {
+      getHeight = (nbRows: number, nbMargins: number) => {
         return (height * nbRows + margin * nbMargins) + this.opts.cellHeightUnit;
       }
     } else {
-      getHeight = (nbRows, nbMargins) => {
+      getHeight = (nbRows: number, nbMargins: number) => {
         if (!nbRows || !nbMargins) {
           return (height * nbRows + margin * nbMargins) + this.opts.cellHeightUnit;
         }
@@ -1173,8 +1173,8 @@ export class GridStack {
   /** @internal prepares the element for drag&drop **/
   private _prepareElementsByNode(el: GridItemHTMLElement, node: GridStackNode): GridStack {
     // variables used/cashed between the 3 start/move/end methods, in addition to node passed above
-    let cellWidth;
-    let cellFullHeight; // internal cellHeight + v-margin
+    let cellWidth: number;
+    let cellFullHeight: number; // internal cellHeight + v-margin
 
     /** called when item starts moving/resizing */
     let onStartMoving = (event, ui) => {
@@ -1220,7 +1220,7 @@ export class GridStack {
     }
 
     /** called when item is being dragged/resized */
-    let dragOrResize = (event, ui) => {
+    let dragOrResize = (event: Event, ui) => {
       let x = Math.round(ui.position.left / cellWidth);
       let y = Math.floor((ui.position.top + cellFullHeight / 2) / cellFullHeight);
       let width;
@@ -1281,8 +1281,8 @@ export class GridStack {
     }
 
     /** called when the item stops moving/resizing */
-    let onEndMoving = (event) => {
-      let { target } = event;
+    let onEndMoving = (event: Event) => {
+      let target: GridItemHTMLElement = event.target as GridItemHTMLElement;
       if (!target.gridstackNode) return;
 
       // let forceNotify = false; what is the point of calling 'change' event with no data, when the 'removed' event is already called ?
@@ -1323,7 +1323,7 @@ export class GridStack {
 
       // if we re-sized a nested grid item, let the children resize as well
       if (event.type === 'resizestop') {
-        target.querySelectorAll('.grid-stack').forEach(el => el.gridstack._onResizeHandler());
+        target.querySelectorAll('.grid-stack').forEach((el: GridHTMLElement) => el.gridstack._onResizeHandler());
       }
     }
 

src/jq/jqueryui-gridstack-dragdrop-plugin.ts

@@ -7,7 +7,7 @@
 */
 
 import { GridStack } from '../gridstack';
-import { GridStackDragDropPlugin, DDOpts, DDKey, DDDropOpt, DDCallback } from '../gridstack-dragdrop-plugin';
+import { GridStackDragDropPlugin, DDOpts, DDKey, DDDropOpt, DDCallback, DDValue } from '../gridstack-dragdrop-plugin';
 import { GridItemHTMLElement } from '../types';
 
 // TODO: TEMPORARY until can remove jquery-ui drag&drop and this class and use HTML5 instead !
@@ -23,7 +23,7 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin {
     super(grid);
   }
 
-  public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+  public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
     let $el: JQuery = $(el);
     if (opts === 'disable' || opts === 'enable') {
       $el.resizable(opts);
@@ -44,7 +44,7 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin {
     return this;
   }
 
-  public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+  public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
     let $el: JQuery = $(el);
     if (opts === 'disable' || opts === 'enable') {
       $el.draggable(opts);
@@ -66,7 +66,7 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin {
     return this;
   }
 
-  public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?): GridStackDragDropPlugin {
+  public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
     let $el: JQuery = $(el);
     if (typeof opts.accept === 'function' && !opts._accept) {
       // convert jquery event to generic element

src/utils.ts

@@ -173,7 +173,8 @@ export class Utils {
     return Utils.closestByClass(el, name);
   }
 
-  static throttle(callback, delay) {
+  /** @internal */
+  static throttle(callback: () => void, delay: number) {
     let isWaiting = false;
 
     return function (...args) {
@@ -204,7 +205,8 @@ export class Utils {
     }
   }
 
-  static getScrollParent(el: HTMLElement) {
+  /** @internal */
+  static getScrollParent(el: HTMLElement): HTMLElement {
     let returnEl;
     if (el === null) {
       returnEl = null;