iOS external plugin access Instance

2 posts, 1 answers
  1. Dimitar
    Dimitar avatar
    50 posts
    Member since:
    May 2014

    Posted 29 Nov Link to this post

    Hello , 

    With your help I have created and added an external plugin in iOS. My questions is . When I print log immediately after creating this.testSDKInstance it ok . But when all initialized in compilationHandler , when print this.testSDKInstance its returning undefined. If you have an idea is it something iOS specific or is it result from marshaling.   

    01.declare const TestSDK:any ;
    02. 
    03.export class TestModel extends Observable {
    04. 
    05.    public testSDKInstance ;
    06. 
    07.    public create ()
    08.    {
    09.        this.testSDKInstance = new TestSDK() ;
    10.         console.log ("Instance" + this.testSDKInstance) ;
    11.        this.testSDKInstance.setAppKeyAndSecretWithCompletion
    12.        ("aaa""sss"this.completionHandler);
    13.    }
    14. 
    15.    public  completionHandler  (isAuth:any, err:any):void {
    16.        if (isAuth) {
    17.            console.log("Yupiii authorized" this.testSDKInstance;
    18.    }   
    19.}
  2. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    324 posts

    Posted 29 Nov Link to this post

    Hi Dimitar,

    The thing is that in the way you are creating your completionHandler function it is using the old JavaScript syntax and the meaning of this is different from what you would expect.
    Now as you are writing TypeScript you can easily overcome this using arrow functions where the meaning of this is preserved and is the same as in your global scope. However, if you prefer the JavaScript standard then you would need to "cache" the meaning of this in a custom property (usually called that, self or _that depending on convention).

    For your convenience, In the lines below I am going to show both approaches (TS arrow function vs "caching" the meaning of this)

    Approach to using TypeScript arrow function
    declare const ChirpSDK : any;
     
    export class ChirpSDKModule {
     
        public mySdk: any;
     
        constructor() { }
     
        public startup() : void {
            this.mySdk = new ChirpSDK();
     
            // when using () => {} called arrow function the meaning of this is preserved and is actually this from enclosing context
            let completionHandler = (isAuth, err) => {
                if (isAuth) {
                    console.log("Yupiii authorized");
                } else {
                    console.log("Oops! ==>> " + this.mySdk); // working as expected now
                }
            }
     
            this.mySdk.setAppKeyAndSecretWithCompletion("appKey", "appSecret", completionHandler);
        }
    }


    Approach with "caching' the meaning of this to reuse in the inner scope
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ChirpSDKModule = (function () {
        function ChirpSDKModule() {
        }
        ChirpSDKModule.prototype.startup = function () {
            this.mySdk = new ChirpSDK();
     
            var that = this; // we are storing the meaning of this in our custom variable called that
     
            // JavaScript function
            var completionHandler = function (isAuth, err) {
                if (isAuth) {
                    console.log("Yupiii authorized");
                }
                else {
                    console.log("Oops! ==>> " + that.mySdk); // that.mySdk is now working as expected
                }
            };
            this.mySdk.setAppKeyAndSecretWithCompletion("appKey", "appSecret", completionHandler);
        };
        return ChirpSDKModule;
    }());
    exports.ChirpSDKModule = ChirpSDKModule;

    Which approach you will choose is entirely based on personal preferences. Before the introduction of arrow functions in TypeScript, preserving the meaning of this in a custom variable was the only approach, but now that we have TS with arrows I personally found the code to be more simple when using arrow functions. However, there are some considerations when using arrow functions so the choice is really depending on the developer's actual needs.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top