24

最近、私は TypeScript を使って作業していますが、すべてうまくいっています。本当に気に入っています。JavaScript が再び機能するようになりました。:)

クラス/インターフェイスごとに単一のファイルなど、.net プロジェクトの背後にあるのと同じ考え方に従おうとしました。

module Infrastructure {
    export interface IBaseViewModel {
        addOrRemoveClass(selector: string, className: string);
    }
}

私たちが遭遇した問題はこれです - すべての依存ファイルが含まれていませんか? 実行されるとき。

アプリケーションへのメイン エントリ ポイントであるこのファイルを見ると、新しい ViewModelBuilder の作成時に未定義のエラーが発生します。

module Infrastructure {
    export class Fusion {
        constructor() {
            this.vmBuilder = new ViewModelBuilder();
            this.setApplicationDefaults();
            this.start();
        }

        private vmBuilder: IViewModelBuilder;

        private start() {
            this.vmBuilder.process();
        }

        private setApplicationDefaults() {
            $.pnotify.defaults.styling = "jqueryui";
            $.pnotify.defaults.history = false;
            $.pnotify.defaults.auto_display = false;
        }
    }
}

そして、私たちが持っているファイルの上部に

/// <reference path="../Typings/jquery.d.ts" />
/// <reference path="ViewModelBuilder/ViewModelBuilder.ts" />
/// <reference path="ViewModelBuilder/IViewModelBuilder.ts" />

ViewModelBuilder も

module Infrastructure {

    export class ViewModelBuilder { }
}

問題はこれです - 最善の方法は何ですか? 他のクラス宣言を機能させるにはどうすればよいでしょうか? 私たちのプロジェクトはかなり大きくなり、おそらく各ビューを表す 100 のビュー モデルになります (プロジェクトは Windows フォームから Web への変換です)。

これを克服して先に進む必要があるため、どんな助けも素晴らしいでしょう! :)

4

3 に答える 3

30

私はTypeScript の適切な設定について書きましたが、そこにあるアイデアの 1 つが役に立ちます - 私はもともと Mark Rendle からアイデアを得ました。

という名前のファイルを作成しreferences.ts、そこにすべての依存関係をリストするという考え方です。このようなビット：

/// <reference path="modulea.ts" />
/// <reference path="moduleb.ts" />
/// <reference path="modulec.ts" />
/// <reference path="moduled.ts" />
/// <reference path="modulee.ts" />

次に、すべての TypeScript ファイルの先頭でこのファイルを参照するだけです。

/// <reference path="references.ts" />
module ModuleA {
    export class MyClass {
        doSomething() {
            return 'Hello';
        }
        tester() {
            var x = new ModuleB.MyClass();
        }
    }
}

このreferences.tsファイルは、.NET プロジェクト用の References フォルダーのように機能します。

この設定で非常にうまく機能するもう 1 つの推奨事項は、--outフラグを使用して、 app.ts. TypeScript コンパイラは、すべての依存関係を調べて、生成されたすべての JavaScript の正しい順序を見つけ出します。

tsc --out final.js app.ts

この戦略は、どこでも特定のファイルを手動で参照するよりも、プログラムに合わせて拡張できます。

于 2013-03-11T10:16:39.683 に答える
-3

ここには、commonjsまたはAMD（非同期モジュールロード）の2つのオプションがあります。
commonjsを使用して、

<script type="text/javascript" src="lib/jquery-1.7.2.js"></script>

プロジェクト内のHTMLページの個別のJavaScriptファイルごとに。
明らかに、これは非常に面倒になる可能性があります。特に、プロジェクトに数百のファイルがある場合はそうです。
または、Steve Fentonが指摘したように、-outパラメーターを使用して、さまざまなファイルを1つのファイルにコンパイルし、HTMLページでこの1つのファイルだけを参照することもできます。

AMDの使用は3番目のオプションです。HTMLページにスクリプトタグを1つ含めるだけで、AMDが参照を処理します。
これを機能させる方法については、私のブログをご覧ください：http: //blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/

于 2013-03-11T14:21:04.813 に答える