How can I preserve lexical scope in TypeScript with a callback function

by

Edit 2014-01-28:

New readers, make sure you check out Zac’s answer below.

He has a much neater solution that will let you define and instantiate a scoped function in the class definition using the fat arrow syntax.

The only thing I will add is that, in regard to option 5 in Zac’s answer, it’s possible to specify the method signature and return type without any repetition using this syntax:

public myMethod = (prop1: number): string => {
    return 'asdf';
}

Edit 2013-05-28:

The syntax for defining a function property type has changed (since TypeScript version 0.8).

Previously you would define a function type like this:

class Test {
   removeRow: (): void;
}

This has now changed to:

class Test {
   removeRow: () => void;
}

I have updated my answer below to include this new change.

As a further aside: If you need to define multiple function signatures for the same function name (e.g. runtime function overloading) then you can use the object map notation (this is used extensively in the jQuery descriptor file):

class Test {
    removeRow: {
        (): void;
        (param: string): string;
    };
}

You need to define the signature for removeRow() as a property on your class but assign the implementation in the constructor.

There are a few different ways you can do this.

Option 1

class Test {

    // Define the method signature here.
    removeRow: () => void;

    constructor (){
        // Implement the method using the fat arrow syntax.
        this.removeRow = () => {
            // Perform your logic to remove the row.
            // Reference `this` as needed.
        }
    }

}

If you want to keep your constructor minimal then you can just keep the removeRow method in the class definition and just assign a proxy function in the constructor:

Option 2

class Test {

    // Again, define the method signature here.
    removeRowProxy: () => void;

    constructor (){
        // Assign the method implementation here.
        this.removeRowProxy = () => {
            this.removeRow.apply(this, arguments);
        }
    }

    removeRow(): void {
        // ... removeRow logic here.
    }

}

Option 3

And finally, if you’re using a library like underscore or jQuery then you can just use their utility method to create the proxy:

class Test {

    // Define the method signature here.
    removeRowProxy: () => void;

    constructor (){
        // Use jQuery to bind removeRow to this instance.
        this.removeRowProxy = $.proxy(this.removeRow, this);
    }

    removeRow(): void {
        // ... removeRow logic here.
    }

}

Then you can tidy up your deleteItem method a bit:

// Specify `Function` as the callback type.
// NOTE: You can define a specific signature if needed.
deleteItem(removeRowCallback: Function ): void {
    $.ajax(action, {
        data: { "id": id },
        type: "POST"
    })

    // Pass the callback here.
    // 
    // You don't need the fat arrow syntax here
    // because the callback has already been bound
    // to the correct scope.
    .done(removeRowCallback)

    .fail(() => {
        alert("There was an error!");
    });
}

More Related Contents:

  1. I know that callback function runs asynchronously, but why?
  2. How should I call 3 functions in order to execute them one after the other?
  3. Angular 2 Sibling Component Communication
  4. How to convert an array of objects to object with key value pairs
  5. JS : Convert Array of Strings to Array of Objects
  6. Is it possible to catch exceptions thrown in a JavaScript async callback?
  7. Inject TypeORM repository into NestJS service for mock data testing
  8. What is the difference between class method vs. class field function vs. class field arrow function?
  9. Angular 4 pass data between 2 not related components
  10. Typescript: No index signature with a parameter of type ‘string’ was found on type ‘{ “A”: string; }
  11. String.Format not work in TypeScript
  12. How To bind data using TypeScript Controller & Angular Js
  13. Waiting on multiple asynchronous calls to complete before continuing
  14. Hidden threads in Javascript/Node that never execute user code: is it possible, and if so could it lead to an arcane possibility for a race condition?
  15. Javascript: how to pass parameters to callback function [duplicate]
  16. Error: ‘types’ can only be used in a .ts file – Visual Studio Code using @ts-check
  17. Call a function on click event in Angular 2
  18. Pass additional parameter to Javascript callback function [duplicate]
  19. How to make TypeScript output valid ES6 module import statements?
  20. Angular2 too many file requests on load
  21. Should we use useCallback in every function handler in React Functional Components
  22. Why I am not getting warnings about StrictNullChecks in typescript
  23. Plain Javascript as Angular 2 service
  24. useMemo vs. useEffect + useState
  25. TypeScript “Compile on save” feature not working in Visual Studio 2015
  26. angular 2 access ng-content within component
  27. Property ‘XXX’ does not exist on type ‘CombinedVueInstance’
  28. jQuery $.ajax(), pass success data into separate function
  29. How to import ipcRenderer in vue.js ? __dirname is not defined
  30. How to implement a Typescript interface to an es5-style “class”?

Leave a Comment