File multipli che compongono il progetto Type Script

Question

Recentemente ho lavorato con TypeScript e tutto è andato bene e mi piace davvero molto. Rende il JavaScript ancora utilizzabile! :)

abbiamo cercato di seguire la stessa idea come avremmo dietro ogni progetto .net esempio unico file per classe/interfaccia

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

il problema che abbiamo incontrato è questo - tutti i file dipendenti sono non essere incluso? quando si tratta di correre.

Se si guarda a questo file, che è il punto di ingresso principale per la nostra applicazione, ottengo un errore non definito sulla creazione di una nuova 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; 
     } 
    } 
} 

e nella parte superiore del file abbiamo

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

anche ViewModelBuilder

module Infrastructure { 

    export class ViewModelBuilder { } 
} 

Quindi la domanda è questo - qual è il modo migliore per andare avanti? come possiamo far funzionare le altre dichiarazioni di classe? il nostro progetto aumenterà considerevolmente probabilmente 100 modelli di visualizzazione che rappresenteranno ogni vista (il progetto è una conversione da forme di finestre al web)

Qualsiasi aiuto sarebbe fantastico visto che abbiamo davvero bisogno di conquistarlo e andare avanti! :)

Answer 1

Ho scritto circa getting the right set up for TypeScript e una delle idee in là ti aiuterà: inizialmente ho avuto l'idea da Mark Rendle.

L'idea è quella di creare un file con il nome references.ts e di elencare tutte le dipendenze. Un po 'come questo:

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

Si può poi semplicemente riferimento a questo file nella parte superiore di tutti i file dattiloscritto:

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

Gli atti di file references.ts come i riferimenti cartella che avete per un progetto NET .

L'altra raccomandazione, che funziona abbastanza bene con questa configurazione, consiste nell'utilizzare il flag --out per compilare un singolo file JavaScript, a partire da app.ts. Il compilatore TypeScript gestisce tutte le dipendenze e risolve l'ordine corretto per tutto il codice JavaScript generato.

tsc --out final.js app.ts 

Questa strategia si adatta al tuo programma molto meglio del riferimento manuale a file specifici ovunque.

Answer 2

Qui ci sono due opzioni, commonjs o AMD (caricamento asincrono del modulo).
Utilizzando commonjs, avrete bisogno di mettere un

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

per ogni file JavaScript distinto nel progetto nella tua pagina html.
Ovviamente questo può diventare molto noioso, soprattutto se nel progetto sono presenti centinaia di file.
In alternativa, come ha fatto notare Steve Fenton, è possibile utilizzare il parametro --out per compilare vari file in un singolo file, quindi fare riferimento solo a questo singolo file nella pagina html.

L'utilizzo di AMD è la terza opzione, in cui è necessario includere solo un tag script nella pagina html e AMD si occupa dei riferimenti.
Dai un'occhiata al mio blog su come farlo funzionare: http://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/