6

TypeScriptでAMDパターンを使用してロードしたいjQueryプラグインがいくつかあります。たとえば、私はこの構造を持っているかもしれません：

/lib/jquery.myplugin.js
/app.ts

プラグインは単にjQueryを拡張します。新しいトップレベルの関数や変数は提供されません。例は次のとおりです。

// jquery.myplugin.js
jQuery.fn.myExample = function() { ... }

対応するjquery.myplugin.d.tsファイルは次のようになります。

interface JQuery {
    myExample();
}

これで、app.tsで。のようなものを呼び出すことができます$('#my-element').myExample()。これは、Microsoftからのjquery.d.ts宣言がすでにロードされていることを前提としていることに注意してください。

私の質問は、このライブラリを非同期でロードし、TypeScriptの静的型付けを利用するにはどうすればよいですか？私はそれを次のように使うことができます：

/// <reference path="lib/jquery.myplugin.d.ts"/>

ただし、HTMLにタグを追加する必要が<script>あり、ライブラリは非同期で読み込まれません。TypeScriptに次のコードを生成させたい：

define(["require", "exports", "lib/jquery.myplugin"], function (require, exports, __jquery.myplugin__) {
    ...
    // Use my plugin
    $('#my-element').myExample();
}

ただし、.d.tsファイルにエクスポートがないため、書き込むことができませんimport myplugin = module('lib/jquery.myplugin')。

私が得た最も近いものはjquery.myplugin.d.ts、インターフェイス宣言を使用して別のtsファイルを参照し、少なくとも1つのエクスポートを含むを作成することです。ただし、このライブラリにはエクスポートするものがありません。目的の出力を取得するには、エクスポートを追加するだけでなく、それを呼び出す必要があります。

更新： typescript.codeplex.comでこのための作業項目を開きました

4

3 に答える 3

4

一種のハックですが、これが私が現在知っている唯一の方法です。

myplugin.d.ts：JQueryStaticインターフェースを拡張して、mypluginの機能のインテリセンスを含めます

/// <reference path="../dep/jquery/jquery.d.ts" />

interface JQueryStatic {
    myFunc(): string;
}

myplugin.ts：typescriptにamdモジュール定義を生成させることだけを目的としたダミーファイル。

var test: number = 1;

Consumer.ts：

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

import myplugin = module('myplugin');

// without this typescript knows you aren't actually using the module
// and won't create the define block including your plugin
var workaround = myplugin.test;

$.myFunc();

Consumer.js：で生成tsc -c --module amd consumer.ts

define(["require", "exports", 'myplugin'], function(require, exports, __myplugin__) {
    /// <reference path="myplugin.d.ts" />
    var myplugin = __myplugin__;

    // without this typescript knows you aren't actually using the module
    // and won't create the define block including your plugin
    var workaround = myplugin.test;
    $.myFunc();
})

myplugin.d.tsは、jQueryとプラグイン定義の両方にインテリセンスを取り込むことに注意してください。myplugin.d.tsとmyplugin.tsの両方を作成する必要がありました。これは、同じファイル内の既存のインターフェイスをエラーなしで同時に拡張しながら、（可能であれば）何かをエクスポートする方法がわからないためです。

于 2012-10-22T17:48:18.280 に答える
3

Typescriptは、何かをエクスポートしない限り、またエクスポートしたものを直接使用しない限り、モジュールをインポートしませんが、$に新しいメソッドを追加するだけのJQueryプラグインのようなものには当てはまりません。解決策は、ここに記載されているようにamd-dependencyフラグを使用することです。

ファイルの先頭に次のような行を追加します。

///<amd-dependency path="jgrowl" />

defineこれにより、 TypescriptはコンパイルされたJavascriptの呼び出しでそれをリストするように強制されます。また、次のように、require.configでプラグインのパスとシムを設定する必要があります。

require.config({
  paths: {
    jquery: "external/jquery-2.1.1",
    jgrowl: "external/jquery.jgrowl-1.4.0.min",
  },
  shim: {
    'jgrowl': { deps: ['jquery'] },
  }
});
于 2014-12-12T01:36:57.843 に答える
1

インターフェイスが定義されているファイルの下部に、次のように入力できます。

export var JQuery: JQueryStatic;

これにより、JQueryのインテリセンスが。を使用してロードされたすべてのファイルに表示されますimport module。

ファイルが非同期でロードされていて、JQueryを別の変数（つまりmyJQuery）に設定している場合は、ファイルが特定の時点ですでにロードされていることを宣言できます。たとえば、ファイルが含まれている場合は、次の///<reference path=...>ことができるはずです。使用する：

declare var myJQuery: JQuery;

タイプJQueryのmyJQueryを作成します。

もう1つのハックは、コードが非同期でロードされている領域にインターフェイスを直接挿入することです。

interface JQueryStatic {
    myFunc(): string;
}

JQuery.d.tsファイルを編集してもかまわない場合は、そこで定義されているインターフェイスに関数を追加できます。

あなたの例に関連して、あなたは次のようなことをすることができるはずです：

declare var __jquery : JQueryStatic;

定義コールバックの上部。JQueryStaticのインターフェースを拡張し、マークアップを使用してそれを含めると///<reference path=...>、希望どおりに機能するはずです。

于 2013-02-01T06:14:36.697 に答える