使用Pinia调用GitHub API搜索用户时遇TypeScript类型错误

你遇到的VSCode类型错误，核心是Pinia仓库里的用户数据没有正确声明类型，且初始值结构和API返回不匹配——你把users初始设成了数组[{}]，但GitHub API返回的是单个用户对象，TypeScript无法识别store.users的属性，所以报“属性不存在”的错。按以下步骤修改即可解决：

1. 定义GitHub用户的类型接口 #

在你的Pinia仓库文件（../stores/users.ts）顶部，先声明一个对应GitHub API返回结构的接口：

interface GitHubUser {
  login: string;
  name: string | null;
  avatar_url: string;
  html_url: string;
  public_repos: number;
  followers: number;
  following: number;
  location: string | null;
  // 其他你需要用到的字段都可以补充进来
}

（注：name、location这类字段可能为null，所以要加上| null）

2. 修正Pinia仓库的state和类型 #

把原来的state里的users从数组改成单个用户对象，同时明确类型：

import { defineStore } from "pinia";
import axios from "axios";

interface GitHubUser {
  login: string;
  name: string | null;
  avatar_url: string;
  html_url: string;
  public_repos: number;
  followers: number;
  following: number;
  location: string | null;
}

export const useUserStore = defineStore("user", {
  state: () => ({
    users: null as GitHubUser | null, // 初始值设为null，明确类型为GitHubUser或null
  }),
  getters: {
    getUsers(state): GitHubUser | null {
      return state.users;
    },
  },
  actions: {
    async fetchUsers(inputValue: string) {
      try {
        // 给axios请求指定返回类型为GitHubUser
        const data = await axios.get<GitHubUser>(
          `https://api.github.com/users/${inputValue}`
        );
        
        this.users = data.data;
      } catch (error) {
        alert(error);
        console.log(error);
        // 请求失败时重置users为null
        this.users = null;
      }
    },
  },
});

3. 模板里处理空值情况 #

因为users初始是null，搜索前或请求失败时可能还是null，所以要给模板加判断或用可选链避免报错：
修改后的模板部分代码：

<div class="result" v-if="isActive && store.users">
  <div class="result-container">
    <img class="result-img" :src="store.users.avatar_url" alt="" />
    <div>
      <h3 class="result-name">
        Nome:
        <a class="result-link" target="_blank" :href="store.users.html_url">
          {{ store.users.name || '未设置名称' }}
        </a>
      </h3>
      <h4 class="result-user">Usuário: {{ store.users.login }}</h4>
      <p>{{ store.users.public_repos }} repositórios públicos</p>
      <p>Seguidores: {{ store.users.followers }}  |  Seguindo: {{ store.users.following }}</p>
      <p>Local: {{ store.users.location || '未填写' }}</p>
    </div>
  </div>
</div>

或者用可选链?.更灵活：

<img class="result-img" :src="store.users?.avatar_url" alt="" />
<a class="result-link" target="_blank" :href="store.users?.html_url">
  {{ store.users?.name || '未设置名称' }}
</a>

4. 页面脚本的可选优化 #

页面里的getUsers计算属性也可以明确类型：

const getUsers = computed((): GitHubUser | null => {
  return store.getUsers;
});

这样修改后，VSCode的TypeScript错误就会消失，同时代码的类型安全性也提升了。

内容的提问来源于stack exchange，提问作者Dênis