Angular with Typescript - the React-Component-Style way...

App.ts

import angular = require('angular');

import ModuleA from './components/moduleA/index';

class App {

    name = 'myapp';
    selector = '[ng-app]';

    private mod: angular.IModule;

    constructor() {
        var dependencies: string[] = [];

        dependencies.push(ModuleA);

        this.mod = angular.module(this.name, dependencies);
    }
}

(() => {
    var app = new App();

    angular
        .bootstrap(document.querySelector(app.selector), [app.name], {
            strictDi: true
        });
})();

index.ts

//components/moduleA/index.ts

import SomeService from './SomeService';
import SomeComponent from './SomeComponent';

class ModuleA {
    name = 'myapp.moduleA';
    private mod = angular.module(this.name, []);

    constructor() {
        this.mod.service('someService', SomeService);

        this.mod.directive('someComponent', SomeComponent);

        this.mod.filter('urlDecode', [() => {
            return decodeURIComponent;
        }]);
    }
}

export default ((): string => {
    var module = new ModuleA();

    return module.name;
})();

integration.html

<div ng-app="myapp">
    <someComponent model="{some:'data'}"></someComponent> 
</div>
    

SomeComponent.ts

//components/moduleA/SomeComponent.ts

class Controller {

    model:any;

    // @ngInject
    constructor(private someService:SomeService, private $scope:angular.IScope) {
    }

    save() {
      alert('lolcat');
    }

    static template = `<div>{{ someComponent.model  }}<a ng-click="someComponent.save()">Click</a></div>`
}

export default ():angular.IDirective => {
    return {
        restrict: 'E',
        bindToController: {
            model: '@',
        },
        scope: true,
        controllerAs: 'someComponent',
        controller: Controller,
        template: Controller.template
        //templateUrl: 'components/moduleA/template.html' //if used with angular template cache compilation
    };
};

credits goes to @akoenig ;)

:)