获取/发布请求中的打字稿类型注释

【问题标题】：Typescript type annotation in get/post requests获取/发布请求中的打字稿类型注释
【发布时间】：2022-08-17 19:25:18
【问题描述】：

function handleLogin() {
  isLoggingIn.value = true;
  loginInstance
    .post(\"login/\", {
      ...login.value,
    })
    .then(({ data }) => {
      console.log(data);
      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));
}

如何将打字稿类型分配给数据？它抛出错误 \"property \'token\' does not exist on type \'unknown\'\"

什么是登录实例？它是一个 axios 实例吗？那么你应该可以做到.post<YourType>(\"login/\"...)

标签： typescript vue.js

【解决方案1】：

您可能希望将自定义接口分配给类型data，因为默认情况下它被视为unknown 类型。对于未知类型的对象，您无法在转换之前访问属性（快速阅读https://mariusschulz.com/blog/the-unknown-type-in-typescript）。您必须为您的请求创建一个接口或类型，例如：

interface IRequest {
   token: String;
}

然后，你必须对 TypeScript 说对象 data 就是那个类型，例如：

// ...
  loginInstance
    .post("login/", {
      ...login.value,
    })
    .then(({ data: IRequest }) => {
// ...

您还可以像这样进行单行类型定义：

// ...
  loginInstance
    .post("login/", {
      ...login.value,
    })
    .then(({ data: { token: String } }) => {
// ...

考虑到如果对象data 不是具有属性token 作为字符串的对象，这将崩溃。 TypeScript 是为类型安全而设计的，嗯……这是……类型安全。

【讨论】：