如何初始化最终将设置为 Typescript 中异步请求响应的变量？

Question

作为 typescript 的新手，我运行遇到了一个我在第一个项目中没有遇到的问题 - 当声明变量 prior 到api try-catch 中的请求似乎会在 try-catch 之后抛出对该变量的操作的打字稿错误。

我已经编写了示例代码来说明下面的问题。

res 是有问题的变量，在 if 语句的顶部。

  interface AuthApiData {
      message: string;
      success: boolean;
    }

    interface AuthApiRes {
      status: number;
      data: AuthApiData;
    }

    if (router.pathname !== '/login') {
      let res: AuthApiRes;
      
      let status;
      const authenticate = async () => {
        try {
          res = await axiosPrivate.get('/api/gilat');
          status = res?.status;
        } catch (err) {
          console.log('authflow err:', err);
        }
      };

      authenticate();

      if (status === 200 && res?.data?.success === true) {
        // I wanted to continue writing code here
      }
    }

如果有人想查看 typescript 在哪里抛出错误以及工具提示上出现的错误，我在问题的底部放了一张图片。

这里所有的代码都是在 try-catch 语句之前声明一个变量 res，然后在之后的 if 语句中尝试使用这个变量。在 try-catch 内部有一个 api 请求，当异步请求被解析时，它将结果设置到这个 res 变量。

如果我将 res 声明为适合其接口的某个初始对象，错误就会消失，例如res = { status: 403, data: ... }.

我还尝试用以下方法初始化它的类型：

let res = AuthApiRes | undefined

这解决了问题，但我发现它很乱，或者我不确定这是否只是“作弊”打字稿。

我不希望将此变量初始化为一个空的占位符对象，而是让它在 api 解析之前保持未分配状态。

这可能吗？如果不可能，我如何在不初始化变量或设置联合“或”未定义的情况下消除此错误？

Answer 1

I also tried initializing its type with:

let res: AuthApiRes | undefined

Which fixes the problem but I find it messy or rather I'm unsure if > this is just "cheating" typescript.

当一个变量被声明但没有被初始化时，它的值是undefined，因为这个打字稿不会在你添加undefined与联合时抱怨。

对我来说最好的方法是将res初始化为null，然后检查它：


let res: AuthApiRes | null = null;

if(res) {
  if(status === 200 && res.data?.success === true) {
    ...
  }
}

与status变量相同。

如果您不喜欢这种方法，可以在 res 前加上 !

let res!: AuthApiRes

这提示 typescript 你实际上会为 ¶es 赋值，但你会丢失 typescript 检查，对我来说，这是不值得的。

如何初始化最终将设置为 Typescript 中异步请求响应的变量？

How to initialize a variable that will eventually be set to the response of an async request in Typescript?

typescript

try-catch

variable-assignment

declaration