javascript - 如何在 typescript 中声明成功/失败返回类型

Question

我有一个包，它只执行 HTTP 调用并返回成功响应或错误响应。我正在努力做到这一点，以便您在成功和错误时都能获得 IntelliSense。

这是我的:

class ResultSuccess {
  userId: number;
  id: number;
  title: string;
}

class ResultError {
  error: boolean;
}

export function magic(): Promise<ResultSuccess> {
  return new Promise((resolve, reject) => {
      fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json())
        .then(json => resolve(plainToClass(ResultSuccess, json as ResultSuccess)))
        .catch(err => {
            reject(plainToClass(ResultError, { error: true } as ResultError));
        });
});

这行得通，我对结果有了智能感知，但如果我将返回的主题设置为类似的东西:

function magic(): Promise<ResultSuccess | ResultError>

我不再智能感知成功或失败的结果。

我是 typescript 的新手，有人可以建议一种方法来解决这个问题吗？或者有人可以看到问题吗？

Answer 1

解决方案#1:抛出错误

I'm new to typescript

在这种情况下，我允许自己使用 async 和 await 重写您的 magic 函数，因为这是 2019 年的工作方式:

export async function magic(): Promise<ResultSuccess> {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const json = await response.json();
    return plainToClass(ResultSuccess, json as ResultSuccess);
  } catch (err) {
    throw plainToClass(ResultError, { error: true });
  }
}

返回值是 ResultSuccess 的 promise 。该函数从不返回 ResultError，但可以抛出它。有关如何使用它的示例:

async function useMagic() {
  try {
    const result = await magic();
    // 'result' is of type 'ResultSuccess'
  } catch (err) {
    // 'err' is of type 'any' and you know it is a 'ResultError'
  }
}

解决方案#2:不抛出错误而是返回错误

如果您决定错误必须作为结果值返回，您可以这样做:

export async function magic2(): Promise<ResultSuccess | ResultError> {
  try {
    // … same code as previously …
  } catch (err) {
    return plainToClass(ResultError, { error: true });
  }
}

然后，当您使用结果值时，您必须确定这是错误还是成功。这是一个解决方案:

写一个type guard :

function isResultError(result: ResultSuccess | ResultError): result is ResultError {
  return result["error"] !== undefined;
}

然后，使用它:

async function useMagic2() {
  const result = await magic2();
  if (isResultError(result)) {
    // Here, 'result' is of type 'ResultError'
  } else {
    // Here, 'result' is of type 'ResultSuccess'
  }
}