How can I define dependencies at module level in TypeScript

Question

Normally I use the syntax

module Palmare.Controllers {   
    export class layerPosizioni {   

To define the module name of the class and treat as a namespace at typescript level, but this way I cannot define dependencies at single module level, and I have to add a application module level

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

And I have to add all the dependecies there.
Is it possibile to avoid this and place the dependencies at module level?

At the moment I have a few angular controllers declared in an single namespace, and I need to use ui.bootstrap inside them, and I don't need to declare this dependency when I open other sections of the program, so I would like to declare this dependency just when needed.

Answer 1

You can export controller, service, factory, etc... methods from your typescript modules.

module app.controller {

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

    export var controller = controllerModule.controller;
} 

Then in your controller files:

module app.controller {

    export class SomeController {

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

    controller('SomeController', SomeController);
}

So in our controller files we call the exported controller method to register with Angulars IoC container.

Answer 2

Note: I'm just starting with typescript , but I'll give it a go as it seems op isnt lucky getting an answer

@any:, feel free to correct me or give a better answer

in ts module is an abstraction and may mean different things depending on how its used.

but its always a module

as in internal / external / ext-amd / ext-commonjs also dependencies are grabbed/served/resolved differently depending on the framework

Add on top of that, that (AFAIK) ts does not specifically observes for an angular scenario for that reason if you want to use module level dependencies you are going to need to use some kind of 'require'.

As in Nodejs or as in requirejs (most likely) ... or whatever provides the require function to satisfy the ext dependencies which also mean you will also need to feed angular modules and angular it self with it.

The beahviour can be observed as in

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

Compiled with cmd: tsc aModule.ts Note: No Switches

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

Or compiled with cmd: tsc -m amd you got sModule.js Note: no change

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

but if aModule.ts you add export key word

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

when compiled with cmd: tsc -m amd you get sModule.js but now the module has dependencies on "require" and "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;
});

But if ...aModule.ts Tells Typescript we are using a global

/// <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          
        }
    }
}

Then as Js: we get a module with an external dependency Note it could also've done on without the -m compile switch as far as you declare the var you can always expect a global and typescript will honor it without complaining

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

But as a real dependency we can tell ts we need an external dependecy on our module Note: No declare , but require

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

then as JS, we are requiring the dependecy 'inside the module'

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

Note: if we compiled with '-m commonjs' instead it will still use require but now depends on node instead of requirejs as you can see it differs sintactically

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;