エクスポートされていないTypeScript宣言の非同期ロード

Question

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

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

プラグインは単にjQueryを拡張します。新しいトップレベルの関数や変数は提供されません。例は次のようになります。今app.tsに私は$('#my-element').myExample()ような何かを呼び出すことができるようにするため

interface JQuery { 
    myExample(); 
} 

：

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

jquery.myplugin.d.ts対応するファイルは次のようになります。これは、Microsoftのjquery.d.ts宣言が既にロードされていることを前提としています。

私の質問は、このライブラリを非同期にロードし、TypeScripts静的型を利用する方法です。私はこのようにそれを使用することができます。

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

それは私のHTMLへ<script>タグを追加するために私を必要とし、ライブラリが非同期的にロードされていません。私はimport myplugin = module('lib/jquery.myplugin')を書くことができません.d.tsファイルには輸出が存在しないので、しかし

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

：私は活字体は、このコードを生成します。

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

更新：私はハックのtypescript.codeplex.com

Answer 1

Typescriptは、何かをエクスポートしない限り、またエクスポートしたものを直接使用しない限りモジュールをインポートしませんが、$に新しいメソッドを追加するだけのJQueryプラグインの場合はそうではありません。解決策は、文書番号hereのamd依存フラグを使用することです。

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

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

これは、コンパイル済みのJavaScriptでdefine呼び出しでそれを一覧表示する活字体を強制します。また、このように、あなたのrequire.configにプラグインのパスとシムを設定する必要があります：

require.config({ 
    paths: { 
    jquery: "external/jquery-2.1.1", 
    jgrowl: "external/jquery.jgrowl-1.4.0.min", 
    }, 
    shim: { 
    'jgrowl': { deps: ['jquery'] }, 
    } 
}); 

Answer 2

種類で、このためwork itemを開いているが、ここで私は現在の知っている唯一の方法です。

myplugin.d.ts：その唯一の目的typescriptですが、AMDモジュール定義を生成することですダミーファイル：mypluginの機能のために

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

interface JQueryStatic { 
    myFunc(): string; 
} 

myplugin.tsをインテリセンスが含まれるようにJQueryStaticインタフェースを拡張。

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の両方を作成する必要がありました。なぜなら、（可能であれば）何かをエクスポートすると同時に、同じファイル内の既存のインターフェースをエラーなく拡張する方法がわからないからです。インタフェースは置くことができます内で定義されたファイルの一番下で

Answer 3

：jQueryのためのインテリセンスがimport moduleを使用してロードされた任意のファイルに表示ようになります

export var JQuery: JQueryStatic; 

。

あなたのファイルは、非同期的にロードされていると、あなたが持っている場合は、たとえば、ファイルが既にある時点でロードされていることを宣言することができ、別の変数（すなわちmyJQuery）にjQueryのを設定している場合

declare var myJQuery: JQuery; 

をタイプjQueryののごmyJQueryを作成するには：あなたの///<reference path=...>あなたが使用することができるはずでファイル。

別のハックのコードが非同期でロードされている領域に直接インターフェースを挿入することです：あなたはJQuery.d.tsファイルを編集する気にしない場合、あなたはあなたの機能を追加することができます

interface JQueryStatic { 
    myFunc(): string; 
} 

そこに定義されているインタフェースに渡します。バックあなたの例に関連

、あなたのような何かを行うことができる必要があります：あなたの定義のコールバックの上部に

declare var __jquery : JQueryStatic; 

を。 JQueryStaticのインターフェイスを拡張し、///<reference path=...>を使用してマークアップを追加した場合は、必要に応じてマークアップが機能するはずです。