AngularJS Typescript directive to class - angularjs

Question

I am using AngularJS and had been so for quite a while recently i started to mess around with Typescript i was able to convert most of my Angular code to Typescript and found great benefit especially when it get to services, but i can not convert the following directive to typescript class anyone has an idea how to do that, it works perfectly fine as AngularCode
angular.module('myValidation', [])
.directive('myValidation', function() {
return {
restrict: 'A',
require: "ngModel",
link: function(scope, elm, attrs, ctrl) {
switch (attrs.myValidation) {
case 'email':
var regex = /^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
break;
}
ctrl.$parsers.unshift(function(viewValue) {
if (regex.test(viewValue)) {
ctrl.$setValidity('myValidation', true);
}
else {
ctrl.$setValidity('myValidation', false);
}
return viewValue;
});
ctrl.$formatters.unshift(function(viewValue) {
if (regex.test(viewValue)) {
ctrl.$setValidity('myValidation', true);
}
else {
ctrl.$setValidity('myValidation', false);
}
return viewValue;
});
}
};
});

Answer 1

https://github.com/aleksey-pastuhov/AngularJS-Typed-Core
#directive(app)
export default class CopyText implements IDirective {
angularModule = app;
restrict = "E";
scope: any = {
model: "="
};
templateUrl = "Templates/Directives/copyText.html";
link: (scope: any, elm: any) => void = (scope, elm: any) => {
var input: JQuery;
scope.select = ($event) => {
input = $($event.target).next().first();
};
scope.copy = () => {
input.on("focus", function() {
this.setSelectionRange(0, this.value.length);
});
input.focus();
};
};
}

Answer 2

directive angularjs required a function. If you want to use directive with typescript class, you need to implement a function Factory for return instance of your class. Look this exemple:
Module Directive{
class myDirectiveCtrl {
private name: string;
private items: Array<string>;
private $q: ng.IQService;
static $inject = ['$scope','$window','$q'];
constructor($scope: ImyDirectiveScope, $window) {
this.name = $scope.name;
this.items = ['salut', 'hello', 'hi', 'good morning'];
}
clickMe = ():void => {
console.log('dssff');
this.items.push('yo');
}
}
export interface ImyDirectiveScope {
name: string
}
export class myDirective implements ng.IDirective {
restrict = 'E';
template = '<div><h1>{{vm.name}}</h1><div ng-repeat="i track by $index in vm.items">{{i}}</div><hr/><button type="button" ng-click="vm.clickMe()">Click Me</button></div>';
replace = true;
scope = {
name: '#'
};
controller = myDirectiveCtrl;
controllerAs = 'vm';
link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes, controller: myDirectiveCtrl) => {
};
constructor() { };
static factory(): ng.IDirectiveFactory {
var directive = () => new myDirective();
return directive;
}
}
app.directive('myDirective',Directive.myDirective.factory());
}