title: Generic vs application initialization for typescript module based application
body: <p>I am moving my existing JS app (shopping cart + associated website) over to Typescript.</p>
  
  <p>I have a whole bunch of functions right now in my JS file to initialize different external components</p>
  
  <pre><code>    // Initialize components
      initBrowser();
      initKnockout();
      initModernizr();
      initjQM();
      initGoogleAnalytics();
  </code></pre>
  
  <p>They set up everything from <code>window.console.log</code> to <code>knockout.js</code> bindings, custom <code>Modernizr.js</code> tests and jQuery mobile page transition logic. </p>
  
  <p>My question is how in Typescript modules should I best go about organizing and initializing things like this with modules. (My app is small and I'm using only internal modules)</p>
  
  <h3>Option 1 : Module with no 'class' that just initializes everything</h3>
  
  <pre><code>module RR
  {
       initBrowser();
       initKnockout();
       initModernizr();
       initJQM();
       initGoogleAnalytics();
  
       // define functions
  }
  </code></pre>
  
  <h3>Option 2 : Module with 'static initializer' class</h3>
  
  <pre><code>module RR 
  {
      class AppInitializer
      {
          private static instance:AppInitializer = new AppInitializer(); 
  
          constructor()
          {
             initBrowser();
             initKnockout();
             initModernizr();
             initJQM();
             initGoogleAnalytics();             
          }
  
          // define functions
       }
  }
  </code></pre>
  
  <h3>Option 3 : Single application object that initializes everything and is created only once</h3>
  
  <pre><code>module RR 
  {
      class MyApp
      {    
          constructor()
          {
             init();             
          }
  
          init()
          {
              initBrowser();
              initKnockout();
              initModernizr();
              initJQM();
              initGoogleAnalytics(); 
          }
  
          // define functions
       }
  
       // create the application
       var MyApp = new MyApp();
  
  }
  </code></pre>
  
  <h3>Option 4 : ...... Your idea here .....</h3>
  
  <p>What's a good way to initialize things like this that aren't really related to a specific application module or class.</p>
  
  <p>In addition I have other init functions to set up my jQuery unobtrusive initialization, eg. my Login button, customer service page logic. These functions are specific to the actual website and different from the functions I mentioned before</p>
  
  <pre><code>    // initialize shopping cart
      initLogin();
      initCustomerService();
      initVideo(true);
  </code></pre>
  
  <p>Up until now I've just initialized everything all at once in a single closure, but I'd like to organize things much better going forward and would appreciate any advice. </p>