• Search form is empty!

  • 022 TypeScript - arrow function and this

    http://robertdunaway.github.io

    TypeScript code kata list

    All code kata lists

    Smiley face

    022 TypeScript - arrow function and this

    Duration

    10 minutes

    Brief

    Using arrow functions.


    You’ll notice that “this.userId” is undefined. Re-write the class using an arrow function so “this.userId” works.

    For more information

    BING/GOOGLE: “TypeScript arrow function this”

    Instructions

    Get tutorial folder or the entire katas-typescript repo.
    Open the [before/*.sln] file and execute the kata.
    Feel free to execute this kata multiple times because repetition creates motor memory.

    Github

    Kata

    Run the application with the following code and make not of the value returned by “this.userId”.


    
    (function () {
    
        // Let's get started!
        console.log("Let's get started!");
    
        // "this" works differently in different circumstances.
        //  In this class "this" works in a way you might now expect.
        class employee {
            userId: string;
    
            displayUserId() {
                setTimeout(function () {
                    console.log(`"this.UserId" is: ${this.userId}`);
                }, 1000);
            }
        }
    
        // Creating an object of type employee.
        var myEmployee = new employee();
        myEmployee.userId = 'abc123';
    
        // Calling the displayUserId method.  
        // Notice "this.userId" returns "undefined".
        myEmployee.displayUserId();
    
    })();
    
    


    Create a new class with the “displayUserId” function as an arrow function to allow “this” to work as expected.


    
        class employee2 {
            userId: string;
    
            displayUserId() {
                setTimeout(() => {
                    console.log(`"this.UserId" with an arror function is: ${this.userId}`);
                }, 1000);
            }
        }
    
        // Creating an object of type employee.
        var myEmployee2 = new employee2();
        myEmployee2.userId = 'abc123';
    
        // Calling the displayUserId method.  
        // Notice "this.userId" returns "abc123".
        myEmployee2.displayUserId();
    
    

    Next

    Take a few minutes and imagine more examples.

    Smiley face

    0 comments:

    Post a Comment