Returning a promise gives “Supplied parameters do not match” in TypeScript

Question

I am in the middle of converting a jQuery plugin to use promises instead of callbacks . This should be very basic, but not sure if the problem is my approach in chaining promises, my return type, or TypeScript just being fussy.

I keep getting this error:

Error   27  Supplied parameters do not match any signature of call target:
    Type '(value: {}) => {}' requires a call signature, but type 'JQueryPromise<any>' lacks one.

A cut-down version of my function looks like this:

    _navigate(forward: boolean, $panel: JQuery, target: string): JQueryPromise<any>
    {
        var dfd = $.Deferred();
        switch (target)
        {
            // '_self' is a full page load link
            case '_self':
                setTimeout(function ()
                {
                    window.location.href = url;
                }, 0);

                // Return empty promise - as we are about to lose the page
                dfd.resolve(true);
                break;
            // _back re-displays a panel already loaded
            case '_back':
                // Fetch a reference to the panel before this one
                var $existingPanel = THIS._getNextPanel($panel, false);

    // >>>> ERROR ON NEXT LINE <<<<<<
                // This will animate back in the previous panel - promise on complete
                dfd = dfd.then(THIS._gotoPanel($existingPanel, false, true, target));

                break;
    // [SNIP]
        }
        return dfd.promise();
    }

_gotoPanel is just another method that also returns a JQueryPromise<any> promise:

    _gotoPanel($panel: JQuery, forward: boolean, transition: boolean, target?: string): JQueryPromise<any>

The final version needs to be able to chain any number of promises from methods and $.ajax calls but I keep hitting this error. What should my return type look like if not JQueryPromise<any> ?

Answer 1

What should my return type look like if not JQueryPromise<any> ?

As the error message '(value: {}) => {}' requires a call signature says, you need to pass a callback to .then() , instead of a promise!

I think you want just

dfd = THIS._gotoPanel($existingPanel, false, true, target);

as the dfd would otherwise not be resolved at all in the _back case.

Answer 2

Not tested but I guess you need to provide the type information to then eg then<any>

If you don't, jQuery wraps another JQueryPromise around the return type of the function within the then

Anyway, I personally would not wrap the method inside a $.Deferred() , but would rather, return $.when(true) instead of dfd.resolve(true) and would directly return THIS._gotoPanel(...)

EDIT

var d = $.Deferred(); d = d.then(blah); return d.promise() var d = $.Deferred(); d = d.then(blah); return d.promise() does not fly

If wrapping in a Deferred , something along the lines of:

_navigate(forward: boolean, $panel: JQuery, target: string): JQueryPromise<any>
{
    return $.Deferred(dfd => {
        switch (target) {
            // '_self' is a full page load link
            case '_self':
                ....
                dfd.resolve(true);
                break;

            case '_back':
                THIS._gotoPanel($existingPanel, false, true, target)).then(
                    ()  => { dfd.resolve(whatever); },
                    err => { dfd.reject(err); }
                )
                break;
          }
     }).promise();
}