iOS external plugin access Instance

[Dimitar]

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.}

[Nick Iliev]

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