1

Why can't I just return the promise by chaining then & catch, i don't see the difference here.

type SuccessResponse<T> = [T, null]

type ErrorResponse<U> = [null, U]

type Result<T, U> = Promise<SuccessResponse<T> | ErrorResponse<U>>

export const promiseWrapper = async <T, U extends Error>(
  promise: Promise<T>
): Result<T, U> => {

  // --- This works ---
  try {
    const data = await promise
    return Promise.resolve([data, null])
  } catch (error) {
    return Promise.resolve([null, error])
  }
  // ---


  // --- Doing this instead cause TypeScript error ---

  // return promise
  //   .then((data) => [data, null])
  //   .catch((error) => Promise.resolve([null, error]))
  // ---

}

This is the error i got. I read it as the promise i return not considered the "then & catch" chain in some way. And by doing it with by async/await (The working way) and decouple the promise the compiler understand that i want to return the Result<> promise?

If i want to use the promise chain how can I tell typescript that my promise will return Result<>?

Type '(T | null)[] | [null, any]' is not assignable to type 'SuccessResponse<T> | ErrorResponse<U>'.
  Type '(T | null)[]' is not assignable to type 'SuccessResponse<T> | ErrorResponse<U>'.
    Type '(T | null)[]' is not assignable to type 'ErrorResponse<U>'.
      Target requires 2 element(s) but source may have fewer.
1
  • Sort of side-note but your result seems odd. You've seem to taken the success/error callback style and put it as a tuple result in a promise. Whereas I'd expect the error to be the rejection of the promise. If you really want both, seems like you're after an Either which does make more sense but I'm not sure a tuple in a promise is the best way to implement it.
    – VLAZ
    Commented May 17, 2021 at 19:40

1 Answer 1

2

The problem is that Typescript somehow cannot distinguish [T, null] from (T|null)[]. The value [data, null] is correct for both cases.

To solve the issue, it seems that you need to specify the type that is being returned by the .then:

  return promise
    .then<SuccessResponse<T>>((data) => [data, null])
    .catch((error) => [null, error]);
3
  • It works but why must i do this, and only for the SucessResponse? Where does ```(T|null)[]´´´ comes from?
    – Walraz
    Commented May 17, 2021 at 19:55
  • Typescript tries to infer what [data, null] mean and ends up with (T|null)[]. This type is an array of elements that can be either T or null. When comparing (T|null)[] with your type [T, null], it will not match.
    – F. Gouveia
    Commented May 17, 2021 at 20:03
  • 1
    I just found out now that there is another solution to help Typescript infer the tuple type: typescriptlang.org/docs/handbook/release-notes/… Basically, you need to set your types as readonly type SuccessResponse<T> = readonly [T, null]; and type ErrorResponse<U> = readonly [null, U];, then you can do .then((data) => [data, null] as const) and .catch((error) => [null, error] as const).
    – F. Gouveia
    Commented May 17, 2021 at 20:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.