Pass values between functions in Typescript

Question

Pass values between functions in Typescript

Currently, I have been working on a project using both Node JS and Typescript, where my main challenge lies in sharing variables between different classes within the same file.

The class from which I need to access the max variable is:

export class constUt {
        env: string;
        max: number;

        constructor() {
            this.env = 'dev';
            this.max = 100;
        }
    }

And here is the class where I am struggling to retrieve the max variable:

export class callBack {

        private utilsCo = new constUt();

        call = function (err:any, csv:any) {
            console.log(`max constUt: ${this.utilsCo.max}`); //error

            if (err) throw err;
        }
    }

My current issue revolves around finding a way to access the max variable inside the call function.

typescript

Answer 1

Answer №1

The issue lies not in the sharing of the variable, but in how the function is declared. When you declare the function as a class variable, it creates a function that may not be directly tied to the class declaring it. Essentially, TypeScript struggles to determine the context in which this should refer to.

To resolve this, here are three possible solutions:

Declare it as a class member

export class callBack {

    private utilsCo = new constUt();

    public call(err:any, csv:any) {
        console.log(`max constUt: ${this.utilsCo.max}`); 

        if (err) throw err;
    }
}

Define it as an arrow function (which inherits the context from the class)

export class callBack {

    private utilsCo = new constUt();

    call = (err:any, csv:any) => {
        console.log(`max constUt: ${this.utilsCo.max}`); 

        if (err) throw err;
    }
}

Explicitly specify the context:

export class callBack {

    private utilsCo = new constUt();

    call = function (this: callBack, err:any, csv:any) => {
        console.log(`max constUt: ${this.utilsCo.max}`); 

        if (err) throw err;
    }
}

Each of these declarations carries a nuanced difference.

1 is declared on the class prototype, with all associated implications

2 does not allow its context to change, which may be desirable in this scenario

3 the context is statically typed, providing no runtime guarantees, similar to (1) but unlike (2)

Answer 2

The issue lies not in the sharing of the variable, but in how the function is declared. When you declare the function as a class variable, it creates a function that may not be directly tied to the class declaring it. Essentially, TypeScript struggles to determine the context in which this should refer to.

To resolve this, here are three possible solutions:

Declare it as a class member

export class callBack {

    private utilsCo = new constUt();

    public call(err:any, csv:any) {
        console.log(`max constUt: ${this.utilsCo.max}`); 

        if (err) throw err;
    }
}

Define it as an arrow function (which inherits the context from the class)

export class callBack {

    private utilsCo = new constUt();

    call = (err:any, csv:any) => {
        console.log(`max constUt: ${this.utilsCo.max}`); 

        if (err) throw err;
    }
}

Explicitly specify the context:

export class callBack {

    private utilsCo = new constUt();

    call = function (this: callBack, err:any, csv:any) => {
        console.log(`max constUt: ${this.utilsCo.max}`); 

        if (err) throw err;
    }
}

Each of these declarations carries a nuanced difference.

1 is declared on the class prototype, with all associated implications

2 does not allow its context to change, which may be desirable in this scenario

3 the context is statically typed, providing no runtime guarantees, similar to (1) but unlike (2)

Answer 3

Answer №2

I tested out your code on stackblitz and it seems to be functioning correctly. Here is a version of your code without TypeScript for better comprehension:

To achieve the desired output, simply include the two lines below.

Tip: Remember to capitalize the first letter of the class name to differentiate it from other variables or class instances.

let callback = new CallBack();
    callback.call(null, {});

============================
Your TypeScript code with the additional lines
==============================

// constUt.ts
// ================================

export class ConstUt {
    env: string;
    max: number;

    constructor() {
        this.env = 'dev';
        this.max = 100;
    }
}


// callback.ts
// ================================

export class CallBack {

    private utilsCo = new ConstUt();
    
    call = (err: any, csv: any) => {
        console.log(`max constUt: ${this.utilsCo.max}`); // OUTPUT : max constUt: 100

        if (err) throw err;
    }
}

// Include the following two lines to see the expected result
// Instantiate an object of your callback class and then invoke the call method with the necessary parameters
// Use null if you want to skip the error block execution and avoid throwing an error

let callback = new CallBack();
callback.call(null, {});

Working Example

class ConstUt {
    env;
    max;

    constructor() {
        this.env = 'dev';
        this.max = 100;
    }
}

class CallBack {

    utilsCo = new ConstUt();
    
    call = (err, csv) => {
        console.log(`max constUt: ${this.utilsCo.max}`); // OUTPUT : max constUt: 100

        if (err) throw err;
    }
}

// Include these two lines to view the anticipated outcome

let callback = new CallBack();
callback.call(null, {});

I hope this explanation is helpful.

Best regards, Jignesh Raval

Answer 4

I tested out your code on stackblitz and it seems to be functioning correctly. Here is a version of your code without TypeScript for better comprehension:

To achieve the desired output, simply include the two lines below.

Tip: Remember to capitalize the first letter of the class name to differentiate it from other variables or class instances.

let callback = new CallBack();
    callback.call(null, {});

============================
Your TypeScript code with the additional lines
==============================

// constUt.ts
// ================================

export class ConstUt {
    env: string;
    max: number;

    constructor() {
        this.env = 'dev';
        this.max = 100;
    }
}


// callback.ts
// ================================

export class CallBack {

    private utilsCo = new ConstUt();
    
    call = (err: any, csv: any) => {
        console.log(`max constUt: ${this.utilsCo.max}`); // OUTPUT : max constUt: 100

        if (err) throw err;
    }
}

// Include the following two lines to see the expected result
// Instantiate an object of your callback class and then invoke the call method with the necessary parameters
// Use null if you want to skip the error block execution and avoid throwing an error

let callback = new CallBack();
callback.call(null, {});

Working Example

class ConstUt {
    env;
    max;

    constructor() {
        this.env = 'dev';
        this.max = 100;
    }
}

class CallBack {

    utilsCo = new ConstUt();
    
    call = (err, csv) => {
        console.log(`max constUt: ${this.utilsCo.max}`); // OUTPUT : max constUt: 100

        if (err) throw err;
    }
}

// Include these two lines to view the anticipated outcome

let callback = new CallBack();
callback.call(null, {});

I hope this explanation is helpful.

Best regards, Jignesh Raval

Pass values between functions in Typescript

Answer №1

Answer №2

Similar questions

Customize the datepicker locale in Valor

How can we prevent new chips (primeng) from being added, but still allow them to be deleted in Angular 2?

Upon hovering, icons for each project name are displayed when `mouseenter` event is triggered

What is the best way to verify the type of an object received from request.body in Typescript

Is there a more efficient method for invoking `emit` in Vue's Composition API from an external file?

The timer functionality in the Angular 2+ component is malfunctioning

Is it possible for Go's http server to compile TypeScript?

Downloading a PDF in a Next.js application

How to retrieve a variable from an object within an array using AngularJS code

Create a collection of values and assign it to a form control in Ionic 2

Incorporate a fresh element into an object after its initial creation

Mastering Ember with Typescript - crafting action definitions

Determine the accurate data type while iterating through a for loop

Incorporate a personalized Material UI checkbox within a column of the Material React table

Testing TypeScript functionality within the Eclipse environment with unit tests

Tips for restricting additional input when maximum length is reached in an Angular app

Unleashing the power of storytelling with React: A guide to creating dynamic story

I'm in the process of putting together a node.js project using typescript, but I'm a little unsure about the steps needed to

Using MUI ClickAwayListener to automatically close the modal upon clicking in React.Js

Utilizing Generic Types for Object Parameters