TypeScript - 她必须拥有它吗？ （它==全局范围）

Question

我正在将 Angular 应用程序转换为使用 TypeScript，但这是一个通用的 TypeScript 问题，与 Angular 无关。 角度js文件是这样的：

(function () {
  var app = angular.module('myModule', []);
  app.controller('myController', ['$scope',
    function ($scope) {
      $scope.myNewProperty = "Bob";
    }
  ]);
})();

我已将其转换为可爱的 TypeScript 类语法：

class myController {
    constructor($scope) {
        $scope.myNewProperty = "Bob";
    }
}

angular.module('myModule', []).controller("myController", myController);

一切正常，除了生成的 JS 没有按照 JS 模块模式包装（即在外部匿名函数中）：

var myController =     (function () {
      app.controller('myController', ['$scope',
        function ($scope) {
          $scope.myNewProperty = "Bob";
        }
      ]);
    })();

var app = angular.module('myModule', []);

所以 myController 现在是全局的。如果我将类放在 TypeScript 模块中，那么 js 会使用模块名称作为全局变量生成：

var TsModule;
(function (TsModule) {
    var myController =     (function () {
          app.controller('myController', ['$scope',
            function ($scope) {
              $scope.myNewProperty = "Bob";
            }
          ]);
        })();

    var app = angular.module('myModule', []);
})(TsModule || (TsModule = {}));

如何阻止 TypeScript 以这种方式污染全局范围？我只想将它全部包裹在一个不错的本地范围内。 我在别处看到它说“回到旧的 JS 语法”（即没有 TypeScript 类）。 How can I define an AngularJS service using a TypeScript class that doesn't pollute the global scope?

但是我们使用 TypeScript 的重点是 / 是 / 类语法。 TypeScript 是否与任何（明智的）知道不走向全球的 JS 程序员格格不入？

Answer 1

快速更新

在最新版本的 TypeScript 中，您可以在 IIFE 中嵌套一个类：

(() => {
    class Example {

    }
})();

结果输出是：

(function () {
    var Example = (function () {
        function Example() {
        }
        return Example;
    }());
})();

原答案

您可以避免使用 AMD 或 CommonJS 等模块模式添加到全局范围。当您使用其中任何一个时，每个 TypeScript 文件都被视为一个外部模块，并且不在全局范围内。

此示例出于示例的目的删除了 Angular，但是当 RequireJS 将 define 方法添加到全局时，您的任何代码都不会放在此范围内。

MyModule.ts

export class myController {
    constructor($scope) {
        $scope.myNewProperty = "Bob";
    }
}

app.ts

import MyModule = require('MyModule');

var controller = new MyModule.myController('');

HTML

<script src="Scripts/require.js" data-main="app.js"></script>

app.js 的样子：

define(["require", "exports", 'MyModule'], function (require, exports, MyModule) {
    var controller = new MyModule.myController('');
});

或者...如您所知...如果您愿意，您仍然可以使用您已经在使用的 JavaScript 来实现它 - 您仍然可以获得自动完成和类型检查，即使您是'没有上课。

Answer 2

您可以简单地将您的类包装在 module 中

模块本身将是全局的，但如果您不导出类，则无需担心使用单个模块名称污染全局范围。

所以这个 TypeScript：

module MyModule {
  class MyClass {
     constructor(){}
  }
}

会产生如下JS：

var MyModule;
(function (MyModule) {
    var MyClass = (function () {
        function MyClass() {
        }
        return MyClass;
    })();
})(MyModule || (MyModule = {}));

Answer 3

乔希是正确的。使用模块。同样，使用 grunt 或 gulp uglifyer 可能是一个好主意，它可以选择在构建时将整个应用程序包装在一个闭包中。

这不是对您问题的回答，而是一个建议。

顺便说一句，考虑一下控制器的这种语法

module myModule {

    // We export the class so that we can access its interface in tests.
    // The build time gulp or grunt uglify will wrap our app in a closure
    // so that none of these exports will be available outside the app. 
    export class MyController {

         myNewProperty = "bob";

        // Next we will use Angulars $inject annotation to inject a service
        // into our controller. We will make this private so that it can be 
        // used internally.
        static $inject = ['someService'];
        constructor(private someService: ng.ISomeService) {}

        // we can access our class members using 'this'
        doSomething() {
            this.someService.doSomething(this.myNewProperty);
        }

    }

    angular.module('app').controller('MyController', MyController);

}

除了这种语法，您还可以使用 controllerAs 语法。

Answer 4

就像在 JavaScript 中一样，您可以通过将声明包装在立即调用的函数表达式中来完全避免命名空间污染。

原来的JavaScript：

(function () {
  var app = angular.module('myModule', []);
  app.controller('myController', ['$scope',
    function ($scope) {
      $scope.myNewProperty = "Bob";
    }
  ]);
})();

变成下面的 TypeScript：

(function () {
  class MyController {
    static $inject = ['$scope'];
    contructor($scope: ng.IScope & { myNewProperty: string }) {
      $scope.myNewProperty = 'Bob';
    }
  }

  angular.module('myModule', [])
    .controller('MyController', MyController);
})();

请注意，这不会将名称引入周围范围。实际上，原始的 JavaScript 是完全有效的 TypeScript，但它没有利用 TypeScript。 另请注意，我对样式稍作了编辑。

无论如何，如果您不使用带有模块加载器的模块，例如 RequireJS、SystemJS 或您拥有的其他模块，您仍然可以通过遵循久经考验的 IIFE 模式来避免命名空间污染。这是我的建议。