8

「エクスポートモジュール」を複数のファイルに分散させることが可能かどうかさえわかりません。

ファイル Contact.ts がある場合:

// 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 パターンを使用する複合アプリを構築しているため、「エクスポート モジュール」宣言を使用する必要があります。

ある種の「事前宣言」またはトリッキーな「インポート」を行う必要がありますか?

アドバイスをありがとう。

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

4

2 に答える 2

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
   }
}

これで十分に機能するはずですが、別の領域で両方のモジュールのコンテンツにアクセスしたい場合 (たとえば、新しい Contact モデルを自分で作成する場合) は、基本的に両方をインポートする必要があります。

import c = module("./Contact");
import cv = module("./ContactView");

依存関係を明確に述べているので、これで十分だと思います。欠点は、共通の親オブジェクトを共有しないことです。そのため、両方を「連絡先」モジュール パターンに配置しても、おそらくあまり役​​に立ちません。

もう 1 つのオプションは、次のように「Contact」を「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 をロードした後にアクセスできるようになります。

編集:ところで、「export module Name { ... }」を介してモジュールをエクスポートするだけに限定されません。ファイル自体がモジュールであるため、何でもエクスポートできます。そのため、モジュール パターン コードをラップせずに、"export function foo() { ... }" だけを持つファイルを作成できます。

EDIT2：AMDには複数の依存関係をロードしてそれらから「モジュール」を構築する機能があるようですが、TSでそれがどのように機能するかわかりません。それに関するリンクは次のとおりです：http://www.adobe.com /devnet/html5/articles/javascript-architecture-requirejs-dependency-management.html (コンストラクター モジュール)。

于 2012-10-09T01:21:33.023 に答える
4

私はしばらくの間同じ質問に苦労しましたが、他の誰かがこの質問に出くわした場合に備えて、私がしていることを共有したかっただけです.

まず、モジュール内のすべてのファイルを宣言する参照ファイルを定義しました。

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

ファイル内で指定されたパスは、参照ファイル_contacts.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" />

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

ただし、これは、発行されたコードが別のファイルにあるという問題を解決しません。その問題に対して、私は JavaScript 縮小ツールを使用しています。これは、複数のファイルを 1 つのソース ファイルにまとめることのできるツールです。コンパイルの設定とユース ケースのニーズによっては、生成されたコードを AMD モジュールとして機能させるために、ラッパーを適用する必要がある場合があります (その部分についてはまだあまり詳しくありません)。

于 2012-12-12T23:12:09.423 に答える