Assign a function in one class to be equivalent to a function in a different class

Question

Assign a function in one class to be equivalent to a function in a different class

What is causing this issue and how should it be resolved?

class A {
    constructor() {
        console.log('constructin A')
    }
  public someMethod = (x: string) => {
    console.log(x)
    }
}

class B {
    private myA: A
    constructor(a: A) {
        console.log('constructin B')
        this.myA = a
    }
    // Fails with "Uncaught TypeError: Cannot read property 'someMethod' of undefined"
    anotherMethod = this.myA.someMethod;
}

const a = new A()
const b = new B(a)

b.anotherMethod('hello')

typescript playground link

Additional Information:

This issue persists even when using plain JavaScript instead of TypeScript.
The preference for the syntax
```
anotherMethod = this.myA.someMethod
```
over
```
anotherMethod = (x: string) => { this.myA.someMethod(x) }
```
stems from complex type annotations on someMethod that are impractical to duplicate on anotherMethod.

UPDATE (19.06.2020) - 'with decoupling'

The explanations provided in response to this query, including comments such as this, shed light on why the original syntax fails to function. Regarding potential solutions:

Decoupling A and B: While not explicitly stated initially, the objective behind having B utilize a method from A is to establish a level of separation between them. In practical scenarios, different instances of A adhere to a common interface comprising someMethod implementations tailored to their specific requirements. The desired outcome is for B to interact with someMethod offered by any given A instance without delving into implementation nuances. The accepted resolution comprehends this intention effectively through detailed code examples. It presents an optimal, seamless syntax devoid of pitfalls for this particular scenario. For quick reference, refer to the accepted answer, specifically:

public anotherMethod(...args: Parameters<A['someMethod']>): ReturnType<A['someMethod']> {
    return this.myA.someMethod(...args);
}

In cases where decoupling is unnecessary, this outlined approach may prove adequate.

javascript typescript

Answer 1

Answer №1

Identifying the root cause of the issue:

The issue arises from the fact that

anotherMethod = this.myA.someMethod;

is executed prior to this.myA = a;. The JavaScript code generated by the TypeScript compiler looks like this:

class B {
    constructor(a) {
        this.anotherMethod = this.myA.someMethod;
        console.log('constructin B');
        this.myA = a;
    }
}

As a result, an error is inevitable in this scenario.

If you need to link the method during construction, you must manually do so in the constructor:

class A {
    constructor() {
        console.log('constructin A')
    }
  public someMethod = (x: string) => {
    console.log(x)
    }
}

class B {
    private myA: A

    //declare the anotherMethod interface to match the  someMethod interface
    public anotherMethod: typeof A.prototype.someMethod

    constructor(a: A) {
        console.log('constructin B')
        this.myA = a

        //assign the method. Note: `this.anotherMethod = a.someMethod` is equivalent
        this.anotherMethod = this.myA.someMethod;
    }
}

const a = new A()
const b = new B(a)

b.anotherMethod('hello') //OK
b.anotherMethod(42)      //error - does not accept numbers

Playground Link

Here's how it would look in pure JavaScript:

class A {
  constructor() {
    console.log('constructin A')
  }
  someMethod = (x) => {
    console.log(x)
  }
}

class B {
  constructor(a) {
    console.log('constructin B')
    this.myA = a;
    this.anotherMethod = this.myA.someMethod;
  }
}

const a = new A()
const b = new B(a)

b.anotherMethod('hello')

A more effective solution

In the comments, the OP mentioned:

I wanted separation of concerns, so that the implementation details of calling the api is delegated to the A classes, and B is just composed with a specific A.

For such scenarios, I recommend avoiding direct method attachments and instead defining a single method in B that forwards all calls to myA:

//method with the same signature as A.someMethod
public anotherMethod(...args: Parameters<A['someMethod']>): ReturnType<A['someMethod']> {
    //use the delegate for the call
    return this.myA.someMethod(...args);
}

This approach is cleaner than assigning methods to instances during construction. It clearly specifies the parameters and return types expected from someMethod. Even if someMethod returns void, it remains valid.

Here's how it can be implemented using an interface for A and separate classes implementing it:

interface A {
    someMethod(x: string): void;
}

class X implements A {
    constructor() {
        console.log('constructin X')
    }
  public someMethod = (str: string) => {
      console.log("X", str);
    }
}

class Y implements A {
    constructor() {
        console.log('constructin Y')
    }
  public someMethod = (str: string) => {
      console.log("Y", str);
    }
}
class Z implements A {
    constructor() {
        console.log('constructin Z')
    }
  public someMethod = (str: string) => {
      console.log("Z", str);
    }
}

class B {
    private myA: A

    constructor(a: A) {
        console.log('constructin B')
        this.myA = a
    }

    public anotherMethod(...args: Parameters<A['someMethod']>): ReturnType<A['someMethod']> {
        return this.myA.someMethod(...args);
    }
}
...

You can skip reading further from here.

(Optional continuation) Reasons behind the suggested solution

Let's delve into the rationale for choosing a method-based delegation over property assignment within B. This exploration uncovers potential pitfalls associated with different approaches.

...continued explanation of various advanced concepts and potential issues...

Detailed examination of shadowing this context using functions and getters
Exploration of arrow functions vs regular methods regarding context retention
Analysis of using Proxy objects for context preservation

Answer 2

Identifying the root cause of the issue:

The issue arises from the fact that

anotherMethod = this.myA.someMethod;

is executed prior to this.myA = a;. The JavaScript code generated by the TypeScript compiler looks like this:

class B {
    constructor(a) {
        this.anotherMethod = this.myA.someMethod;
        console.log('constructin B');
        this.myA = a;
    }
}

As a result, an error is inevitable in this scenario.

If you need to link the method during construction, you must manually do so in the constructor:

class A {
    constructor() {
        console.log('constructin A')
    }
  public someMethod = (x: string) => {
    console.log(x)
    }
}

class B {
    private myA: A

    //declare the anotherMethod interface to match the  someMethod interface
    public anotherMethod: typeof A.prototype.someMethod

    constructor(a: A) {
        console.log('constructin B')
        this.myA = a

        //assign the method. Note: `this.anotherMethod = a.someMethod` is equivalent
        this.anotherMethod = this.myA.someMethod;
    }
}

const a = new A()
const b = new B(a)

b.anotherMethod('hello') //OK
b.anotherMethod(42)      //error - does not accept numbers

Playground Link

Here's how it would look in pure JavaScript:

class A {
  constructor() {
    console.log('constructin A')
  }
  someMethod = (x) => {
    console.log(x)
  }
}

class B {
  constructor(a) {
    console.log('constructin B')
    this.myA = a;
    this.anotherMethod = this.myA.someMethod;
  }
}

const a = new A()
const b = new B(a)

b.anotherMethod('hello')

A more effective solution

In the comments, the OP mentioned:

I wanted separation of concerns, so that the implementation details of calling the api is delegated to the A classes, and B is just composed with a specific A.

For such scenarios, I recommend avoiding direct method attachments and instead defining a single method in B that forwards all calls to myA:

//method with the same signature as A.someMethod
public anotherMethod(...args: Parameters<A['someMethod']>): ReturnType<A['someMethod']> {
    //use the delegate for the call
    return this.myA.someMethod(...args);
}

This approach is cleaner than assigning methods to instances during construction. It clearly specifies the parameters and return types expected from someMethod. Even if someMethod returns void, it remains valid.

Here's how it can be implemented using an interface for A and separate classes implementing it:

interface A {
    someMethod(x: string): void;
}

class X implements A {
    constructor() {
        console.log('constructin X')
    }
  public someMethod = (str: string) => {
      console.log("X", str);
    }
}

class Y implements A {
    constructor() {
        console.log('constructin Y')
    }
  public someMethod = (str: string) => {
      console.log("Y", str);
    }
}
class Z implements A {
    constructor() {
        console.log('constructin Z')
    }
  public someMethod = (str: string) => {
      console.log("Z", str);
    }
}

class B {
    private myA: A

    constructor(a: A) {
        console.log('constructin B')
        this.myA = a
    }

    public anotherMethod(...args: Parameters<A['someMethod']>): ReturnType<A['someMethod']> {
        return this.myA.someMethod(...args);
    }
}
...

You can skip reading further from here.

(Optional continuation) Reasons behind the suggested solution

Let's delve into the rationale for choosing a method-based delegation over property assignment within B. This exploration uncovers potential pitfalls associated with different approaches.

...continued explanation of various advanced concepts and potential issues...

Detailed examination of shadowing this context using functions and getters
Exploration of arrow functions vs regular methods regarding context retention
Analysis of using Proxy objects for context preservation

Answer 3

Answer №2

anotherMethod will have a definition prior to setting myA in the constructor. An effective solution for your issue is to utilize a getter:

get anotherMethod() {
    return this.myA.someMethod;
}

Interactive Coding Playground

In addition, you can opt to make the method within A static. This would eliminate the necessity of passing an instance of A to B. Ensure that B has access to A.

class A {
    constructor() {
        console.log('constructin A')
    }

    static someMethod = (x: string) =>{
        console.log(x)
    }
}

class B {
    private myA: A
    constructor(a: A) {
        console.log('constructin B')
        this.myA = a
    }

    anotherMethod = A.someMethod;
}

const a = new A()
const b = new B(a)

b.anotherMethod("Hello")

Online Code Editor

Answer 4

anotherMethod will have a definition prior to setting myA in the constructor. An effective solution for your issue is to utilize a getter:

get anotherMethod() {
    return this.myA.someMethod;
}

Interactive Coding Playground

In addition, you can opt to make the method within A static. This would eliminate the necessity of passing an instance of A to B. Ensure that B has access to A.

class A {
    constructor() {
        console.log('constructin A')
    }

    static someMethod = (x: string) =>{
        console.log(x)
    }
}

class B {
    private myA: A
    constructor(a: A) {
        console.log('constructin B')
        this.myA = a
    }

    anotherMethod = A.someMethod;
}

const a = new A()
const b = new B(a)

b.anotherMethod("Hello")

Online Code Editor

Assign a function in one class to be equivalent to a function in a different class

UPDATE (19.06.2020) - 'with decoupling'

Answer №1

Identifying the root cause of the issue:

A more effective solution

(Optional continuation) Reasons behind the suggested solution

Answer №2

Similar questions

Unable to locate element in Internet Explorer when using frame switching within Selenium

Struggling to implement touch event functionality for CSS3 spotlight effect

What is the process for sending a post request in the inline editor of Dialogflow?

Create a dynamic menu dropdown with absolute positioning using React

Issues encountered with JavaScript when trying to use the jQuery API

Every other attempt at an Ajax request seems to be successful

Expo constants failing to load on web due to unresolved manifest object issue

What is the reason for the directive being available in $rootScope?

Set the array as the object attribute

"Endowed with improper dimensions, the BootStrap collapse feature

Using Typescript: What is the best way to convert a variable into a specific element of an array?

MeteorJS: Verification of User Email addresses

Steps to ensure that a particular tab is opened when the button is clicked from a different page

Encountering a problem with Firebase while offline. The error message "FirebaseError: Firebase App named '[DEFAULT]' already exists with different options or config." is appearing

I am experiencing issues with my Jest unit test case for Material UI's multi select component failing

Dynamic Search Functionality using Ajax and JavaScript

Using jQuery to load HTML response into entire page

Troubleshooting the 'App Already Bootstrapped with this Element' Error in AngularJS

What steps can be taken to restrict users to providing only one comment and rating for each item?

Error occurs when attempting to read the 'map' properties of null because the JSON array is double nested