如何在 TypeScript 中定义模块级别的依赖项答案

【问题标题】：How can I define dependencies at module level in TypeScript如何在 TypeScript 中定义模块级别的依赖项
【发布时间】：2014-10-13 04:16:40
【问题描述】：

通常我使用语法

module Palmare.Controllers {   
    export class layerPosizioni {

要定义类的模块名称并在打字稿级别视为命名空间，但是这样我不能在单个模块级别定义依赖关系，我必须添加一个应用程序模块级别

var appModule = angular.module('myApp', ['ui.bootstrap','ngGrid','ngSanitize']);

我必须在那里添加所有依赖项。
是否可以避免这种情况并将依赖关系放在模块级别？

目前我在单个命名空间中声明了几个角度控制器，我需要在其中使用 ui.bootstrap，并且在打开程序的其他部分时不需要声明此依赖项，所以我想在需要的时候声明这个依赖。

【问题讨论】：

你能解释一下你想要达到的目标吗？目前尚不清楚在单个模块级别定义依赖项意味着什么。

标签： angularjs typescript

【解决方案1】：

注意：我只是从 typescript 开始，但我会试一试似乎得到答案并不幸运

@any:，请随时纠正我或给出更好的答案

在 ts 模块中是一种抽象，可能意味着不同的东西，具体取决于它的使用方式。

但它始终是一个模块

如内部/外部/ext-amd/ext-commonjs 依赖项的抓取/服务/解决也因框架而异

除此之外，(AFAIK) ts 并没有专门观察角度场景因此，如果您想使用模块级依赖项您将需要使用某种“要求”。

与 Nodejs 或 requirejs 一样（很可能） ...或任何提供 require 函数来满足 ext 依赖项的东西这也意味着您还需要提供角度模块并使用它自行调整角度。

可以观察到行为

// aModule.ts
module myModule {
export class clazz{
    constructor(myDep) {
         // Content
        }
    }
}

用cmd编译：tsc aModule.ts 注意：无开关

//then in aModule.js
var myModule;
(function (myModule) {
    var clazz = (function () {
        function clazz(myDep) {
            // Content
        }
        return clazz;
    })();
    myModule.clazz = clazz;
})(myModule || (myModule = {}));

或者用cmd编译：tsc -m amd 你有 sModule.js 注意：没有变化

var myModule;
    (function (myModule) {
        var clazz = (function () {
            function clazz(myDep) {
                // Content
            }
            return clazz;
        })();
        myModule.clazz = clazz;
    })(myModule || (myModule = {}));

但如果 aModule.ts 你添加导出关键字

    export module myModule {
        export class clazz{
            constructor(myDep) {            
             // Content
            }
        }
    }

当使用cmd: tsc -m amd 编译时你得到 sModule.js 但现在模块依赖于“require”和“exports”

define(["require", "exports"], function(require, exports) {
    (function (myModule) {
        var clazz = (function () {
            function clazz(myDep) {
                // Content
            }
            return clazz;
        })();
        myModule.clazz = clazz;
    })(exports.myModule || (exports.myModule = {}));
    var myModule = exports.myModule;
});

但是如果 ...aModule.ts 告诉 Typescript 我们正在使用全局

/// <reference path='../typings/underscore/underscore.d.ts' />
declare var _:UnderscoreStatic;
export module myModule {
    export class clazz{
        collection:any[];
        findWhere(what){
            return _.findWhere(this.collection, what);
        }
        constructor(myDep) {        
             // Content          
        }
    }
}

然后作为Js：我们得到一个带有外部依赖的模块请注意，它也可以在没有 -m 编译开关的情况下完成只要你声明 var 你总是可以期待一个全局的并且打字稿会尊重它而不会抱怨

define(["require", "exports"], function(require, exports) {
    (function (myModule) {
        var clazz = (function () {
            function clazz(myDep) {
                // Content
            }
            clazz.prototype.findWhere = function (what) {
        //Warning: Must be a Global!
                return _.findWhere(this.collection, what);
            };
            return clazz;
        })();
        myModule.clazz = clazz;
    })(exports.myModule || (exports.myModule = {}));
    var myModule = exports.myModule;
});

但是作为一个真正的依赖，我们可以告诉 ts 我们需要对我们的模块进行外部依赖注意：没有 declare ，但需要

var _:UnderscoreStatic = require('underscore');
export module myModule {
    export class clazz{
        collection:any[];
        findWhere(what){
            return _.findWhere(this.collection, what);
        }
        constructor(myDep) {        
             // Content          
        }
    }
}

那么作为 JS，我们需要“模块内部”的依赖

define(["require", "exports"], function(require, exports) {
    var _ = require('underscore');
    (function (myModule) {
        var clazz = (function () {
            function clazz(myDep) {
                // Content
            }
            clazz.prototype.findWhere = function (what) {
                return _.findWhere(this.collection, what);
            };
            return clazz;
        })();
        myModule.clazz = clazz;
    })(exports.myModule || (exports.myModule = {}));
    var myModule = exports.myModule;
});

//NOTE!!!!: Beacuse of asynchronous evil black magic involved 
// require wont find the dependency 
// this, will most certainly,  Not work 
// as it seems TS should be transpiling (Or I dont know the magical swicth)
// define('require','exports', 'underscore' , (require,exports,_)=> { /*code...*/})
// instead of what it did, 
// and you will need to type it your self
// which is not a biggy , because <almost>any valid JS is valid TS;
// so as TS:

/// <reference path='require.d.ts' /> 
define("require","exports","underscore", (require,exports,_:UnderscoreStatic)=> {
    /* now we can use _ if we got it right on requirejs config.path and shim*/  
});

注意：如果我们用 '-m commonjs' 编译它仍将使用 require 但现在取决于 node 而不是 requirejs 如您所见，它在语法上有所不同

var _ = require('underscore');
(function (myModule) {
    var clazz = (function () {
        function clazz(myDep) {
            // Content
        }
        clazz.prototype.findWhere = function (what) {
            return _.findWhere(this.collection, what);
        };
        return clazz;
    })();
    myModule.clazz = clazz;
})(exports.myModule || (exports.myModule = {}));
var myModule = exports.myModule;

【讨论】：

我正在寻找一个由 typescript 本身处理的解决方案，它让我可以使用正常的语法。还是谢谢

【解决方案2】：

您可以从您的打字稿模块中导出controller、service、factory 等...方法。

module app.controller {

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

    export var controller = controllerModule.controller;
}

然后在你的控制器文件中：

module app.controller {

    export class SomeController {

        static $inject = ['$q'];
        contructor(private $q: ng.IQService) {}
        . . .
    }

    controller('SomeController', SomeController);
}

所以在我们的控制器文件中，我们调用导出的控制器方法来注册 Angulars IoC 容器。

【讨论】：