TypeScript报错TS2339：类型“{ user: any; pwd: any; }”不存在length属性如何解决？

错误原因 #

这个TS2339错误的核心是 TypeScript推断response.data的类型是普通对象{ user: any; pwd: any; }，普通对象不存在length属性，只有数组、字符串等类型才有该属性。你的代码里要取response.data[0]，说明后端接口正常登录时返回的是包含用户信息的数组，但是TypeScript不知道这个结构，所以做了错误的类型推断触发了报错。

解决方案 #

方案1：给axios请求指定明确的返回类型（最推荐） #

先定义用户信息的类型，再给axios.post传入泛型指定返回结构，示例代码：

// 先定义你的用户信息类型，按实际字段调整
interface User {
  id: number;
  username: string;
  email: string;
  // 其他用户字段
}

login = (event: React.FormEvent<HTMLFormElement>) => { // 也给event补全类型更严谨
    event.preventDefault();
    const user = event.target.querySelector("input[type='email']")!.value;
    const pwd = event.target.querySelector("input[type='password']")!.value;
    // 给post方法传入泛型，指定response.data的类型是User数组
    axios
      .post<User[]>(`${settings.env.production.apiUrl}/api/login`, { user, pwd })
      .then((response) => {
        // 现在TS知道response.data是数组，就不会报length不存在的错误了
        if (response.data.length !== 0) {
          sessionStorage.setItem("logged-in", "true");
          sessionStorage.setItem("user", JSON.stringify(response.data[0]));
          this.setState({ loggedIn: true, user: response.data[0] });
        } else {
          sessionStorage.setItem("logged-in", "false");
          alert("Sorry, bad login attempt.");
        }
      });
  };

方案2：临时断言类型（适合快速调试，不推荐长期使用） #

如果你暂时不想写类型定义，可以用类型断言告诉TSresponse.data是数组：

.then((response) => {
  // 把response.data断言为任意数组
  const userList = response.data as any[];
  if (userList.length !== 0) {
    sessionStorage.setItem("logged-in", "true");
    sessionStorage.setItem("user", JSON.stringify(userList[0]));
    this.setState({ loggedIn: true, user: userList[0] });
  } 
  // 剩余逻辑不变
})

方案3：优化接口返回结构（可选，更符合开发规范） #

登录接口返回用户数组的设计不太合理，正常登录成功直接返回单个用户对象、失败返回错误提示即可，你可以调整后端返回逻辑，对应修改前端判断代码也能解决问题：
比如后端返回结构改为{code:200, data: User, msg:'登录成功'}或者{code:401, data:null, msg:'账号密码错误'}，前端直接判断response.data是否存在即可，不需要判断length属性。

内容的提问来源于stack exchange，提问作者Blake Lucey