What is monkey patching regarding TypeScript ?

Question

Can someone give me an example of monkey patching regarding TypeScript & Angular2 and also an explanation ?

Answer 1

Because JavaScript is highly dynamic you can replace a member function (and related functionality) on any object with a new one. It allows you to modify the behaviour of a piece of code without altering the original code.

Here is a simple example in TypeScript:

// original code, assume its in some library
interface Foo {
    a:number,
    b():number
}
var foo:Foo = {a:123,b:function(){return this.a}} 

// Monkey patch the function b with a new one
// Allows you to change the behaviour of foo without changing the original code
foo.b = function(){return 456}

More : Monkey patching is not just interception

When you replace the function but retain the original behaviour, it is function interception. Yes you use monkey patching for function interception (replace the function) but calling the original function is not a requirement for monkey patching.

• The python answer What is monkey patching? (replacement / overriding only)

Also from Wikipedia : https://en.wikipedia.org/wiki/Monkey_patch an application that clearly replaces original behaviour:

Replace methods / classes / attributes / functions at runtime, e.g. to stub out a function during testing;

Finally, just because you can call the original doesn't mean you have to call the original when monkey patching.

Answer 2

The accepted answer is not really an example of monkey patching. It's an example of overriding a function

The key to monkey patching is that the original function is assigned to a variable (for later use), and replaced/overridden with a new function - but, the new function has to call the original function as well

Demo on TypeScript Playground

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let originalFunciton = Greeter.prototype.greet;

Greeter.prototype.greet = function () {
    alert('In Monkey Patched Function');
    let returnValue = originalFunciton.apply(this); 
    return returnValue;
};

let greeter = new Greeter("world");

let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
    alert(greeter.greet());
}

document.body.appendChild(button);