web-dev-qa-db-ja.com

typescriptでノックアウトバインディングハンドラーを定義するにはどうすればよいですか？

私は通常カスタム knockout（Binding Handlers JavaScriptで

ko.bindingHandlers.myBindingHandler = {...}

しかし今私はそれらを TypeScript を介して追加する必要があります

ko.bindingHandlers["myBindingHandler"] = {...}

それ以外の場合、 TypeScript.d.ts を使用しているため、このエラーが発生します。

プロパティ「myBindingHandler」はタイプ「KnockoutBindingHandlers」の値に存在しません

["property"]のアプローチは好きではありません。それを参照することも、後でインテリセンスを利用することもできないためです。

したがって、 definitelyTypedのノックアウト定義 を使用しながら、カスタムバインディングハンドラーをノックアウトに追加しながら、インテリセンスなどによる定義？

knockout.jstypescriptdefinitelytyped
41
Allen Rice

カスタムバインディングハンドラーの定義

それは実際にはかなり簡単です、それをmyBindingHandlerインターフェースに追加するだけです（KnockoutBindingHandlers） カスタムバインディングハンドラーを定義する直前。 バージョン1.0（またはそれ以前）の.d.tsファイル内で、インターフェースにこの追加を行う必要があることに注意してください。

bindingHandlers.d.ts

/// <reference path="typings/knockout/knockout.d.ts" />

interface KnockoutBindingHandlers {
    myBindingHandler: KnockoutBindingHandler;
}

myBindingHandler.ts

/// <reference path="bindingHandler.d.ts" />

ko.bindingHandlers.myBindingHandler = {...}

これですべてが機能します。これによって既存の定義や宣言が上書きされることはないため、定義はko.bindingHandlers.textなどの横に配置されます。

myBindingHandlerの実際の定義を含めず、他の場所で参照すると、KnockoutBindingHandlersに追加した定義のためにコンパイルされますが、実行時に破損するため、注意してください。 myBindingHandlerの実装はありません。

Knockoutjsにカスタムバインディングハンドラーを追加するためのドキュメントはここです。

Fnを使用してTypeScriptでカスタム関数を追加する

同様に、ko.observable.fnに何かを追加するには、TypeScriptでこれを行います

interface KnockoutObservableFunctions  { 
    myFnExtension(args: any): returnType; 
}

そしてそれを呼び出す

// x will be defined as a returnType automatically, but you could specify it if you like, either way
var x: returnType = ko.observable("value").myFnExtension(args);

注：subscribable、observable、observableArray、およびcomputedタイプにはさまざまなインターフェースがあります。

  • ko.subscribable.fn ... KnockoutSubscribableFunctionsに追加
  • ko.observable.fn ... KnockoutObservableFunctionsに追加
  • ko.observableArray.fn ... KnockoutObservableArrayFunctionsに追加
  • ko.computed.fn ... KnockoutComputedFunctionsに追加

Knockoutjsのfnに追加するためのドキュメントはここ

54
Allen Rice