2012-10-07 12 views
10

JavaScriptライブラリをVisual Studio 2012のTypeScriptに移植し終えました。すべてのクラスは約60クラスで、それぞれのクラスは独自の.tsファイルで定義されています。TypeScript:ソリューション内の複数のプロジェクト

すべてのクラスは同じモジュールで定義されています。私は他のファイルで定義されたクラスにrederするために参照コメントを使用します。すべてのファイルのレイアウトは次のようになります。

///<reference path='./../myotherclass.ts' /> 

module MyModule { 

    export class MyClass { 
     ... 
    } 

} 

今、私は私の新しく移植されたライブラリを使用して実際のアプリケーションであることを行っているのと同じ溶液中で第二のプロジェクトを作成しました。私は何とか私の図書館を含める必要があります、そして、私はそれがモジュールシステムのためだと思います。しかし、MyModuleとしてインポートするファイルが何十ものファイルに分散しているかどうかはわかりません。 .d.tsファイルを使用できるのはこれですか?

また、モジュールをインポートできるようにするには、 'export'キーワードを使用して宣言する必要がありますが、これを行うと参照のコメントでは見つかりません。

さらに、requireJSのようなモジュールローダーでコンパイラの出力を簡単に使用できるように、両方のプロジェクトをコンパイルする必要があります。

これを達成するための最良の方法は何ですか?

ありがとうございました!

答えて

9

これで、「モジュール」はさまざまなことを意味することができます。たとえば、 "MyModule"が作成するモジュールパターンがあります。私が集める限り、TypeScriptはこれらを言語仕様の「内部モジュール」と呼びます。これらはRequireJSのようなものをロードする「外部モジュール」とは異なります。主な違いは、外部モジュールは、機能をエクスポートするために使用できる定義済みの「エクスポート」オブジェクトを使用して、独自の分離環境を持つことが予想されることです。

あなたのモジュールの出力を見てみましょう:例えばあなたが、あなたがロードするファイル、他のスクリプトにグローバルに利用できるようになる「MyModuleという」に物事をエクスポートしていることがわかり

var MyModule; 
(function (MyModule) { 
    var MyClass = (function() { 
     function MyClass() { } 
     return MyClass; 
    })(); 
    MyModule.MyClass = MyClass;  
})(MyModule || (MyModule = {})); 

を、 HTML "スクリプト"ブロック。あなたは60種類あると述べたので、各ファイルを1つずつ読み込むのではなく、マークアップに含めることができる1つのファイルを出力するようにコンパイラを設定することもできます。

(function (MyModule) { 
    var MyClass = (function() { 
     function MyClass() { } 
     return MyClass; 
    })(); 
    MyModule.MyClass = MyClass;  
})(exports.MyModule || (exports.MyModule = {})); 
:あなたは、「モジュールMyModuleという{...}」を「エクスポートモジュールのMyModuleという{...}」からあなたのモジュール宣言を変更した場合

に移動し、出力に何が起こるかを見てみましょう

ご覧のとおり、モジュールはまだ "モジュールパターン"を使用していますが、ノードの "require"機能などでロードされることを意味する "エクスポート"のメンバーとして割り当てられています。この場合

は、あなたが実際にこのコードを使用してモジュールを使いたいでしょう:「./MyModule」名前が実際に ファイル名を指し

import wrapper = module("./MyModule"); 
var instance = new wrapper.MyModule.MyClass(); 

注意(マイナスの.js拡張子)モジュールが定義されています(これがVSがあなたにそれらのモジュールを見つけることができないと言った理由です)。コードのようなものにコンパイルする必要があります。これに追加するには

var wrapper = require("./MyModule"); 
var instance = new wrapper.MyModule.MyClass(); 

、あなたは、もはやでも本当にモジュールを持っている「モジュール」キーワードで何もする必要はありません。あなたは、単に関数をエクスポートできます。

// foo.ts 
export function foo() { 
    ... 
}; 

// some other file in the same dir 
import wrapper = module("./foo"); 
var result = wrapper.foo(); 

関数「fooは」を直接他のファイルには「ラッパー」エイリアスされる「輸出」に割り当てられますので、これは動作します。

このような混乱したモジュール関連の問題をさらに解決するには、ノードの「必要」とは異なり、AMDモジュールが非同期にロードされているため、 TypeScriptがそれらを出力するようにするには、 "--module AMD"パラメータをコンパイラに渡す必要があります。

とにかく、私はあなたが必要としたいものが何であるかを理解することができるように、状況を十分に説明してくれることを願っています。最終的に使用するモジュールのタイプは、実際にどのように使用するか、つまりノード、ウェブ、または両方の組み合わせに依存します。

+0

ありがとう、これは非常に役に立ちました。私は結局、外部モジュールなしでやりました。ライブラリを1つの大きな.jsファイルにコンパイルし、アプリケーションを別のものにコンパイルし、スクリプトタグを使用してロードするだけです。アプリケーションのソースファイルでは、ライブラリの.d.tsファイルへの参照コメントを使用して、そのクラスを使用可能にします。 – vexator

+0

2つのファイルを1つのラッパーにロードする方法はありますか?私はviewmodelsと私のtypescriptファイルのクラスとしてエクスポートを定義します。それからインポートしたとき、私は常にimport wrapper1 = module( "file1")、import wrapper2 = module( "file2");新しいwrapper1.Viewmodel1()と新しいwrapper2.ViewModel2()を呼び出します。もしeveryhingがちょうど1つのモジュール、viewmodels.Viewmodel1とviewmodel.Viewmodel2の下にあれば良いでしょう。これを取得するには、すべてのビューmoedlクラスを同じファイルに公開する必要があります。これにより、概要が制限されます。 –

+0

@ s093294 typescriptを見てから数ヶ月が経ちましたので、それを覚えておいてください。とにかく、 'file1.ts'の先頭に' /// 'を使い、' tsc --out file.js file1.ts'でコンパイルしてください。コンパイラは自動的に 'file1.ts'が' file2.ts'(参照のおかげで)を要求し、それを単一のjavascriptファイルにコンパイルします。あなたにとって完璧なデモではありませんが、https://github.com/nxn/ModuleDemo - 具体的には 'make.bat'、 'アドレス'と '連絡先'モジュール(複数のファイルに実装されています)、コンパイルされたjavascriptファイルをロードする 'default.htm'があります。 – nxn

関連する問題