Do you write your Angular 1.x directives in TypeScript?

Angular 1.x directives are awesome and they help you reuse your code base by being able to drop directives (aka reuasable HTML elements) into several pages without having to duplicate your code base.

Writing your AngularJS 1.x directives in Typescript will help in the following ways:

1. You will more easily migrate to Angular2 which is written in TypeScript
2. Your code will be more robust with compile time checking avoiding errors you might miss or not see till you run the application in the browser
3. You can more easily manage your code by reusing directives and not duplicating code
4. If you keep your DDO (Directive Definition Object) seperate to your directive controller logic you can avoid using $scope and further be ready to migrate to Angular2. You can also reuse the directive controller with other parts of your application

Writing Angular 1.x directives in Typescript can be a challenge with only a few examples available online. Most examples of Angular 1.x directives are in JavaScript and converting them to TypeScript versions means you need to have a good understanding of how it all works. Many examples that are available online do it a little differently from each other.

HTML

<current-value></current-value>

Typescript

module app.widgets {
    'use strict';

    class CurrentValueDirectiveController {
        amount: number;

        static $inject = ['investmentReportsService'];
        constructor(private investmentReportsService: app.dataServices.InvestmentService) {
        }

        setCurrentValue() {
            this.investmentReportsService.investmentSummary(this.amount)
                .then((response) => {
                    this.currentValue = response.Data.TotalMarket;
                });
        }
    }

    function CurrentValueDirective(): ng.IDirective {
        return {
            restrict = 'E';
            templateUrl = 'app/widgets/currentValue/currentValue.directive.html';
            controller = CurrentValueDirectiveController;
            controllerAs = 'currentValueDirCtrl';
            bindToController = true;
            scope = {
                amount: '='
            }
        }
    }

    angular
        .module('app.widgets')
        .directive('currentValue', CurrentValueDirective);
}