more strict typescript settings

src/dnd/ElementMirror.ts

@@ -1,6 +1,7 @@
 import { removeElement, applyStyle } from '../util/dom-manip'
 import { computeRect } from '../util/dom-geom'
 import { whenTransitionDone } from '../util/dom-event'
+import { Rect } from '../util/geom'
 
 /*
 An effect in which an element follows the movement of a pointer across the screen.
@@ -10,13 +11,13 @@ Must call start + handleMove + stop.
 export default class ElementMirror {
 
   isVisible: boolean = false
-  origX: number
-  origY: number
-  deltaX: number
-  deltaY: number
-  sourceEl: HTMLElement
-  mirrorEl: HTMLElement
-  sourceElRect: any
+  origX?: number
+  origY?: number
+  deltaX?: number
+  deltaY?: number
+  sourceEl: HTMLElement | null = null
+  mirrorEl: HTMLElement | null = null
+  sourceElRect: Rect | null = null
 
   // options that can be set directly by caller
   // TODO: wire up
@@ -32,8 +33,8 @@ export default class ElementMirror {
   }
 
   handleMove(left: number, top: number) {
-    this.deltaX = left - this.origX
-    this.deltaY = top - this.origY
+    this.deltaX = left - this.origX!
+    this.deltaY = top - this.origY!
     this.updateElPosition()
   }
 
@@ -74,15 +75,15 @@ export default class ElementMirror {
   }
 
   doRevertAnimation(callback: () => void) {
-    let { mirrorEl } = this
+    let mirrorEl = this.mirrorEl!
 
     mirrorEl.style.transition =
       'top ' + this.revertDuration + 'ms,' +
       'left ' + this.revertDuration + 'ms'
 
     applyStyle(mirrorEl, {
-      left: this.sourceElRect.left,
-      top: this.sourceElRect.top
+      left: this.sourceElRect!.left,
+      top: this.sourceElRect!.top
     })
 
     whenTransitionDone(mirrorEl, () => {
@@ -108,8 +109,8 @@ export default class ElementMirror {
       }
 
       applyStyle(this.getMirrorEl(), {
-        left: this.sourceElRect.left + this.deltaX,
-        top: this.sourceElRect.top + this.deltaY
+        left: this.sourceElRect.left + this.deltaX!,
+        top: this.sourceElRect.top + this.deltaY!
       })
     }
   }
@@ -118,7 +119,7 @@ export default class ElementMirror {
     let mirrorEl = this.mirrorEl
 
     if (!mirrorEl) {
-      mirrorEl = this.mirrorEl = this.sourceEl.cloneNode(true) as HTMLElement // cloneChildren=true
+      mirrorEl = this.mirrorEl = this.sourceEl!.cloneNode(true) as HTMLElement // cloneChildren=true
       // we don't want long taps or any mouse interaction causing selection/menus.
       // would use preventSelection(), but that prevents selectstart, causing problems.
       mirrorEl.classList.add('fc-unselectable')
@@ -139,8 +140,8 @@ export default class ElementMirror {
         bottom: 'auto', // erase and set height instead
 
         // vvv use sourceElRect instead?
-        width: this.sourceEl.offsetWidth, // explicit height in case there was a 'right' value
-        height: this.sourceEl.offsetHeight, // explicit width in case there was a 'bottom' value
+        width: this.sourceEl!.offsetWidth, // explicit height in case there was a 'right' value
+        height: this.sourceEl!.offsetHeight, // explicit width in case there was a 'bottom' value
         //opacity: this.options.opacity || '',
         //zIndex: this.options.zIndex
       })

src/dnd/FeaturefulElementDragging.ts

@@ -17,7 +17,7 @@ export default class FeaturefulElementDragging extends ElementDragging {
 
   // options that can be directly set by caller
   // the caller can also set the PointerDragging's options as well
-  delay: number
+  delay: number | null = null
   minDistance: number = 0
   touchScrollAllowed: boolean = true
 
@@ -25,9 +25,9 @@ export default class FeaturefulElementDragging extends ElementDragging {
   isDragging: boolean = false // is it INTENTFULLY dragging? lasts until after revert animation
   isDelayEnded: boolean = false
   isDistanceSurpassed: boolean = false
-  delayTimeoutId: number
-  origX: number
-  origY: number
+  delayTimeoutId: number | null = null
+  origX?: number
+  origY?: number
 
   constructor(containerEl: HTMLElement) {
     super()
@@ -78,8 +78,8 @@ export default class FeaturefulElementDragging extends ElementDragging {
       this.mirror.handleMove(ev.pageX, ev.pageY)
 
       if (!this.isDistanceSurpassed) {
-        let dx = ev.pageX - this.origX
-        let dy = ev.pageY - this.origY
+        let dx = ev.pageX - this.origX!
+        let dy = ev.pageY - this.origY!
         let minDistance = this.minDistance
         let distanceSq // current distance from the origin, squared
 

src/dnd/PointerDragging.ts

@@ -27,13 +27,13 @@ emits:
 export default class PointerDragging {
 
   containerEl: HTMLElement
-  subjectEl: HTMLElement
-  downEl: HTMLElement
+  subjectEl: HTMLElement | null = null
+  downEl: HTMLElement | null = null
   emitter: EmitterMixin
 
   // options that can be directly assigned by caller
-  selector: string // will cause subjectEl in all emitted events to be this element
-  handleSelector: string
+  selector: string = '' // will cause subjectEl in all emitted events to be this element
+  handleSelector: string = ''
   shouldIgnoreMove: boolean = false
 
   // internal states
@@ -99,7 +99,7 @@ export default class PointerDragging {
       isPrimaryMouseButton(ev) &&
       this.tryStart(ev)
     ) {
-      this.emitter.trigger('pointerdown', createEventFromMouse(ev, this.subjectEl))
+      this.emitter.trigger('pointerdown', createEventFromMouse(ev, this.subjectEl!))
 
       if (!this.shouldIgnoreMove) {
         document.addEventListener('mousemove', this.handleMouseMove)
@@ -110,14 +110,14 @@ export default class PointerDragging {
   }
 
   handleMouseMove = (ev: MouseEvent) => {
-    this.emitter.trigger('pointermove', createEventFromMouse(ev, this.subjectEl))
+    this.emitter.trigger('pointermove', createEventFromMouse(ev, this.subjectEl!))
   }
 
   handleMouseUp = (ev: MouseEvent) => {
     document.removeEventListener('mousemove', this.handleMouseMove)
     document.removeEventListener('mouseup', this.handleMouseUp)
 
-    this.emitter.trigger('pointerup', createEventFromMouse(ev, this.subjectEl))
+    this.emitter.trigger('pointerup', createEventFromMouse(ev, this.subjectEl!))
 
     this.cleanup() // call last so that pointerup has access to props
   }
@@ -134,11 +134,11 @@ export default class PointerDragging {
     if (this.tryStart(ev)) {
       this.isTouchDragging = true
 
-      this.emitter.trigger('pointerdown', createEventFromTouch(ev, this.subjectEl))
+      this.emitter.trigger('pointerdown', createEventFromTouch(ev, this.subjectEl!))
 
       // unlike mouse, need to attach to target, not document
       // https://stackoverflow.com/a/45760014
-      let target = ev.target
+      let target = ev.target as HTMLElement
 
       if (!this.shouldIgnoreMove) {
         target.addEventListener('touchmove', this.handleTouchMove)
@@ -160,19 +160,19 @@ export default class PointerDragging {
   }
 
   handleTouchMove = (ev: TouchEvent) => {
-    this.emitter.trigger('pointermove', createEventFromTouch(ev, this.subjectEl))
+    this.emitter.trigger('pointermove', createEventFromTouch(ev, this.subjectEl!))
   }
 
   handleTouchEnd = (ev: TouchEvent) => {
     if (this.isDragging) { // done to guard against touchend followed by touchcancel
-      let target = ev.target
+      let target = ev.target as HTMLElement
 
       target.removeEventListener('touchmove', this.handleTouchMove)
       target.removeEventListener('touchend', this.handleTouchEnd)
       target.removeEventListener('touchcancel', this.handleTouchEnd)
       window.removeEventListener('scroll', this.handleTouchScroll)
 
-      this.emitter.trigger('pointerup', createEventFromTouch(ev, this.subjectEl))
+      this.emitter.trigger('pointerup', createEventFromTouch(ev, this.subjectEl!))
 
       this.cleanup() // call last so that pointerup has access to props
       this.isTouchDragging = false

src/dnd/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "extends": "../../tsconfig",
   "compilerOptions": {
-    "noImplicitAny": true
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictPropertyInitialization": true
   }
 }

src/util/geom.ts

@@ -1,6 +1,19 @@
 
+export interface Point {
+  left: number
+  top: number
+}
+
+export interface Rect {
+  left: number
+  right: number
+  top: number
+  bottom: number
+}
+
+
 // Returns a new rectangle that is the intersection of the two rectangles. If they don't intersect, returns false
-export function intersectRects(rect1, rect2) {
+export function intersectRects(rect1: Rect, rect2: Rect): Rect | false {
   let res = {
     left: Math.max(rect1.left, rect2.left),
     right: Math.min(rect1.right, rect2.right),
@@ -11,12 +24,13 @@ export function intersectRects(rect1, rect2) {
   if (res.left < res.right && res.top < res.bottom) {
     return res
   }
+
   return false
 }
 
 
 // Returns a new point that will have been moved to reside within the given rectangle
-export function constrainPoint(point, rect) {
+export function constrainPoint(point: Point, rect: Rect): Point {
   return {
     left: Math.min(Math.max(point.left, rect.left), rect.right),
     top: Math.min(Math.max(point.top, rect.top), rect.bottom)
@@ -25,7 +39,7 @@ export function constrainPoint(point, rect) {
 
 
 // Returns a point that is the center of the given rectangle
-export function getRectCenter(rect) {
+export function getRectCenter(rect: Rect): Point {
   return {
     left: (rect.left + rect.right) / 2,
     top: (rect.top + rect.bottom) / 2
@@ -34,7 +48,7 @@ export function getRectCenter(rect) {
 
 
 // Subtracts point2's coordinates from point1's coordinates, returning a delta
-export function diffPoints(point1, point2) {
+export function diffPoints(point1: Point, point2: Point): Point {
   return {
     left: point1.left - point2.left,
     top: point1.top - point2.top