Confused about TypeScript modules - import

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:
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.
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.
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

Answer 2

Typescript modules are similar to C# namespaces. They help organize the codebase.
The import statement can be used for two things: to provide an alias or to import external modules.
To create an alias you use the import as you did:
import Models = App.Models;
To import an external module you use:
import Models = './path/to/module';
I can't figure out why your code doesn't work. I tried to reproduce it on my machine but both controllers work for me.