2012-10-08 9 views
8

"エクスポートモジュール"を複数のファイルにまたがることさえ可能かどうかはわかりません。私は、ファイルContact.tsている場合複数のAMDファイルにモジュールを広げる方法は?

:次に

// file Contact.ts 
export module Contacts { 
    export class Contact { 
     ... 
    } 
} 

と別のContactView.ts

// file ContactView.ts 
export module Contacts { 
    export class ContactView { 
     model: Contact; // <--- is not recognized 
    } 
} 

をTSCは、Contactクラスを認識していません。あなたが見ることができるように、ContactとContactViewは同じモジュール内に存在すると宣言され、仕様に従って動作するはずです。

私はrequire.jsとAMDパターンを使用するコンポジットアプリケーションを構築していますので、私は "export module"宣言を使用しなければなりません。

「先行宣言」やトリッキーな「インポート」を行うべきですか?

アドバイスありがとうございます。

EDIT:現在、インポートによって各モジュールを個別にロードしていますが、目に見えても膨大な量のコードと多くの「インポート」依存関係が作成されます。 同じ名前空間(連絡先)を使用して、インポートするつもりはないというTSを知る方法があるかどうかという質問がありました。 通常の//コマンドを調べていましたが、動作しません。私は今までに* .d.ts宣言ファイルを試したこともありません。

答えて

6

この仕様では、内部のモジュールを複数のファイルに定義できます(本質的に、内部モジュールはjavascriptモジュールパターンを参照しています)。 外部 AMDやCommonJSモジュールなどのモジュールは、各ファイルが実際の「モジュールのモジュール」であるという考え方に基づいており、その中にある名前空間/名前は、モジュールが新しいオブジェクトにロードされるため無関係です。あなたはContactView.tsモジュールの内部でContact.tsモジュールをロードするには、次のコードを書くことができ

// file ContactView.ts  
import mod = module("./Contact"); 

export module Contacts { 
    export class ContactView { 
     model: mod.Contacts.Contact; // <--- will be recognized 
    } 
} 

そして、それが動作するはず十分、しかし、あなたはの内容へのアクセスを持っているしたい場合

私はあなたがはっきりあなたの依存関係を記述しているので、十分に罰金だと思う
import c = module("./Contact"); 
import cv = module("./ContactView"); 

:(たとえば新しい連絡先モデルを自分で作るために)別の領域における両方のモジュールは、あなたは本質的にそれらの両方をインポートする必要があります。欠点は、共通の親オブジェクトを共有しないことです。そのため、両方を「連絡先」モジュールパターンにすることは、おそらくあまり役​​に立ちません。

もう一つの選択肢は、 "ContactView"と一緒に "ContactView"を次のようにエクスポートすることです(このコードは、ContactViewのモデルプロパティを使って既に正確に行っているので馬鹿げています。 ):

export module Contacts { 
    export class ContactView { 
     model: mod.Contacts.Contact; 
     constructor() { 
      this.model = new mod.Contacts.Contact(); 
     } 
    } 

    export var Contact = mod.Contacts.Contact; 
} 

これで、ContactViewを読み込んだ後にアクセスできるようになります。

EDIT:ところで、 "export module Name {...}"でモジュールをエクスポートするだけでなく、ファイル自体をモジュールとしてエクスポートすることができます。だから、 "export function foo(){...}"というファイルを、それをラップするモジュールパターンのコードなしで持つことができます。

EDIT2:AMDが複数の依存関係を読み込んでそれらから「モジュール」を構築する機能を持っているようですが、TSでどのように動作するのか分かりません。http://www.adobe.com/devnet/html5/articles/javascript-architecture-requirejs-dependency-management.html(コンストラクタモジュール) 。

+0

これはまさに私が今やっていることです。各モジュールをインポートで個別に読み込みますが、気づくと、膨大な量のコードと数百の依存関係が作成されます。 同じ名前空間(連絡先)を使用して、インポートするつもりはないというTSを知る方法があるかどうかという質問がありました。 通常の// コマンドを調べていましたが、動作しません。 – IgorM

+1

その場合、モジュールの連絡先をエクスポートせず、すべてのファイルで 'モジュールの連絡先{...}'として定義してください。/// <リファレンス.. />(これは内部モジュールで動作します)を使用してTSそれらを見つけ、 'export var contacts = Contacts;」という名前のAMDモジュール用の新しいファイルを作成します。それであなたはAMDを通して全体をロードすることができます。エクスポートする変数がモジュールと正確に同じ名前でないことを確認する必要があります。そうしないと、コードが出力されません。残念ながら、現時点ではこのコードデモを書くことはできませんが、必要に応じて後で行うことができます。 – nxn

+0

もう少し考えれば、各モジュールをそれ自身のjsファイルに出力するmakefileを作成する必要があります。 – nxn

4

私はしばらくの間、同じ質問に苦しんでいました。誰か他の人がこの質問をうろついている場合に備えて、私がしていることを分かち合いたいと思っていました。

まず、私は自分自身に私のモジュール内のすべてのファイルを宣言する参照ファイルに定義:ファイル内に指定​​されたパスが参照ファイル自体(_contacts.ts)の場所に対して相対的であることを

/// <reference path="_contacts.dependencies.ts" /> 
/// <reference path="../contacts/Contact.ts" /> 
/// <reference path="../contacts/ContactView.ts" /> 
/// <reference path="../contacts/ContactModel.ts" /> 

に注意してください、参照ファイル.jsとは異なります。私のディレクトリ構造は次のようになります。

modules 
    references // all of the reference files 
     knockout 
     underscore 
     // ... a subfolder for every 3rd party library used 
    contacts 
    commerce 
    // ... other modules at same level as contacts 

参照ファイル自体に戻る。最初の行には、モジュールによって使用されるすべての外部ライブラリ(アンダースコア、瞬間、または他の既存のライブラリ)のリストファイルが含まれています(.d.ts定義ファイルがあります)。残りの行は、モジュールを構成するファイルです。すべてのあなたのモジュール一覧表示するには、単一の参照ファイルを作成することができ、同様に

/// <reference path="../references/_contacts.ts" /> 
module Contacts { 
    export class Contact { 
     public model: ContactModel; 
     // ... 
    } 
} 

::モジュールの一部であるすべてのファイル内の

が、私は上記のファイルを参照する

/// <reference path="_address.ts" /> 
/// <reference path="_contacts.ts" /> 
/// <reference path="_commerce.ts" /> 

をとソースファイルからこれを指すだけです。

これは、放出されたコードが別々のファイルにあるという問題を解決するものではありません。この問題については、複数のファイルを1つのソースファイルにまとめることができるJavaScriptミニ化ツールを使用しています。コンパイルの設定やユースケースのニーズによっては、生成されたコードの周りにラッパーを適用してAMDモジュールとして動作させる必要があるかもしれません。

+0

私は本当にこのソリューションが好きです、ありがとう! – parliament

+0

最後の部分については、これをBeforeBuildでこれを使って1つのファイルにコンパイルすることもできます: _references.tsファイル自体をコンパイルすると、参照のレイアウト方法が正しく行われます。私は思っていません - ちょうどAMDのモジュールとして動作するようになるでしょう。 tsc --declarations file1.ts file2.ts file3.ts ... – parliament

+0

実際には、このアプローチに関連するバグをここで解決しました:http://typescript.codeplex .com/workitem/836 – parliament

関連する問題