如何为请求返回的data指定TypeScript类型？解决token类型未知错误

针对你遇到的“property 'token' does not exist on type 'unknown'”错误，核心是给post请求的返回数据显式声明TypeScript类型，具体操作如下：

1. 定义登录成功响应的类型接口 #

先创建一个接口，描述登录接口返回的数据结构，至少包含你需要的token字段：

// 定义登录成功的响应数据类型
interface LoginResponse {
  token: string;
  // 可根据实际接口返回添加其他字段，比如 user_id、username 等
}

2. 给axios的post请求指定泛型类型 #

调用post方法时，通过泛型参数指定返回数据的类型，让TypeScript能识别data的结构：

function handleLogin() {
  isLoggingIn.value = true;
  // 给post方法传入泛型LoginResponse，明确返回的data类型
  loginInstance
    .post<LoginResponse>("login/", {
      ...login.value,
    })
    .then(({ data }) => {
      console.log(data);
      // 此时data.token会被TypeScript正确识别，不再报错
      localStorage.setItem("frontend", data.token);
      store.commit("setToken", data.token);
     
      getServiceList();
    })
    .catch((err) => {
      console.error(err);
      error.value = err?.response?.data;
      const errorMsg = `Something went wrong ${
        err?.response?.data?.non_field_errors ?? ""
      }`;
      handleErrorMessage(flashMessage, errorMsg);
    })
    .finally(() => (isLoggingIn.value = false));
}

3. 可选：定义错误响应的类型（优化类型安全） #

如果需要更严谨的类型检查，可定义错误响应的接口，避免err?.response?.data的类型模糊：

// 定义登录失败的错误响应类型
interface LoginErrorResponse {
  non_field_errors?: string[] | string;
  // 其他可能的错误字段，比如 username、password 对应的错误提示
}

// 在catch中指定错误类型
.catch((err: { response?: { data: LoginErrorResponse } }) => {
  console.error(err);
  error.value = err?.response?.data;
  const errorMsg = `Something went wrong ${
    err?.response?.data?.non_field_errors ?? ""
  }`;
  handleErrorMessage(flashMessage, errorMsg);
})

这样处理后，TypeScript就能正确推断data的类型，解决“token不存在于unknown类型”的报错，同时提升代码的类型安全性。

内容的提问来源于stack exchange，提问作者Salil Rajkarnikar