TypeScript 中的 Axios 响应类型注解优化指南

2024-03-20 06:13:47

在 TypeScript 代码中优化 Axios 响应类型注解

导言

在 TypeScript 代码中使用 Axios 时，定义响应类型的最佳实践是使用泛型。泛型允许我们指定响应数据的预期类型，从而提高代码的可读性和可维护性。本文将探讨优化 Axios 响应类型注解的方法，包括响应类型注解、错误类型注解和代码优化。

响应类型注解

响应类型注解指定了 Axios 响应中数据的类型。通过定义明确的类型，我们可以轻松地访问和处理响应数据。例如，对于一个返回包含 message 和 success 属性的对象的 /api/resetpassword 端点，我们可以使用泛型接口定义如下类型：

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

然后，在 axios.post 调用中，我们可以指定 ResetPasswordResponse 作为响应类型：

const response = await axios.post<ResetPasswordResponse>('/api/resetpassword', { ... });

错误类型注解

在 catch 块中，error 参数通常是一个 any 类型。然而，我们可以使用更具体的类型来捕获错误，以便在调试时获得更有用的信息。例如，对于 /api/resetpassword 端点，我们可以使用 AxiosError 类型，它表示 Axios 请求失败时的错误：

try {
  ...
} catch (error: AxiosError) {
  ...
}

代码优化

除了定义类型注解外，还可以使用一些技巧来优化代码的效率：

解构赋值： 通过解构赋值，我们可以简化对响应数据中属性的访问：

const { message, success } = response.data;

三元运算符： 三元运算符可以简化条件语句：

success ? toast.success(message) && router.push('/login') : toast.error(message);

优化后的代码示例

const ResetPassword = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  try {
    if (info.password !== info.confirm_password) {
      toast.error('Password don't match');
      return;
    }

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

    const { message, success } = await axios.post<ResetPasswordResponse>(
      '/api/resetpassword',
      {
        token: info.token,
        password: info.password,
      }
    ).data;

    success ? toast.success(message) && router.push('/login') : toast.error(message);
  } catch (error: AxiosError) {
    toast.error('Something went wrong');
  }
};