返回 Promise 或 String 的异步函数 - Typescript

Question

Is it possible to return not just a Promise from a function?

const someFunc = async <T>(url: string): Promise<T> => {
  const res = await fetch(url);

  if (!res.ok) return { error: 'error text' };
  return await res.json();
}

Depending on the condition, function above can return a promise or an object with { error: 'string' } . I'm getting an error here: TS2322: Type '{ error: any; }' is not assignable to type 'T'. '{ error: any; }' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint '{}'. TS2322: Type '{ error: any; }' is not assignable to type 'T'. '{ error: any; }' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint '{}'.

I've tried to use:

const someFunc = async <T>(url: string): Promise<T> | Promise<string> => {}

This throws an error: TS1055: Type 'Promise<T> | Promise<string>' is not a valid async function return type in ES5/ES3 because it does not refer to a Promise-compatible constructor value. TS1055: Type 'Promise<T> | Promise<string>' is not a valid async function return type in ES5/ES3 because it does not refer to a Promise-compatible constructor value.

Also i've tried this variant:

const someFunc = async <T>(url: string): Promise<T | { error: string }> => {}

But when i consume this function:

interface IResponse {
  access_token: string;
  refresh_token: string;
  userRoles: string[];
  error: any;
}

const result = await someFunc<IResponse>(url);
console.log(result.access_token); // throws an error
// TS2339: Property 'access_token' does not exist on type '{ error: string; } | IResponse'.   Property 'access_token' does not exist on type '{ error: string; }'.

UPDATE with type guard

If ('access_token' in result) {
  console.log(result.access_token);
}

this works fine, uses access_token from IResponse interface.

Answer 1

The return type for an async should be a Promise , but the result type of the Promise can be a union:

const someFunc = async <T>(url: string): Promise<T | { error: string}> => {
  const res = await fetch(url);

  if (!res.ok) return { error: 'error text' };
  return await res.json();
}

Playground Link

To use the function result you will need to narrow the type of the result to see if it is an error or the actual result:

interface IResponse {
  access_token: string;
  refresh_token: string;
  userRoles: string[];
}

async function test() {
  const result = await someFunc<IResponse>("url");
  if (!('error' in result)) {
    console.log(result.access_token);
  }
}

Playground Link

See the section on type guards from the handbook