How do I define a knockout binding handler in typescript?
Defining a custom binding handler
Its actually pretty easy, just add it (myBindingHandler
) to the KnockoutBindingHandlers
interface right before you define your custom binding handler. Please note that you have to do make this addition to the interface, within a .d.ts
file as of version 1.0 (or possibly earlier).
bindingHandlers.d.ts
/// <reference path="typings/knockout/knockout.d.ts" />interface KnockoutBindingHandlers { myBindingHandler: KnockoutBindingHandler;}
myBindingHandler.ts
/// <reference path="bindingHandler.d.ts" />ko.bindingHandlers.myBindingHandler = {...}
Now everything works. This will not overwrite any existing definitions or declarations, so your definition will sit along side of ko.bindingHandlers.text
, etc.
Just be careful, because if you do not include an actual definition of myBindingHandler
and you reference it elsewhere, it will compile due to the definition you added to KnockoutBindingHandlers
, but it will break at runtime because there is no implementation of myBindingHandler
.
The documentation for adding custom bindinghandlers in knockoutjs is here
Using fn to add custom functions with TypeScript
Similarly, to add something to ko.observable.fn
, you'd do this in typescript
interface KnockoutObservableFunctions { myFnExtension(args: any): returnType; }
and call it with
// x will be defined as a returnType automatically, but you could specify it if you like, either wayvar x: returnType = ko.observable("value").myFnExtension(args);
Note: There are different interfaces for the subscribable
, observable
, observableArray
, and computed
types:
ko.subscribable.fn
... add toKnockoutSubscribableFunctions
ko.observable.fn
... add toKnockoutObservableFunctions
ko.observableArray.fn
... add toKnockoutObservableArrayFunctions
ko.computed.fn
... add toKnockoutComputedFunctions
The documentation for adding onto fn in knockoutjs is here
you can simply ignore it,but this is not a good practice, by casting to any
you are not defining the type of the property myBindingHandler
(<any>ko.bindingHandlers).myBindingHandler = { ... };
Another dirty way to ignore any kind of type checking:
let bindingHandlers: any = ko.bindingHandlers;bindingHandlers.myHandler = {...}