CODEWITHSUNDEEP
javascriptjquerytypescriptpromise
iCollect.it Ltd
iCollect.it Ltd

Reputation: 93601

Returning a promise gives "Supplied parameters do not match" in TypeScript

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>?

Upvotes: 0

Views: 1140

Answers (2)

Bergi
Bergi

Reputation: 664936

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.

Upvotes: 1

Bruno Grieder
Bruno Grieder

Reputation: 29854

Not tested but I guess you need to provide the type information to then e.g. 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() 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();
}

Upvotes: 0

Related Questions