Strange error message regarding ES6 promises that is difficult to interpret

Question

Strange error message regarding ES6 promises that is difficult to interpret

Snippet

getToken(authCode: string): Promise<Token> {
    return fetch(tokenUrl, { method: "POST" }).then(res => res.json()).then(json => {
        if (json["error"]) {
            return Promise.reject(json);
        }
        return new Token(json);
    });
}

Issue reported by Tsc(2.0.6):

xxx.ts(135,81): error TS2345: Argument of type '(json: any) => Promise<never> | Token' is not assignable to parameter of type '(value: any) > PromiseLike<never>'.                                                                  
  Type 'Promise<never> | Token' is not assignable to type 'PromiseLike<never>'.                                      
    Type 'Token' is not assignable to type 'PromiseLike<never>'.                                                     
      Property 'then' is missing in type 'Token'.

Configuration in Tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "lib": [
            "es6",
            "dom"
        ]
    }
}

Note about promise typings being defined in

node_modules/typescript/lib/lib.es2015.iterable.d.ts

However, if the rejected Promise is not returned:

getToken(authCode: string): Promise<Token> {
    return fetch(tokenUrl, { method: "POST" }).then(res => res.json()).then(json => {
        return new Token(json);
    });
}

No errors occur in this case. How can a rejected promise be properly returned?

javascript typescript es6-promise typescript-typings

Answer 1

Answer №1

In this scenario, the rejected promise is not being returned; instead, an error is thrown to reject the promise:

receiveToken(authenticationCode: string): Promise<AuthenticationToken> {
    return fetch(tokenEndpoint, { method: "POST" }).then(response => response.json()).then(data => {
        if (data["error"]) {
            throw new CustomError(data["error"]);
        }

        return new AuthenticationToken(data);
    });
}

Answer 2

In this scenario, the rejected promise is not being returned; instead, an error is thrown to reject the promise:

receiveToken(authenticationCode: string): Promise<AuthenticationToken> {
    return fetch(tokenEndpoint, { method: "POST" }).then(response => response.json()).then(data => {
        if (data["error"]) {
            throw new CustomError(data["error"]);
        }

        return new AuthenticationToken(data);
    });
}

Answer 3

Answer №2

Apologies for jumping in on an older query, but I want to suggest incorporating Promise.resolve() around return new Token(json).

getToken(authCode: string): Promise<Token> {
  return fetch(tokenUrl, { method: "POST" })
    .then(res => res.json())
    .then(json => {
      if (json["error"]) {
        return Promise.reject(json);
      }
      // Make sure to do this
      return Promise.resolve(new Token(json));
    });
}

Answer 4

Apologies for jumping in on an older query, but I want to suggest incorporating Promise.resolve() around return new Token(json).

getToken(authCode: string): Promise<Token> {
  return fetch(tokenUrl, { method: "POST" })
    .then(res => res.json())
    .then(json => {
      if (json["error"]) {
        return Promise.reject(json);
      }
      // Make sure to do this
      return Promise.resolve(new Token(json));
    });
}

Strange error message regarding ES6 promises that is difficult to interpret

Answer №1

Answer №2

Similar questions

TypeScript encountered an error with code TS2554, indicating that it was expecting 0 arguments but instead received 1 in an Ionic application

Customizing Google Maps API v3: Utilizing Custom Images as symbolPath Instead of Default Symbols

Initiate the IE driver in WebDriver NodeJS with the option to disregard protected mode settings and possibly introduce flakiness

Angular2 - receiving an error message stating that this.router.navigate does not exist as a

Can you identify the reason for the hydration issue in my next.js project?

searching backwards using regular expressions

Attempting to intercept a 401 error in an HTTP interceptor, I aim to refresh my session and then retry the initial request

"Transforming a callback function to an asynchronous function results in an error

Manipulate the value(s) of a multi-select form field

"Need help passing an API key in the header of a Vue.js project? I recently encountered this issue while using a

Popup showing values that are not defined

Modifying linked dropdown selections with jQuery

UI-router issue: UI view and links not functioning properly

Utilizing IonPage and DeepLinkMetadataType in Ionic 3 for tab navigation: Eliminating the need for tab-0

How do I retrieve the data returned from the component.ts file in Angular Material's MatTableModule when it is not directly inside the mat-table in the template?

Is there a way to automatically generate additional text fields based on the user's input?

The error message "Required parameter not provided" appeared when trying to utilize a nested dynamic route in Next.js

Event delay with JavaScript and jQuery

Sending data using Ajax to the server-side code in ASP.NET

Having issues with passing data to a Modal on eventClick using FullCalendar with ReactJS, receiving a "cannot read property of undefined" error. Any advice on how