TypeScript + JavaScript: Is not a function at x?

Question

I am new to TypeScript and I'm running into a bug within my AngularJS + TypeScript/JavaScript app.

I have a service that looks a little like this:

module myApp {

    'use strict';

    export interface IActionItem {
        name: String;
        link?: String;
        icon: String;
        action?: any;
        className: String;
        order: Number;
    }

    export interface IActionItemsService {
        getActionItems() : IActionItem[];
    }

    class ActionItemsService implements IActionItemsService {

        private activeActionItemClass:String = 'active_menu_item';
        private actionItems:IActionItem[] = [
            {
                name: 'Search',
                icon: 'magnifier',
                action: this.search,
                className: 'visible',
                order: 2
            }
        ];

        constructor() {

        }

        private search(actionItem:IActionItem) {

            this.toggleActiveClass(actionItem);

        }

        private toggleActiveClass(actionItem:IActionItem) {
            // do some stuff with the actionItem className
        }

    }
}

...A controller that handles setting an array of action items to the scope. And just a simple HTML page that handles a click action:

<div class="list_menu_options" ng-repeat="actionItem in vm.actionItems | orderBy:'order':true ">

    <a ng-class="actionItem.className"
            ng-click="actionItem.action(actionItem)">
        <span class="icon-{{actionItem.icon}}"></span>
        {{ actionItem.name }}
    </a>

</div>

Everything seems to be working as expected (and TypeScript compiles to JavaScript without error), but when I click on my search item, I see:

TypeError: this.toggleActiveClass is not a function
at Object.ActionItemsService.search [as action]

I'm sure I'm misusing something somewhere due to a minimal understanding of TypeScript, but I can't seem to find it. Any suggestions?

Here, action is a property of the actionItem object - in my example, I only have one actionItem whose action is referencing the search function in the actionItemService class. — amlyhamm
– amlyhamm, Commented Jun 1, 2015 at 16:21
Yeah right.. I noticed it after i posted that comment and removed it.. :) — PSL
– PSL, Commented Jun 1, 2015 at 16:22

PSL · Accepted Answer · 2015-06-01 16:28:15Z

1

The reason is because action function being a part of the object (literal) is not an instance of the actual class that implements the reference to its action property, search @

      private actionItems:IActionItem[] = [{
            name: 'Search',
            icon: 'magnifier',
            action: this.search, //<-- this one
            className: 'visible',
            order: 2
        }
    ];

Hence when you invoke the function via actioItem.action(..), the context (this) of the function execution will be that object literal and not the intended instance of the class that contains toggleActiveClass.

You can bind (or you can use angular.bind as well) the function reference assigned to action property to be of the actual ActionItemsService instance by doing action: this.search.bind(this),

i.e

   {
        name: 'Search',
        icon: 'magnifier',
        action: this.search.bind(this), //<-- this one
        className: 'visible',
        order: 2
    }

Or you could also use arrow operator for lexical context resolution, i.e

   action: (itm:IActionItem)=> this.search(itm:IActionItem),

edited Jun 1, 2015 at 16:28

answered Jun 1, 2015 at 16:19

PSL

124k21 gold badges257 silver badges243 bronze badges

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

1 Comment

amlyhamm Over a year ago

Perfect! Worked like a charm. Thank you!

NYCdotNet · Accepted Answer · 2015-06-01 15:56:47Z

0

What happens if you rewrite toggleActiveClass and search as lambdas? Depending on how these methods are called, this may be pointing to the wrong thing. Using a lambda will force this to be lexically scoped - meaning it will always point to the class instead of it being dependent on how the function was actually called.

    private search = (actionItem:IActionItem) => {
        this.toggleActiveClass(actionItem);
    }

    private toggleActiveClass = (actionItem:IActionItem) => {
        // do some stuff with the actionItem className
    }

answered Jun 1, 2015 at 15:56

NYCdotNet

4,6771 gold badge27 silver badges31 bronze badges

1 Comment

amlyhamm Over a year ago

Hmm, the error goes away. However, it doesn't appear that the ng-click is invoking search anymore. I have my console logging 'searching' within the 'search' function. It logs as expected with my sample above, but not when using toggleActiveClass and search as lambdas.

Collectives™ on Stack Overflow

TypeScript + JavaScript: Is not a function at x?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related