import - 对 TypeScript 模块感到困惑

Question

我是 TypeScript 的新手，但有 C# 背景，我对如何处理 TypeScript 模块有点困惑。我一直在考虑将模块作为 C# 中的命名空间，但也许这是错误的，因为我的代码没有按我预期的方式运行。

我有以下文件夹结构:

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

和这段代码:

// 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();
    }
}

在上面的示例中，我尝试导入模块( namespace ？)模型将在运行时导致错误，因为模型未定义。但是，如果我删除导入语句，代码将正常工作。我可能没有想清楚并且犯了一些非常愚蠢的初学者错误，但是有人可以告诉我我做错了什么以及在我的特定场景中使用模块的最佳方法是什么。如果我删除导入但不使用它，为什么它可以工作？

问候克里斯托弗

Answer 1

抱歉回答晚了。

围绕模块/命名空间的问题和魔力发生在三件事上:

1. 您的系统 - 由于您的系统，TypeScript 编译器以不同的方式发现文件，当它将您的源代码编译为 JS 代码时，它会占据一席之地，因为相同的 ts 文件会提供不同的 JS 结果。
2. 理解魔术语句 /// <reference path="***"/> .如果没有额外的 Module System，如 AMD 或 System.js 等，使用这个词是非常重要的。因为如果你使用合并编译，它就会发生，因为它告诉编译器应该以什么顺序编译文件。

3. 了解 TypeScript 在已编译的 JS 文件中提出的 JS 执行和结构。考虑下一个例子——(这是你编译成 JS 的例子)

       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
   

   如果你深入研究 JS，你会发现 JS 代码是按下一个顺序执行的

   • 读取函数并传入内存
   • 执行另一个代码

   这就是下一个代码可以工作的原因

    myFunction();
   
    function myFunctuion(){};
   

   由于模块和类的 typescript JS 构建技术，它使用这样的匿名函数:

   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 =  {}));
   

   在这种情况下调用 like next 会导致运行时异常，因为之前没有执行过 anonimus block 。

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

   现在，回到我们的示例并发现它，正如您在前面看到的 MyController 定义的那样，我们执行匿名函数和名称为 MyController 的变量现在存在于全局范围内。下一步是执行 MyController 类的构造函数，在其中我们找到接下来的两部分代码

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

   但是这里我们得到一个错误，因为包含变量Modules 的匿名函数和类(class) A和 B还没有执行。这就是为什么此时我们收到变量模块未定义的错误。

我希望本主题能使您更好地了解 JS 和 TS，并在您的新功能中帮助您!!!

祝你好运!

附言Here is working example