fix: update imports and improve TypeScript typings across binding handlers

Author: phillipc

packages/bind/spec/bindingHandlerBehaviors.ts

@@ -10,7 +10,7 @@ import { VirtualProvider } from '@tko/provider.virtual'
 
 import { DataBindProvider } from '@tko/provider.databind'
 
-import { applyBindings, BindingHandler, contextFor } from '../dist'
+import { applyBindings, BindingHandler, contextFor } from '../src'
 
 import { bindings as coreBindings } from '@tko/binding.core'
 import { bindings as templateBindings } from '@tko/binding.template'
@@ -48,9 +48,9 @@ describe('BindingHandler behaviors', function () {
         v: Observable
         x: Observable
         y: Observable
-        declare computed: any
-        constructor(...args) {
-          super(...args)
+
+        constructor(params) {
+          super(params)
           const v = (this.v = koObservable(0))
           instance = this
           this.x = this.computed(() => {
@@ -92,9 +92,8 @@ describe('BindingHandler behaviors', function () {
       let obs = koObservable(),
         handlerInstance
       bindingHandlers.fnHandler = class extends BindingHandler {
-        declare subscribe: any
-        constructor(...args) {
-          super(...args)
+        constructor(params) {
+          super(params)
           handlerInstance = this
           this.subscribe(obs, this.cb)
         }
@@ -110,7 +109,7 @@ describe('BindingHandler behaviors', function () {
     })
 
     it('registers a kind with HandlerClass.register', function () {
-      class HC extends BindingHandler {}
+      class HC extends BindingHandler<any> {}
 
       BindingHandler.registerBindingHandler(HC, 'testHCregistration')
       expect(bindingHandlers.testHCregistration).toEqual(HC)

packages/bind/src/BindingHandler.ts

@@ -97,7 +97,11 @@ export class BindingHandler<T = any> extends LifeCycle {
     provider.bindingHandlers.set(name, this) //todo dangerous javascript: this in static function = this is calling object
   }
 
-  static registerBindingHandler(handler: BindingHandler, name: string, provider = options.bindingProviderInstance) {
+  static registerBindingHandler(
+    handler: typeof BindingHandler,
+    name: string,
+    provider = options.bindingProviderInstance
+  ) {
     provider.bindingHandlers.set(name, handler)
   }
 }

packages/binding.core/src/textInput.ts

@@ -17,14 +17,18 @@ class TextInput extends BindingHandler {
     return 'textinput'
   }
 
-  declare $element: HTMLInputElement
+  get $inputElement(): HTMLInputElement {
+    return this.$element as HTMLInputElement
+  }
+
   previousElementValue: any
   elementValueBeforeEvent?: ReturnType<typeof setTimeout>
   timeoutHandle?: ReturnType<typeof setTimeout>
 
   constructor(...args: [any]) {
     super(...args)
-    this.previousElementValue = this.$element.value
+
+    this.previousElementValue = this.$inputElement.value
 
     if (options.debug && (this.constructor as any)._forceUpdateOn) {
       // Provide a way for tests to specify exactly which events are bound
@@ -58,7 +62,7 @@ class TextInput extends BindingHandler {
   }
 
   updateModel(event) {
-    const element = this.$element
+    const element = this.$inputElement
     clearTimeout(this.timeoutHandle)
     this.elementValueBeforeEvent = this.timeoutHandle = undefined
     const elementValue = element.value
@@ -73,7 +77,7 @@ class TextInput extends BindingHandler {
   }
 
   deferUpdateModel(event: any) {
-    const element = this.$element
+    const element = this.$inputElement
     if (!this.timeoutHandle) {
       // The elementValueBeforeEvent variable is set *only* during the brief gap between an
       // event firing and the updateModel function running. This allows us to ignore model
@@ -92,12 +96,12 @@ class TextInput extends BindingHandler {
     }
     if (this.elementValueBeforeEvent !== undefined && modelValue === this.elementValueBeforeEvent) {
       setTimeout(this.updateView.bind(this), 4)
-    } else if (this.$element.value !== modelValue) {
+    } else if (this.$inputElement.value !== modelValue) {
       // Update the element only if the element and model are different. On some browsers, updating the value
       // will move the cursor to the end of the input, which would be bad while the user is typing.
       this.previousElementValue = modelValue // Make sure we ignore events (propertychange) that result from updating the value
-      this.$element.value = modelValue
-      this.previousElementValue = this.$element.value // In case the browser changes the value (see #2281)
+      this.$inputElement.value = modelValue
+      this.previousElementValue = this.$inputElement.value // In case the browser changes the value (see #2281)
     }
   }
 }

packages/binding.core/src/value.ts

@@ -11,7 +11,6 @@ export class value extends BindingHandler {
     return ['options', 'foreach', 'template']
   }
 
-  declare $element: HTMLInputElement
   elementValueBeforeEvent: any
   propertyChangeFired: any
   propertyChangedFired: boolean
@@ -36,7 +35,7 @@ export class value extends BindingHandler {
 
     arrayForEach(this.eventsToCatch, eventName => this.registerEvent(eventName))
 
-    if (this.isInput && this.$element.type === 'file') {
+    if (this.isInput(this.$element) && this.$element.type === 'file') {
       this.updateFromModel = this.updateFromModelForFile
     } else {
       this.updateFromModel = this.updateFromModelForValue
@@ -52,20 +51,20 @@ export class value extends BindingHandler {
     return [...new Set(['change', ...requestedEventsArray])]
   }
 
-  get isInput() {
+  isInput(element: HTMLElement): element is HTMLInputElement {
     return tagNameLower(this.$element) === 'input'
   }
 
   get isCheckboxOrRadio() {
     const e = this.$element
-    return this.isInput && (e.type == 'checkbox' || e.type == 'radio')
+    return this.isInput(e) && (e.type == 'checkbox' || e.type == 'radio')
   }
 
   // Workaround for https://github.com/SteveSanderson/knockout/issues/122
   // IE doesn't fire "change" events on textboxes if the user selects a value from its autocomplete list
   get ieAutoCompleteHackNeeded() {
     return (
-      this.isInput
+      this.isInput(this.$element)
       && this.$element.type == 'text'
       && this.$element.autocomplete != 'off'
       && (!this.$element.form || this.$element.form.autocomplete != 'off')
@@ -105,7 +104,7 @@ export class value extends BindingHandler {
     // For file input elements, can only write the empty string
     const newValue = unwrap(this.value)
     if (newValue === null || newValue === undefined || newValue === '') {
-      this.$element.value = ''
+      ;(this.$element as HTMLInputElement).value = ''
     } else {
       dependencyDetection.ignore(this.valueUpdateHandler, this) // reset the model to match the element
     }

packages/lifecycle/src/LifeCycle.ts

@@ -3,6 +3,7 @@
 import { addDisposeCallback, createSymbolOrString } from '@tko/utils'
 
 import { computed } from '@tko/computed'
+import { Observable } from 'packages/observable'
 
 const SUBSCRIPTIONS = createSymbolOrString('LifeCycle Subscriptions List')
 const ANCHOR_NODE = createSymbolOrString('LifeCycle Anchor Node')
@@ -24,7 +25,7 @@ export default class LifeCycle {
     }
   }
 
-  subscribe(observable, action, subscriptionType) {
+  subscribe(observable: Observable, action, subscriptionType?: string) {
     if (typeof action === 'string') {
       action = this[action]
     }