Typescript, Browserify and angularjs beyond the two file example

Question

I am trying to move a very large angularjs project written in typescript from AMD to CommonJS. I have found several examples online, but cannot find an example that would cover a real project combining the three.

Short version: If I remove the TS modules then I cannot find a way to use interfaces in other files unless declaring one per file. If I keep TS modules then it becomes cumbersome to use exported items since I need to declare the require and then go down the whole TS module namespace even within the module itself.

Long version: Up to this point I have been using the typescript module system so far and I am happy the way it worked. From what I understand it is not necessary to use the ts module system when using browserify since you are requiring specific parts of the app before using them and it would not be as transparent to use something that polluted the global scope (did I get this correct?). If I remove everything from inside the typescript modules and have code in snake-page-controller.ts like:

'use strict';

interface ISnakePageController {
    isLoggedInUser: boolean;
}

class SnakePageController implements ISnakePageController {
    public isLoggedInUser:boolean = false;

    static className:string = 'SnakePageController';
    static $inject:string[] = [];

    constructor() {
        console.log('snake controller created.');
    }
}

export = SnakePageController;

then i can use this controller from an index.ts file like:

/// <reference path="../../typings/angularjs/angular.d.ts" />
'use strict';

import angular = require('angular');
import directives = require('./directives');
import snakeController = require('./snake-page-controller');

var snakeModule:ng.IModule = angular.module('mike.snake', [
    directives.name
])
.controller(snakeController.className, snakeController);

export = snakeModule;

Then everything works BUT,

1. I can no longer put the export keyword in front of the interface since then the compiler complains about multiple exports per file. So how can I use this interface outside the file it was declared in? Do I have to create separate files for each interface and require that (this would seem awkward)?

2. If index.ts was written in JS the I would be able to write:

   angular.module('mike.snake', [ require('./directives').name ]

inline. But if I write this in TS the compiler complains with TS2304: Cannot find name 'require'. This might seem just an annoyance, but I would love to be able to type the required modules inline and not have to import them and use them in two different places.

Having the above difficulties and not being crazy about having to remove the TS module code from 10s of files I tried sticking with the typescript module system and making it play nice with the browserify module system, but...

Having snake-page-controller written like:

'use strict';
export module Mike.Snake {
    export interface ISnakePageController {
        isLoggedInUser: boolean;
    }

    export class SnakePageController implements ISnakePageController {
        public isLoggedInUser:boolean = false;

        static className:string = 'SnakePageController';
        static $inject:string[] = [];

        constructor() {
            console.log('snake controller created.');
        }
    }
}

I get access to both the class and the interface outside the file, but I have to drill down the whole module namespace even within the same module: ie.

//part of index.ts which is in the same TS module with SnakePageController
.controller(snakeController.Mike.Snake.SnakePageController.className, snakeController.Mike.Snake.SnakePageController);

Is there a full blown typescript,angularjs and browserify example out there and I missed it?

Answer 1

I can no longer put the export keyword in front of the interface since then the compiler complains about multiple exports per file

Tip: don't use export =. Only use named exports and then you can export more than one thing

So how can I use this interface outside the file it was declared in?

Recommend you put interfaces in a globals.d.ts file. More : http://basarat.gitbooks.io/typescript/content/docs/project/modules.html