Encountering TypeScript error TS2345 while attempting to reject a Promise with an error

Question

Encountering TypeScript error TS2345 while attempting to reject a Promise with an error

I recently encountered a perplexing TypeScript error message that I am struggling to comprehend. The specific error reads as follows:

error TS2345: Argument of type '(error: Error) => void | Promise' is not assignable to parameter of type '(reason: any) => IdentityKeyPair | PromiseLike'. Type 'void | Promise' is not assignable to type 'IdentityKeyPair | PromiseLike'.

Initially, my code was functioning without issues until TypeScript raised an objection after I made the following modification:

.catch((error) => {
  if (error instanceof RecordNotFoundError) {
    let identity: Proteus.keys.IdentityKeyPair = Proteus.keys.IdentityKeyPair.new();
    return this.store.save_identity(identity);
  } else {
    return reject(error);
  }
})

This snippet was part of a larger block of code which previously worked flawlessly:

public init(): Promise<Array<Proteus.keys.PreKey>> {
  return new Promise((resolve, reject) => {
    this.store.load_identity()
      .catch((error) => {
        let identity: Proteus.keys.IdentityKeyPair = Proteus.keys.IdentityKeyPair.new();
        return this.store.save_identity(identity);
      })
      .then((identity: Proteus.keys.IdentityKeyPair) => {
        this.identity = identity;
        return this.store.load_prekey(Proteus.keys.PreKey.MAX_PREKEY_ID);
      })
      .then((lastResortPreKey: Proteus.keys.PreKey) => {
        return resolve(lastResortPreKey);
      })
      .catch(reject);
  });
}

However, after implementing the updated code provided earlier, the compiler flagged an issue with the line return reject(error);, triggering error code TS2345.

Screenshot:

https://i.sstatic.net/hnsav.png

This predicament has arisen while utilizing TypeScript version 2.1.4.

javascript typescript compiler-errors promise tsc

Answer 1

Answer №1

Experiment with the code below. When you find yourself in a then or catch block, you have the option to return a Promise or a value that will be automatically wrapped into a Promise. By manually handling Promises, you can simply call the resolve and reject functions without the need to explicitly return anything. If you were to do something like reject(error), it would attempt to turn that into a Promise and pass it to the next then block, causing the error you encountered. To clarify, returning a value within a handler signifies that the chain of operations should continue with this new value. In your scenario, rather than continuing the chain, you likely want the Promise you are creating to resolve or reject based on specific conditions.

public initializePromise(): Promise<Array<Proteus.keys.PreKey>> {
  return new Promise((resolve, reject) => {
    this.storage.loadIdentity()
      .catch((error) => {
        if (error instanceof RecordNotFoundError) {
          let identity: Proteus.keys.IdentityKeyPair = Proteus.keys.IdentityKeyPair.create();
          return this.storage.saveIdentity(identity);
        } else {
          throw error;
        }
      })
      .then((identity: Proteus.keys.IdentityKeyPair) => {
        this.identity = identity;
        return this.storage.loadPrekey(Proteus.keys.PreKey.MAX_PREKEY_ID);
      })
      .then((ultimatePreKey: Proteus.keys.PreKey) => {
        resolve(ultimatePreKey);
      })
      .catch((error) => {
        reject(error);
      });
  });
}

Answer 2

Experiment with the code below. When you find yourself in a then or catch block, you have the option to return a Promise or a value that will be automatically wrapped into a Promise. By manually handling Promises, you can simply call the resolve and reject functions without the need to explicitly return anything. If you were to do something like reject(error), it would attempt to turn that into a Promise and pass it to the next then block, causing the error you encountered. To clarify, returning a value within a handler signifies that the chain of operations should continue with this new value. In your scenario, rather than continuing the chain, you likely want the Promise you are creating to resolve or reject based on specific conditions.

public initializePromise(): Promise<Array<Proteus.keys.PreKey>> {
  return new Promise((resolve, reject) => {
    this.storage.loadIdentity()
      .catch((error) => {
        if (error instanceof RecordNotFoundError) {
          let identity: Proteus.keys.IdentityKeyPair = Proteus.keys.IdentityKeyPair.create();
          return this.storage.saveIdentity(identity);
        } else {
          throw error;
        }
      })
      .then((identity: Proteus.keys.IdentityKeyPair) => {
        this.identity = identity;
        return this.storage.loadPrekey(Proteus.keys.PreKey.MAX_PREKEY_ID);
      })
      .then((ultimatePreKey: Proteus.keys.PreKey) => {
        resolve(ultimatePreKey);
      })
      .catch((error) => {
        reject(error);
      });
  });
}

Answer 3

Answer №2

If you encounter a Promise chain, there is no way to halt it completely (except for cancellation). Even using reject() within the chain is not the correct approach as it involves wrapping a Promise in another constructor, which is misuse of Promises.

Instead of trying to stop the chain entirely, consider allowing the rejection to propagate down the chain by rethrowing it when necessary. Eventually, after all the .catch() handlers have been exhausted, the Promise returned from your function will reject.

When thinking about handling this in synchronous code, you would typically use something like:

try {
  try {
    actionThatThrows();
  } catch (err) {
    breakEverything();
  }
  continue other steps
} catch(err) {
  generalErrorHandling();
}

However, this approach is not suitable for Promises. Instead, it's recommended to separate distinct actions into functions that can resolve or reject independently and utilize Errors as intended - as exceptions that bubble up the stack until they find a handler.

Additionally, if you are working with long asynchronous flows and using TypeScript 2.1.x, consider implementing an async function for better management of your code.

Answer 4

If you encounter a Promise chain, there is no way to halt it completely (except for cancellation). Even using reject() within the chain is not the correct approach as it involves wrapping a Promise in another constructor, which is misuse of Promises.

Instead of trying to stop the chain entirely, consider allowing the rejection to propagate down the chain by rethrowing it when necessary. Eventually, after all the .catch() handlers have been exhausted, the Promise returned from your function will reject.

When thinking about handling this in synchronous code, you would typically use something like:

try {
  try {
    actionThatThrows();
  } catch (err) {
    breakEverything();
  }
  continue other steps
} catch(err) {
  generalErrorHandling();
}

However, this approach is not suitable for Promises. Instead, it's recommended to separate distinct actions into functions that can resolve or reject independently and utilize Errors as intended - as exceptions that bubble up the stack until they find a handler.

Additionally, if you are working with long asynchronous flows and using TypeScript 2.1.x, consider implementing an async function for better management of your code.

Answer 5

Answer №3

Your response is redundant there; it marks the conclusion of the onRejection callback. Furthermore, employing return reject() will still execute the subsequent .then() promise as expected. Nevertheless, by throwing the error instead, it will be passed down to the subsequent promises until reaching the .catch(reject);

To summarize: within any catch/then block, returning a value will resolve the child promise, while throwing an error will reject it.

I have revised your code to ensure a smoother flow of the promise chain.

public initialize(): Promise<Array<Proteus.keys.PreKey>> {
  return new Promise((resolve, reject) => {
    this.store.load_identity()
    .catch(
      (error) => {
        if (error instanceof RecordNotFoundError) {
          let identity: Proteus.keys.IdentityKeyPair = Proteus.keys.IdentityKeyPair.new();
          return this.store.save_identity(identity);
        } else {
          throw error;
        }
      }
    )
    .then(
      (identity: Proteus.keys.IdentityKeyPair) => {
        this.identity = identity;
        resolve(this.store.load_prekey(Proteus.keys.PreKey.MAX_PREKEY_ID));
      },
      reject
    )
  });
}

Answer 6

Your response is redundant there; it marks the conclusion of the onRejection callback. Furthermore, employing return reject() will still execute the subsequent .then() promise as expected. Nevertheless, by throwing the error instead, it will be passed down to the subsequent promises until reaching the .catch(reject);

To summarize: within any catch/then block, returning a value will resolve the child promise, while throwing an error will reject it.

I have revised your code to ensure a smoother flow of the promise chain.

public initialize(): Promise<Array<Proteus.keys.PreKey>> {
  return new Promise((resolve, reject) => {
    this.store.load_identity()
    .catch(
      (error) => {
        if (error instanceof RecordNotFoundError) {
          let identity: Proteus.keys.IdentityKeyPair = Proteus.keys.IdentityKeyPair.new();
          return this.store.save_identity(identity);
        } else {
          throw error;
        }
      }
    )
    .then(
      (identity: Proteus.keys.IdentityKeyPair) => {
        this.identity = identity;
        resolve(this.store.load_prekey(Proteus.keys.PreKey.MAX_PREKEY_ID));
      },
      reject
    )
  });
}

Encountering TypeScript error TS2345 while attempting to reject a Promise with an error

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to insert an image directly into the <img> tag without having to first send it to the server?

Executing a command efficiently in Javascript with the get method

Error in electron-builder: Module 'dmg-license' was not found

Customize your click event with conditional styling in React

An Angular module downloaded from npm seems to be lacking the required @NgModule declaration

Python, JavaScript, and Selenium RC all work together within loop statements on .aspx pages

Utilizing Typescript for Efficient Autocomplete in React with Google's API

Merge text inputs to preview content prior to form submission

Attributes for 'v-bind' directives must have a value specified

Exploring table iteration in Angular 7

Express server encounters a 404 error while processing a POST request

Transferring information from MySQL to Vue.js data attribute

Exploring the implementation of if statements within the array map function in the context of Next.js

Determining in Angular 8 whether a value has been altered by a user or by a method call

Utilizing the props value for emission within the emits array: A guide

Ensure that the cursor is consistently positioned at the end within a contenteditable div

What is the best way to ensure my arrow text remains properly positioned when using fullpage.js?

Disappearing modal in Bootstrap 5 does not eliminate the backdrop

How can I connect the box using the Interactive Picture jQuery tool?

"Unlocking the Power of mediaElementjs: Easy Steps to Accessing the Player Instance