refactor: improve types

.babelrc.js

@@ -1,13 +1,11 @@
 module.exports = {
   presets: [
-    ...process.env.NODE_ENV === 'test'
-      ? []
-      : [require('@babel/preset-env').default],
+    process.env.NODE_ENV !== 'test' && [require('@babel/preset-env').default, { loose: true }],
     [require('@babel/preset-typescript').default, {
       allExtensions: true,
       isTSX: true,
     }],
-  ],
+  ].filter(Boolean),
 
   plugins:
     process.env.NODE_ENV === 'production'
@@ -18,6 +16,7 @@ module.exports = {
           noInterop: true,
         }],
         require('@babel/plugin-proposal-optional-catch-binding').default,
+        [require('@babel/plugin-proposal-optional-chaining').default],
         [require('@babel/plugin-transform-runtime').default, {
           helpers: false,
           regenerator: false,

.yarnrc

@@ -0,0 +1 @@
+registry "https://registry.npmjs.org"

package.json

@@ -24,6 +24,7 @@
     "@babel/plugin-proposal-class-properties": "latest",
     "@babel/plugin-proposal-export-default-from": "latest",
     "@babel/plugin-proposal-optional-catch-binding": "latest",
+    "@babel/plugin-proposal-optional-chaining": "latest",
     "@babel/plugin-transform-modules-commonjs": "latest",
     "@babel/plugin-transform-runtime": "latest",
     "@babel/preset-env": "latest",

packages/@interactjs/actions/drop/DropEvent.ts

@@ -4,7 +4,7 @@ import { Interactable } from '@interactjs/core/Interactable'
 import * as Interact from '@interactjs/types/index'
 import * as arr from '@interactjs/utils/arr'
 
-export class DropEvent extends BaseEvent {
+export class DropEvent extends BaseEvent<'drag'> {
   target: Interact.Element
   dropzone: Interactable
   dragEvent: InteractEvent<'drag'>

packages/@interactjs/actions/drop/plugin.ts

@@ -66,7 +66,7 @@ declare module '@interactjs/core/interactStatic' {
 }
 
 interface DropSignalArg {
-  interaction: Interact.Interaction
+  interaction: Interact.Interaction<'drag'>
   dragEvent: Interact.DragEvent
 }
 

packages/@interactjs/auto-scroll/plugin.ts

@@ -150,7 +150,7 @@ const autoScroll = {
   check (interactable: Interact.Interactable, actionName: Interact.ActionName) {
     const options = interactable.options
 
-    return options[actionName].autoScroll && options[actionName].autoScroll.enabled
+    return options[actionName].autoScroll?.enabled
   },
   onInteractionMove<T extends Interact.ActionName> ({ interaction, pointer }: { interaction: Interact.Interaction<T>, pointer: Interact.PointerType }) {
     if (!(interaction.interacting() &&

packages/@interactjs/auto-start/base.ts

@@ -133,7 +133,7 @@ function startOnMove (arg: Interact.SignalArgs['interactions:move'], scope: Inte
   scope.fire('autoStart:before-start', arg)
 
   const { interactable } = interaction
-  const actionName = interaction.prepared.name
+  const actionName = (interaction as Interact.Interaction<Interact.ActionName>).prepared.name
 
   if (actionName && interactable) {
     // check manualStart and interaction limit
@@ -354,7 +354,7 @@ function setInteractionCursor<T extends Interact.ActionName> (interaction: Inter
   let cursor = ''
 
   if (prepared.name) {
-    const cursorChecker: Interact.CursorChecker = interactable.options[prepared.name].cursorChecker
+    const cursorChecker = interactable.options[prepared.name].cursorChecker
 
     if (is.func(cursorChecker)) {
       cursor = cursorChecker(prepared, interactable, element, interaction._interacting)

packages/@interactjs/auto-start/dragAxis.ts

@@ -21,7 +21,7 @@ function beforeStart ({ interaction, eventTarget, dx, dy }: Interact.SignalArgs[
   // if the movement isn't in the startAxis of the interactable
   if (currentAxis !== 'xy' && startAxis !== 'xy' && startAxis !== currentAxis) {
     // cancel the prepared action
-    interaction.prepared.name = null
+    (interaction as Interact.Interaction<Interact.ActionName>).prepared.name = null
 
     // then try to get a drag from another ineractable
     let element = eventTarget as Interact.Element
@@ -50,7 +50,7 @@ function beforeStart ({ interaction, eventTarget, dx, dy }: Interact.SignalArgs[
       const interactable = scope.interactables.forEachMatch(element, getDraggable)
 
       if (interactable) {
-        interaction.prepared.name = 'drag'
+        (interaction as Interact.Interaction<Interact.ActionName>).prepared.name = 'drag'
         interaction.interactable = interactable
         interaction.element = element
         break

packages/@interactjs/core/BaseEvent.ts

@@ -1,6 +1,6 @@
 import * as Interact from '@interactjs/types/index'
 
-export class BaseEvent<T extends Interact.ActionName = any> {
+export class BaseEvent<T extends Interact.ActionName = never> {
   type: string
   target: EventTarget
   currentTarget: Node
@@ -10,7 +10,7 @@ export class BaseEvent<T extends Interact.ActionName = any> {
   immediatePropagationStopped = false
   propagationStopped = false
 
-  constructor (interaction: Interact.Interaction) {
+  constructor (interaction: Interact.Interaction<T>) {
     this._interaction = interaction
   }
 
@@ -33,7 +33,7 @@ export class BaseEvent<T extends Interact.ActionName = any> {
 
 // defined outside of class definition to avoid assignment of undefined during
 // construction
-export interface BaseEvent<T extends Interact.ActionName = any> {
+export interface BaseEvent<T extends Interact.ActionName> {
   interaction: Interact.InteractionProxy<T>
 }
 

packages/@interactjs/core/Eventable.ts

@@ -3,10 +3,7 @@ import * as arr from '@interactjs/utils/arr'
 import extend from '@interactjs/utils/extend'
 import normalize, { NormalizedListeners } from '@interactjs/utils/normalizeListeners'
 
-function fireUntilImmediateStopped<
-  T extends Interact.ActionName,
-  P extends Interact.EventPhase,
-> (event: Interact.InteractEvent<T, P>, listeners: Interact.Listener[]) {
+function fireUntilImmediateStopped (event: any, listeners: Interact.Listener[]) {
   for (const listener of listeners) {
     if (event.immediatePropagationStopped) { break }
 
@@ -25,7 +22,7 @@ export class Eventable {
     this.options = extend({}, options || {})
   }
 
-  fire (event: any) {
+  fire<T extends { type: string, propagationStopped?: boolean }> (event: T) {
     let listeners: Interact.Listener[]
     const global = this.global
 

packages/@interactjs/core/InteractEvent.ts

@@ -70,7 +70,7 @@ export class InteractEvent<
 
   /** */
   constructor (
-    interaction: Interaction,
+    interaction: Interaction<T>,
     event: Interact.PointerEventType,
     actionName: T,
     phase: P,

packages/@interactjs/core/Interactable.ts

@@ -286,7 +286,7 @@ export class Interactable implements Partial<Eventable> {
    * Interactable
    * @return {Interactable} this Interactable
    */
-  fire (iEvent: { type: string, [index: string]: any }) {
+  fire<E extends { type: string }> (iEvent: E) {
     this.events.fire(iEvent)
 
     return this
@@ -373,7 +373,7 @@ export class Interactable implements Partial<Eventable> {
       this.options[actionName] = {}
       this.setPerAction(actionName, extend(extend({}, defaults.perAction), defaults.actions[actionName]))
 
-      ;(this as unknown as Interactable & { [key: string]: Interact.ActionMethod<unknown> })[methodName](options[actionName])
+      ;(this[methodName] as Interact.ActionMethod<unknown>)(options[actionName])
     }
 
     for (const setting in options) {

packages/@interactjs/core/Interaction.ts

@@ -1,3 +1,4 @@
+import type { ActionDefaults } from '@interactjs/core/defaultOptions'
 import * as Interact from '@interactjs/types/index'
 import * as arr from '@interactjs/utils/arr'
 import extend from '@interactjs/utils/extend'
@@ -11,16 +12,12 @@ import { Interactable } from './Interactable'
 import { PointerInfo } from './PointerInfo'
 import { ActionName } from './scope'
 
-export interface ActionProps<T extends ActionName = Interact.ActionName> {
+export interface ActionProps<T extends ActionName = never> {
   name: T
   axis?: 'x' | 'y' | 'xy'
   edges?: Interact.EdgeOptions
 }
 
-export interface StartAction extends ActionProps {
-  name: ActionName
-}
-
 export enum _ProxyValues {
   interactable = '',
   element = '',
@@ -44,7 +41,7 @@ export type PointerArgProps<T extends {} = {}> = {
   eventTarget: Node
   pointerIndex: number
   pointerInfo: PointerInfo
-  interaction: Interaction
+  interaction: Interaction<never>
 } & T
 
 export interface DoPhaseArg<T extends ActionName, P extends EventPhase> {
@@ -60,7 +57,7 @@ export type DoAnyPhaseArg = DoPhaseArg<ActionName, EventPhase>
 
 declare module '@interactjs/core/scope' {
   interface SignalArgs {
-    'interactions:new': { interaction: Interaction }
+    'interactions:new': { interaction: Interaction<ActionName> }
     'interactions:down': PointerArgProps<{
       type: 'down'
     }>
@@ -225,7 +222,7 @@ export class Interaction<T extends ActionName = ActionName> {
       pointerIndex,
       pointerInfo,
       type: 'down',
-      interaction: this,
+      interaction: this as unknown as Interact.Interaction<never>,
     })
   }
 
@@ -260,11 +257,11 @@ export class Interaction<T extends ActionName = ActionName> {
    * @param {Element} element The DOM Element to target
    * @return {Boolean} Whether the interaction was successfully started
    */
-  start (action: StartAction, interactable: Interactable, element: Interact.Element): boolean {
+  start<A extends ActionName> (action: ActionProps<A>, interactable: Interactable, element: Interact.Element): boolean {
     if (this.interacting() ||
         !this.pointerIsDown ||
         this.pointers.length < (action.name === 'gesture' ? 2 : 1) ||
-        !interactable.options[action.name].enabled) {
+        !interactable.options[action.name as keyof ActionDefaults].enabled) {
       return false
     }
 
@@ -318,7 +315,7 @@ export class Interaction<T extends ActionName = ActionName> {
       dx,
       dy,
       duplicate: duplicateMove,
-      interaction: this,
+      interaction: this as unknown as Interact.Interaction<never>,
     }
 
     if (!duplicateMove) {
@@ -394,7 +391,7 @@ export class Interaction<T extends ActionName = ActionName> {
       eventTarget,
       type: type as any,
       curEventTarget,
-      interaction: this,
+      interaction: this as unknown as Interact.Interaction<never>,
     })
 
     if (!this.simulation) {
@@ -530,7 +527,7 @@ export class Interaction<T extends ActionName = ActionName> {
       down,
       pointerInfo,
       pointerIndex,
-      interaction: this,
+      interaction: this as unknown as Interact.Interaction<never>,
     })
 
     return pointerIndex
@@ -549,7 +546,7 @@ export class Interaction<T extends ActionName = ActionName> {
       eventTarget: null,
       pointerIndex,
       pointerInfo,
-      interaction: this,
+      interaction: this as unknown as Interact.Interaction<never>,
     })
 
     this.pointers.splice(pointerIndex, 1)

packages/@interactjs/core/interactions.ts

@@ -12,8 +12,8 @@ declare module '@interactjs/core/scope' {
   interface Scope {
     Interaction: typeof InteractionBase
     interactions: {
-      new: <T extends ActionName> (options: any) => InteractionBase<T>
-      list: InteractionBase[]
+      new: <T extends Interact.ActionName> (options: any) => InteractionBase<T>
+      list: Array<InteractionBase<ActionName>>
       listeners: { [type: string]: Interact.Listener }
       docEvents: Array<{ type: string, listener: Interact.Listener }>
       pointerMoveTolerance: number

packages/@interactjs/core/scope.ts

@@ -37,15 +37,13 @@ interface DocSignalArg {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface ActionMap { // tslint:disable-line no-empty-interface
-}
-
+export interface ActionMap {}
 export type ActionName = keyof ActionMap
 
 export interface Actions {
   map: ActionMap
   phases: PhaseMap
-  methodDict: { [P in ActionName]?: string }
+  methodDict: { [P in ActionName]?: keyof Interact.Interactable }
   phaselessTypes: { [type: string]: true }
 }
 

packages/@interactjs/core/tests/_helpers.ts

@@ -106,7 +106,7 @@ export function testEnv<T extends Interact.Target = HTMLElement> ({
     (target as unknown as HTMLElement) = scope.document.body
   }
 
-  const interaction = scope.interactions.new({})
+  const interaction = scope.interactions.new<any | never>({})
   const interactable = scope.interactables.new(target)
   const coords: pointerUtils.MockCoords = pointerUtils.newCoords()
 

packages/@interactjs/modifiers/aspectRatio.ts

@@ -8,7 +8,7 @@
  * interact(target).resizable({
  *   modifiers: [
  *     interact.modifiers.snapSize({
- *       targets: [ interact.createSnapGrid({ x: 20, y: 20 }) ],
+ *       targets: [ interact.snappers.grid({ x: 20, y: 20 }) ],
  *     }),
  *     interact.aspectRatio({ ratio: 'preserve' }),
  *   ],

packages/@interactjs/modifiers/base.ts

@@ -143,8 +143,8 @@ export function makeModifier<
 }
 
 export function addEventModifiers ({ iEvent, interaction: { modification: { result } } }: {
-  iEvent: Interact.InteractEvent<Interact.ActionName, Interact.EventPhase>
-  interaction: Interact.Interaction
+  iEvent: Interact.InteractEvent<any>
+  interaction: Interact.Interaction<any>
 }) {
   if (result) {
     iEvent.modifiers = result.eventProps

packages/@interactjs/modifiers/restrict/size.spec.ts

@@ -20,7 +20,7 @@ test('restrictSize', t => {
     move,
   } = helpers.testEnv({ plugins: [modifiersBase, resize], rect })
   const edges = { left: true, top: true }
-  const action = { name: 'resize', edges }
+  const action: any = { name: 'resize', edges }
   const options = {
     min: { width:  60, height:  50 } as any,
     max: { width: 300, height: 350 } as any,

packages/@interactjs/pointer-events/PointerEvent.spec.ts

@@ -20,7 +20,7 @@ test('PointerEvent constructor', t => {
   } as any
   const { interaction } = helpers.testEnv()
   const eventTarget = {} as Interact.Element
-  const pointerEvent = new PointerEvent(type, pointer, event, eventTarget, interaction, 0) as any
+  const pointerEvent = new PointerEvent(type, pointer, event, eventTarget, interaction as any, 0) as any
 
   t.equal(pointerEvent.testPointerProp, testPointerProp,
     'pointerEvent is extended form pointer')

packages/@interactjs/pointer-events/PointerEvent.ts

@@ -3,7 +3,7 @@ import * as pointerUtils from '@interactjs/utils/pointerUtils'
 
 import { BaseEvent } from '../core/BaseEvent'
 
-export default class PointerEvent<T extends string = any> extends BaseEvent {
+export default class PointerEvent<T extends string = any> extends BaseEvent<never> {
   type: T
   originalEvent: Interact.PointerEventType
   pointerId: number
@@ -23,7 +23,7 @@ export default class PointerEvent<T extends string = any> extends BaseEvent {
     pointer: Interact.PointerType | PointerEvent<any>,
     event: Interact.PointerEventType,
     eventTarget: Node,
-    interaction: Interact.Interaction,
+    interaction: Interact.Interaction<never>,
     timeStamp: number,
   ) {
     super(interaction)