converting from javascript to typescript: referencing "this" to window instead of class

Question

I am working on this authorization code. Original code snippet can be found by starting from line:

To do so add new file named “authInterceptorService.js” under “services” folder and paste the code below:

This is javascript version:

 angular.module('eucngts').factory('AuthInterceptorService', ['$q', '$location', function ($q, $location) {   
        var authInterceptorServiceFactory = {};

        var _responseError = function (rejection) {
            if (rejection.status === 401) {
                localStorage.removeItem('authorizationData');
                $location.path('/login');
            }
            return $q.reject(rejection);
        }

        authInterceptorServiceFactory.responseError = _responseError;

        return authInterceptorServiceFactory;
    }]);

And this is TypeScript version:

module Services {
    export class AuthInterceptorService {
        $location: ng.ILocationService;
        $q: ng.IQService;

        constructor($location, $q) {
            var self = this;
            self.$location = $location;
            self.$q = $q;

        }

        public responseError(rejection) {
            var self = this;// "this" REFERENCES TO WINDOW INSTEAD OF AuthInterceptorService CLASS
            if (rejection.status === 401) {
                localStorage.removeItem('authorizationData');
                self.$location.path('/login');
            }
            return self.$q.reject(rejection);
        }

        static AuthInterceptorServiceFactory($location, $q) {    
            return new AuthInterceptorService($location, $q);
        }


    }

    AuthInterceptorService.$inject = ['$location', '$q'];
    angular.module('eucngts').factory('AuthInterceptorService', AuthInterceptorService.AuthInterceptorServiceFactory);
}

In TypeScript version as mentioned in comment above code snippet:

var self = this;// "this" REFERENCES TO WINDOW INSTEAD OF AuthInterceptorService CLASS

What should I do that I can successfully call self.$location.path('/login'); At the moment I receive Cannot read property 'path' of undefined error

Depending on how this is being invoked, the context might be lost. So seeing the other end, which utilizes AuthInterceptorService would help. One way to ensure that the context stays is to use Typescript's arrow functions. Something like public responseError = (rejection) => {...} (Source: github.com/Microsoft/TypeScript/wiki/… ) — DRobinson
– DRobinson, Commented Jul 29, 2015 at 14:28
This answers my question @DRobinson . Could you make it answer then I accept it — asdf_enel_hak
– asdf_enel_hak, Commented Jul 29, 2015 at 14:32

DRobinson · Accepted Answer · 2015-07-29 14:42:51Z

Depending on how the function is being invoked, the context might be lost. As is the case in standard Javascript, though there's a chance that some of Typescripts abstractions made it easier. As such, seeing the other end, which utilizes AuthInterceptorService would help.

One way to ensure that the context stays is to use Typescript's arrow functions.

public responseError = (rejection) => {
    var self = this;// "this" REFERENCES TO WINDOW INSTEAD OF AuthInterceptorService CLASS
    if (rejection.status === 401) {
        localStorage.removeItem('authorizationData');
        self.$location.path('/login');
    }
    return self.$q.reject(rejection);
}

(Source: https://github.com/Microsoft/TypeScript/wiki/'this'-in-TypeScript#user-content-use-instance-functions )

Remember that, while this solves some problems, it has downsides as well and isn't for every scenario - the above source spells out a few of these.

Collectives™ on Stack Overflow

converting from javascript to typescript: referencing "this" to window instead of class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related