Confused about TypeScript modules

Question

I'm new to TypeScript but have a background in C# and I'm a little bit confused about how to handle TypeScript modules. I've been thinking about modules as namespaces in C# but maybe this is wrong because my code doesn't behave the way I was expecting.

I have the following folder structure:

|-myApp
|  |-myController
|  |      |-myController.ts
|  |-models
       |-a.ts
       |-b.ts

and this code:

// a.ts
module MyApp.Models {
    export class A {

    }
}
// b.ts
module MyApp.Models {
    export class B {

    }
}

// myController.ts (THIS DOESN'T WORK)
module MyApp.MyController {
    import Models = MyApp.Models;
    class MyController {
        a = new Models.A();
        b = new Models.B();
    }
}

// myController.ts (THIS WORKS)
module MyApp.MyController {
    class MyController {
        a = new Models.A();
        b = new Models.B();
    }
}

In the example above my attempt at importing the module (namespace?) Models will result in an error at runtime because Models is undefined. However if I remove the import-statement the code will works just fine. I'm probably not thinking clearly and doing some really stupid beginners mistake but could someone please tell me what I'm doing wrong and what the best way to use modules in my particular scenario would be. Why does it work if I remove the import but not with it?

Regards Kristofer

Answer 1

Sorry for late answer.

Problem and magic around modules/namespaces are occurred in three things:

1. Your system - due to your system TypeScript compiler discover files by difference ways, and when it compile your source code to JS code it take a place, because the same ts files provide different results JS.
2. Understanding magic statement /// <reference path="***"/>. It is very important use this word if there are no additional Module System like AMD, or System.js, etc. Because if you use merged compilation it take place, because it tell compiler in what order it should compile files.

3. Understanding of JS execution and structure that TypeScript propose in compiled JS file. Just consider next example - (it is your compiled into JS example)

       var MyApp;
       (//functon wrapping
        function (MyApp) {//function declaration 
           var MyController;
           (function (MyController_1) {
               var Models = MyApp.Models;
               var MyController = (function () {
                   function MyController() {
                       this.a = new Models.A();
                       this.b = new Models.B();
                   }
                   return MyController;
               })();
               MyController_1.MyController = MyController;
           })(MyController = MyApp.MyController || (MyApp.MyController = {}));
       }
       )(MyApp || (MyApp = {}));// end of function wrapping and it execution
       /// <reference path="myApp/MyController/myController.ts"/>
   
       new MyApp.MyController.MyController(); // createing new instance of MyController
   
       var MyApp;
       (function (MyApp) {
           var Models;
           (function (Models) {
               var B = (function () {
                   function B() {
                   }
                   return B;
               })();
               Models.B = B;
           })(Models = MyApp.Models || (MyApp.Models = {}));
       })(MyApp || (MyApp = {}));
       var MyApp;
       (function (MyApp) {
           var Models;
           (function (Models) {
               var A = (function () {
                   function A() {
                   }
                   return A;
               })();
               Models.A = A;
           })(Models = MyApp.Models || (MyApp.Models = {}));
       })(MyApp || (MyApp = {}));
       //# sourceMappingURL=app.js.map
   

   if you dive deeper into JS you would find that the JS code is executing in the next order

   • Reading function and passing it into the memory
   • Executing another code

   That is why the next code would work

    myFunction();
   
    function myFunctuion(){};
   

   Due to typescript JS building technics for modules and classes it use anonimous function like this:

   var MyApp;
       (//functon wrapping
        function (MyApp) {//function declaration 
           var MyController;
           (function (MyController_1) {
               var Models = MyApp.Models;
               var MyController = (function () {
                   function MyController() {
                       this.a = new Models.A();
                       this.b = new Models.B();
                   }
                   return MyController;
               })();
               MyController_1.MyController = MyController;
           })(MyController = MyApp.MyController || (MyApp.MyController =  {}));
   

   In this case calling like next cause runtime exception, because anonimus block has not executed before.

     MyController(); // here runtime exception
   
     var MyController = (function () {
                   function MyController() {
                       this.a = new Models.A();
                       this.b = new Models.B();
                   }
                   return MyController;
               })();
   

   Now, back to the our example and discover it, as you see MyController defined earlier, than we do execution of anonymous function and variable with name MyController now exist in the global scope. The next step is executing constructor of MyController class, in it we find next two part of code

          this.a = new Models.A();
          this.b = new Models.B();
   

   But here we get an error because the anonymous function that consist variable Modules and classes A and B has not executed yet. That is why, in this moment we getting the error that variable Modules is undefined.

I hope that this topic make your knowledge about JS and TS better, and help you in your new features!!!

Good Luck!

P.S. Here is working example