2013-03-11 1 views
20

最近、私はTypeScriptで作業していて、すべてがうまくいきました。本当に、本当に好きです。すべての依存ファイルがある - 私たちは私たちが遭遇した問題はこれですクラス/インタフェースごとに任意の.NETプロジェクト例えば、単一のファイルの後ろに、私たちと同じように同じ考えに従うことを複数のファイルがタイプスクリプトプロジェクトを構成しています

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

を試してみました:)

含まれていない?それは実行されることになります。

あなたが私たちのアプリケーションへのメインエントリポイントです。このファイルを見れば、私は

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を作成する上で未定義のエラーを取得しますそこで質問がある

もViewModelBuilder

module Infrastructure { 

    export class ViewModelBuilder { } 
} 

これは何が最善の方法ですか?他のクラス宣言をどのように動作させることができますか?私たちのプロジェクトはかなり成長するでしょう。それぞれのビューを表す100のビューモデル(プロジェクトはWindowsフォームからWebへの変換です)

私たちが本当にこれを征服し、 :)

答えて

28

私はおよそgetting the right set up for TypeScriptと書いてあります。そこにはアイデアの1つがあります。私はもともとMark Rendleからアイデアを得ました。

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

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

references.tsファイル行為はあなたが.NETプロジェクトを持っているフォルダ:あなたは、単にすべての活字体のファイルの先頭に、このファイルを参照することができ

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

他の勧告は、--outフラグを使用して、app.tsで始まる単一のJavaScriptファイルをコンパイルすることです。 TypeScriptコンパイラは、すべての依存関係を処理し、生成されたすべてのJavaScriptに対して正しい順序で処理します。

tsc --out final.js app.ts 

この戦略は、すべてのファイルを手動で参照するよりもはるかに優れています。

+0

これは良いアイデアのようで、リリースには理想的かもしれませんが、デバッグとソースマップの仕組みはどうですか? – Steoates

+0

私はここに手を入れ、 "私はソースマップを使用しない"と言うでしょう - 私は生成されたJavaScriptにはとても慣れているので、直接デバッグします。私はソースマップが 'final.js'ではなく個々のファイルで動作することを意図していると信じています – Fenton

+1

ソースマップは' --out'製ファイルで動作するはずです(私はこの機能が完全には安定していないので)。 –

-2

commonjsまたはAMD(非同期モジュールロード)の2つのオプションがあります。 commonjsを使用して
は、あなたのHTMLページで、プロジェクト内の各個別のJavaScriptのファイルに対して

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

を配置する必要があります。
特に、プロジェクトに何百ものファイルがある場合、これは非常に面倒になることがあります。
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/

関連する問題