I'm using Angularjs and Typescript and I would like to extend the angular object with a custom function like this:
angular.executeAfterDigest(function(){...});
How do I go around and do this? I suspect I need to extend IAngularStatic somehow or can I use something like angular.prototype? (I'm not very experienced with extending javascript object to start with).
Maybe it's more proper to create an "angularHelperService" that get injected instead.
Just tell typescript about it by adding to the interface : https://github.com/borisyankov/DefinitelyTyped/blob/master/angularjs/angular.d.ts#L9
declare module ng {
interface IAngularStatic {
executeAfterDigest:Function;
}
}
I would prefer not to change the angular.d.ts as it's a third party component
You wouldn't put this in angular.d.ts. You would put this in your globals.d.ts (or vendor.d.ts) to document how you are customizing the vendor libraries (here angular) you are using in your project.
Remember: Interfaces are open ended.
Updating for current state of things:
basarat's answer didn't work for me and it broke IAngularStatic typing in my app, but adding this to my global.d.ts fixed the custom angular extending function problem:
declare namespace angular {
interface IAngularStatic {
copyData:Function;
}
}
I derived the declare module ng to declare namespace angular change from Definitely Typed structure linked by basarat:
https://github.com/borisyankov/DefinitelyTyped/blob/master/angularjs/angular.d.ts#L9
Since angular is a singleton instance, you can just do:
angular.executeAfterDigest = function(fn) {
setTimeout(fn,0);
}
When you call it, it is not guaranteed to execute after a digest. You would have to make sure that it is only called when $scope.$$phase is $digest or $apply. Basically, it will only work when you're in the angular world.
