Adding a method to a class method in typescript (javascript)

Question

I'd like to add a method to a method:

class MyClass {
    public foo(text: string): string {
        return text + ' FOO!'
    }

    // Some magical code which adds the method `bar` to `foo`.
}

const obj = new MyClass();
console.log(obj.foo('thing'));
console.log(obj.foo.bar('other thing'));

Is this possible? I've found a similar case for functions:

function Sum(x: number) { /*...*/ }
namespace Sum {
    export function empty() { /*...*/ }
}

Is there a way to do the same with methods of a class?

I'd like have the code in the class, not monkeypatched after the object has been created.

Mark · Accepted Answer · 2018-10-05 17:20:14Z

2

You can access the function on the classes prototype and do whatever you like with it. I don't think it's especially pretty, but you can do something like this:

class MyClass {
  constructor(myName) {
    this.myName = myName
    this.constructor.prototype.foo.bar = (function(a) {
      console.log(this.myName, "calling foo.bar with:", a)
    }).bind(this)
  }
  foo(text) {
    return text + ' FOO!'
  }

}

const obj = new MyClass("Mark");
obj.foo.bar('thing')
console.log(obj.foo('test'))

answered Oct 5, 2018 at 17:20

Mark

92.7k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guillaume CR · Accepted Answer · 2018-10-09 18:05:17Z

0

Not exactly what you're asking for, but the end result works:

class MyClass {
  public foo: MyChildClass = new MyChildClass();
}

class MyChildClass {
  public bar(text: string): string{
    return text;
  }
}

const obj = new MyClass();
console.log(obj.foo.bar('thing'));

EDIT I read your answer to my comment. I think the simpler way to achieve your goal is to use default parameters like such:

function foo(text: string, snapshot = false): string{
  if(snapshot){
    return 'snapshot';
  }
  return text;
}

console.debug(foo('test'));
console.debug(foo('test', true));

Now your solution has the advantage that you can see at the call site that you are requesting a bypass or a snapshot clearly because of the additional function names. You can achieve a similar result in typescript by replacing the arguments of foo with an interface with optional properties. In other languages, we would call this technique named parameters:

interface iFooArgs{
  text: string;
  bypass?: boolean;
  snapshot?: boolean;
}

function foo(args: iFooArgs): string {
  if(args.bypass){
    return 'bypass';
  }
  if(args.snapshot){
    return 'snapshot';
  }
  return args.text;
}

console.debug(foo({text: 'test'}));
console.debug(foo({text: 'bypass?', bypass: true}));
console.debug(foo({text: 'snapshot?', snapshot: true}));

edited Oct 9, 2018 at 18:05

answered Oct 5, 2018 at 17:16

Guillaume CR

3,0361 gold badge21 silver badges31 bronze badges

3 Comments

André C. Andersen Over a year ago

foo being a method is core to what I want to achieve. I want the foo() method to be the default usage of a method. It could be a method which accesses an expensive resources with built-in caching. You might like an alternative way of using that method, e.g., bypassing or invalidating the cache. It could be that you'd typically use obj.fetch('42'), but sometimes you might want obj.fetch.bypass('42') to force load the expensive resources, or obj.fetch.snapshot('42') to force use the cache even if the cache has timed out. In python I'd just use your example with __call__(self).

Guillaume CR Over a year ago

@AndréC.Andersen That's interesting. I think the way you'd do this in js usually is simply to have foo include a parameter to bypass the cache. Consumers of foo that do not supply the "bypass cache" parameter would receive the cache. foo() itself would verify if the parameters were supplied, or "undefined" by default for your "default usage".

Guillaume CR Over a year ago

@AndréC.Andersen Added to my answer what I think is the simpler solution to your problem.

J. Koutsoumpas · Accepted Answer · 2019-04-01 20:21:15Z

UPDATE: This can be solved cleanly using intersection types:

class MyClass {

    constructor() {
        this.foo = function () {
            return "this is a"
        };

        this.foo.bar = function() {
            return "this is b"
        };
    }

    public foo: Function & { bar?: () => string };
}

const obj = new MyClass();

console.log(obj.foo());
console.log(obj.foo.bar());

Test it in the Typescript Playgroung

This is possible because by using the & sign in the type definition of the class method we are fussing together both a Function type and a simple type of an Object that has 1 property bar that is another function itself. However this property must be declared as optional in the second type, that is because Typescript will complain that in the first assignment inside the constructor of the class it doesn't satisfy this extra type. But in reality the next expression in the constructor completes it by assigning the bar property of foo.

--- OLD answer follows, don't use this it doesn't do exactly what the OP wanted

Instead of a method, define a getter accessor method for class member 'foo' that returns an object with a function 'bar'

    class MyClass {
        get foo(): {bar: (text: string) => string} {

            // run any code here that needs to be run before bar()

            return {
                bar: (text: string) => {
                    return text + ' FOO!';
                }
            }
        }
    }

    const obj = new MyClass();
    console.log(obj.foo.bar('thing'));

It seems the foo() is no longer a callable function with this. Is there a way to do something similar but still allow obj.foo() to work?

Collectives™ on Stack Overflow

Adding a method to a class method in typescript (javascript)

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related