73

typescript を使用する場合、使用するすべての外部 js に対して plugin.d.ts をインポートする必要がありますか? つまり、すべてのインターフェースを備えた jQuery.d.ts を作成する必要がありますか?

4

5 に答える 5

102

jQuery プラグイン (およびその他のプラグイン ベースのライブラリ) の問題は、ベース ライブラリに library.d.ts ファイルが必要なだけでなく、プラグインごとに plugin.d.ts ファイルも必要になることです。そしてどういうわけか、これらの plugin.d.ts ファイルは、library.d.ts ファイルで定義されたライブラリ インターフェイスを拡張する必要があります。幸いなことに、TypeScript には、まさにそれを可能にする気の利いた小さな機能があります。

classes現在、プロジェクト内のクラスの円錐形の定義は 1 つだけです。したがって、 a を定義すると、class Foo配置するメンバーだけFooが得られます。をさらに定義Fooすると、エラーが発生します。interfacesただし、 ではメンバーが追加されるため、一連のメンバーで定義するとinterface Bar、「インターフェイス バー」をもう一度定義して、 に追加のメンバーを追加できますinterface。これが、強く型付けされた方法で jQuery プラグインをサポートするための鍵です。

したがって、特定の jQuery プラグインのサポートを追加するには、使用するプラグインの plugin.d.ts ファイルを作成する必要があります。プロジェクトでjQuery テンプレートを使用するため、そのプラグインのサポートを追加するために作成した jquery.tmpl.d.ts ファイルを次に示します。

interface JQuery
{
    tmpl(data?:any,options?:any): JQuery;
    tmplItem(): JQueryTmplItem;
    template(name?:string): ()=>any;
}

interface JQueryStatic
{
    tmpl(template:string,data?:any,options?:any): JQuery;
    tmpl(template:(data:any)=>string,data?:any,options?:any): JQuery;
    tmplItem(element:JQuery): JQueryTmplItem;
    tmplItem(element:HTMLElement): JQueryTmplItem;
    template(name:string,template:any): (data:any)=>string[];
    template(template:any): JQueryTemplateDelegate;
}

interface JQueryTemplateDelegate {
    (jQuery: JQueryStatic, data: any):string[];
}

interface JQueryTmplItem
{
    data:any;
    nodes:HTMLElement[];
    key:number;
    parent:JQueryTmplItem;
}

これを分解して最初にしたことは、JQueryインターフェースに追加されるメソッドを定義することです。これらにより、入力時にインテリセンスと型チェックを取得できます次に、入力時に表示されるインターフェイスに$('#foo').tmpl();メソッドを追加しました最後に、jQuery テンプレートプラグインは独自のデータ構造のいくつかを定義するため、それらの構造のインターフェイスを定義する必要がありました。JQueryStatic$.tmpl();

追加のインターフェイスが定義されたので、消費する .ts ファイルからそれらを参照する必要があります。これを行うには、以下の参照を .ts ファイルの先頭に追加するだけです。そのファイルの場合、TypeScript はベース jQuery メソッドとプラグイン メソッドの両方を認識します。複数のプラグインを使用する場合は、個々の plugin.d.ts ファイルをすべて参照していることを確認してください。

/// <reference path="jquery.d.ts"/>
/// <reference path="jquery.tmpl.d.ts" />
于 2012-10-04T07:10:14.433 に答える
4

Saving a .ts file does not automatically trigger compilation in Visual Studio. You will need to build/rebuild to trigger the compilation.

Declare files (file.d.ts) lets the TypeScript compiler get better type information about the JavaScript libraries you are using from that file. You can have your interfaces defined all in one file, or in multiple files; this should not make any difference. You can also "declare" the types/variables you are using from external libraries using something like:

declare var x: number;

which will tell the compiler to treat x as a number.

于 2012-10-04T03:24:35.317 に答える
2

プラグイン用に独自のファイルを作成する前に、それが既にFixedTypedライブラリ.d.tsとして存在するかどうかを確認する必要があります。たとえば、Typingsを使用して、次のコマンドを実行できます。

typings install dt~bootstrap --global --save

...そして追加のコードなしで、さまざまな Bootstrap プラグインにアクセスできます。

探しているプラ​​グインがない場合は、独自の定義を提供することを検討してください。

于 2016-11-03T23:04:16.950 に答える