Question

I have the following class defined:

class Link {
    Action: string;
    DialogType: string;
    constructor ($link: JQuery) {
        this.Action = $link.attr('data-action') || '';
        this.DialogType = $link.attr('data-dialogType') || '';
    }
}

I have function that declares an instance of the class. Once the class is declared then I can use intellisense and there is full type checking:

function adminDialog($link: JQuery) {
    var link = new Link($link);
    link.Modal.MaxHeight = 600;
    doDialogAjax(link);
}

In the doDialogAjax function below I still have full type checking:

function doDialogAjax(link: Link) {
    $.ajax( link.Url, {
        cache: false,
        context: { link: link },
        dataType: 'html'
    }).done(onDialogDone).fail(onDialogFail);
}

At this point I lose the type checking if I try to access this.link:

function onDialogDone(data: any, textStatus: string, jqXHR: JQueryXHR) {

    // no type checking. I can type anything after this.link
    var x = this.link.abcdefg;

    // I assign to link
    var link: Link = this.link;

    // Now I get checking
    var a = link.Modal.MaxHeight; // allowed
    var a = link.abcdefg;         // error

    // However will the following change the property of the link passed 
    // into the function. I assume not but I am not 100% sure.
    link.Modal.MaxHeight = 999;

}

So my question here is how can I get type checking for the value of link passed using context to the function onDialogDone? Also am I correct in saying that after I create a new variable link in that function then any changes made to link will not be made to the object that is passed in as this.link?

Answer 1

This line is a perfectly valid way of doing what you want:

var link: Link = this.link;

I would suggest changing it to:

var link = <Link>this.link;

Each object in JavaScript is a reference, and you don’t create a new object with this line.
So any change on the new link variable is reflected on this.link.